.input {
  inline-size: 100%;
  padding: var(--input-padding, 0.5em 0.8em);
  border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-border--heavy));
  border-radius: var(--input-border-radius, 0.5em);
  background-color: var(--input-background, transparent);
  color: var(--input-color, var(--color-text));
  font-family: inherit;
  font-size: max(16px, 1em);
  line-height: inherit;
  accent-color: var(--input-accent-color, var(--color-text));

  &[type="search"] {
    &::-webkit-search-decoration,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }
  }

  &:active {
    filter: none;
  }
}

.input--transparent {
  --input-border-color: currentColor;
  --input-color: currentColor;
  --input-background: transparent;
}

.input--actor {
  .input {
    --input-padding: 0;
    --input-border-radius: 0;
    --input-background: transparent;
    --input-border-size: 0;
    --outline-size: 0;
    --outline-color: transparent;
  }

  .btn:not(.btn--file) {
    margin-block: -0.4em;

    &:last-child {
      margin-inline-end: -0.7em;
    }
  }

  .btn--primary img {
    inline-size: 1em;
  }
}

::placeholder {
  transition: opacity 700ms ease;
}

.placeholder-animation::placeholder {
  opacity: 0;
}

/* Switches */
.switch {
  position: relative;
  display: inline-flex;
  inline-size: 3em;
  block-size: 1.75em;

  &:focus-within .switch__btn {
    box-shadow:
      0 0 0 max(0.15em, 2px) var(--color-bg),
      0 0 0 max(0.3em, 4px) var(--color-text);
  }
}

.switch__input {
  inline-size: 0;
  block-size: 0;
  opacity: 0.1;
}

.switch__btn {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--color-border--heavy);
  transition: 150ms ease;
  border-radius: 2em;

  &::before {
    position: absolute;
    content: "";
    block-size: 1.35em;
    inline-size: 1.35em;
    inset-inline-start: 0.2em;
    inset-block-end: 0.2em;
    background-color: var(--color-text--reversed);
    transition: 150ms ease;
    border-radius: 50%;
  }

  .switch__input:disabled + & {
    background-color: var(--color-border--heavy) !important;
    cursor: unset;
  }

  .switch__input:checked + & {
    background-color: var(--color-text);

    &::before {
      transform: translateX(1.2em);
    }
  }
}