[hidden] { display: none; }
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea {
  --input-mute-box-shadow: inset 0 -.1rem 0 0 var(--input-border-color);
  --input-mute-focus-box-shadow: inset 0 -.2rem 0 0 var(--input-border-color);

  --input-mute-textarea-box-shadow: inset .1rem 0 0 0 var(--input-border-color);
  --input-mute-focus-textarea-box-shadow: inset .2rem 0 0 0 var(--input-border-color);

  transition: opacity .2s, box-shadow .2s;
  box-sizing: border-box;
  outline: none;
  position: relative;
  font-family: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  font-size: 1em;
  width: 100%;
  margin: 0;
  border: none;
  background-color: var(--canvas-color-secondary);
  box-shadow: inset 0 0 0 .1rem rgb(var(--input-border-color-rgb));
  padding: var(--input-default-padding);
  border-radius: var(--input-border-radius);
  color: var(--colors-standard);
  text-shadow:var(--text-shadow);
  vertical-align: middle;
  &[aria-disabled="true"],
  &:disabled {
    opacity: .5;
    cursor: not-allowed;
    text-shadow: none;
    pointer-events: none;
  }
  &:focus {
    --input-border-color-rgb: var(--colors-affordance-rgb);
    --input-border-color: rgb(var(--input-border-color-rgb));
    box-shadow: inset 0 0 0 .1rem rgb(var(--input-border-color-rgb)), inset .5rem 0 0 rgb(var(--input-border-color-rgb));
    &::placeholder,
    &::-ms-input-placeholder {
      opacity: 0.3;
    }
  }
  &.mute {
    background-color: var(--canvas-color-secondary);
    box-shadow: inset 0 -.1rem 0 0 rgb(var(--input-border-color-rgb));
    padding: .5em 1em .5em 1.5em;
    &:focus {
      --input-border-color-rgb: var(--colors-affordance-rgb);
      background-color: rgba(var(--input-border-color-rgb), 0.05);
      box-shadow: inset 0 -.2rem 0 0 rgb(var(--input-border-color-rgb));
    }
  }
}
textarea {
  height: 4em;
  &:focus {
    height: 8em;
  }
  &:before {
    display: none;
  }
  &.mute {
    padding: 1em 1em 1em 2em;
    box-shadow: inset .1rem 0 0 0 rgb(var(--input-border-color-rgb));
    border-bottom: none;
    &:focus {
      box-shadow: inset .2rem 0 0 0 rgb(var(--input-border-color-rgb));
    }
  }
}
input[type="file"] {
  width: 0.001em;
  height: 0.001em;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
