input, textarea, button, select {
  background-color: var(--item__background-color);
  border: none;
  outline: none;
  padding: .5rem;
  border-radius: var(--border-radius);
  display: block;
  transition: opacity 150ms; }

.group input, .group textarea, .group select,
.block input, .block textarea, .block select,
.foldout input, .foldout textarea, .foldout select {
  background-color: #444; }

input.type-password + div {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: stretch;
  right: .75rem; }

input.type-password + div > div {
  cursor: pointer;
  opacity: .5;
  padding: .25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.375rem; }

input.type-password + div > div:hover {
  opacity: 1; }

button {
  cursor: pointer;
  padding: .5rem .75rem;
  background-color: #347; }
  button:not(:disabled):not([ripple]):hover {
    filter: brightness(1.1); }
  button[data-action="saveAll"], button[data-action="saveConfig"], button[data-action="runScript"] {
    background-color: #373; }
  button[data-action="delete"], button.remove {
    background-color: #632; }

textarea {
  height: 20rem;
  line-height: 1.5;
  resize: none; }

input.type-password:not(:disabled):has(+ div:hover),
input:not(:disabled):focus,
input:not(:disabled):hover,
select:not(:disabled):focus,
select:not(:disabled):hover,
button:not(:disabled):not([ripple]):active {
  filter: brightness(1.2); }

select {
  padding: .45rem .25rem; }

input.error {
  color: #fb6;
  background-color: #f004;
  outline: .125em solid #943; }