.funkwhale.input {
  position: relative;
  flex-grow: 1;

  --padding-v: 9px;
  --padding: 16px;

  > input {
    border: none !important;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-family: $font-main;
    line-height: 28px;
    border-radius: var(--fw-border-radius);
    cursor: text;

    @include light-theme {
        &.raised {
          background-color: #ffffff;
          border-color: var(--border-color);
        }
    }

    &:hover {
      box-shadow: inset 0 0 0 4px var(--border-color);
    }

    &:focus {
      box-shadow: inset 0 0 0 4px var(--focus-ring-color);

      &:focus-visible {
        outline: none;
      }
    }

    &::placeholder {
      color: var(--fw-placeholder-color);
    }
  }

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

  > .label {
    margin-top: -18px;
    padding-bottom: 8px;
    font-size:14px;
    font-weight:600;
  }

  > .prefix,
  > .input-right {
    align-items: center;
    font-size: 14px;
    color: var(--fw-placeholder-color);
  }

  > .prefix {
    position: absolute;
    left: 0;
    bottom: 0;

    height: 48px;
    min-width: 48px;
    display: flex;

    > i {
      font-size:18px;
      margin: auto;
    }
  }

  &:has(>.prefix)>input {
    padding-left: 40px;
  }

  > .input-right {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 48px;
    min-width: 48px;
    display: flex;

    > i {
      font-size:18px;
    }

    > .span-right {
      padding: calc(var(--padding-v) - 1px) var(--padding) calc(var(--padding-v) + 1px) var(--padding);

      > .button {
        margin-right: -16px;
        margin-top: 2px;
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
      }
    }

  }

  > .search {
    > i {
      font-size:18px;
    }
    &.button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  &:has(>.search)>input {
    padding-right: 140px;
  }

  > .show-password {
    justify-content:center;
  }
  &:has(>.show-password)>input {
    padding-right: 40px;
  }

  >.reset {
    min-width: auto;
    margin: 4px;

    // Make button fit snuggly into rounded border
    border-radius: 4px;
  }
}