.funkwhale {
  &.input {
    background-color: var(--fw-bg-color);
    box-shadow: inset 0 0 0 4px var(--fw-border-color);

    input {
      &::placeholder {
        color: var(--fw-placeholder-color);
      }
      @include dark-theme {
        color: var(--fw-gray-300);
      }
    }

    .prefix,
    .input-right {
      color: var(--fw-placeholder-color);
    }

    @include light-theme {
      --fw-bg-color: var(--fw-gray-100);
      --fw-border-color: var(--fw-bg-color);
      --fw-placeholder-color: var(--fw-gray-600);

      &:hover {
        --fw-border-color: var(--fw-gray-300);
      }

      &:focus-within {
        --fw-border-color: var(--fw-primary);
        --fw-bg-color: var(--fw-blue-010);
      }
    }

    @include dark-theme {
      --fw-bg-color: var(--fw-gray-850);
      --fw-border-color: var(--fw-bg-color);
      --fw-placeholder-color: var(--fw-gray-300);

      &:hover {
        --fw-border-color: var(--fw-gray-700);
      }

      &:focus-within {
        --fw-border-color: var(--fw-gray-600);
        --fw-bg-color: var(--fw-gray-800);
      }
    }

    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--fw-border-radius);
    overflow: hidden;
    cursor: text;

    &.has-icon {
      input {
        padding-left: 36px;
      }
    }

    input {
      display: block;
      width: 100%;
      padding: 8px 12px;
      font-size: 14px;
      font-family: $font-main;
      background-color: transparent;
      line-height: inherit;
      border: none;
    }

    .prefix,
    .input-right {
      display: flex;
      align-items: center;
      font-size: 14px;
      pointer-events: none;
      writing-mode: horizontal-tb;
    }

    .prefix {
      position: absolute;
      top: 0;
      left: 4px;
      bottom: 0;
      width: 32px;
      justify-content: center;
    }

    .input-right {
      padding-right: 12px;
    }
  }
}