@use 'theme-variables' as *;

@include export-module('input-theme') {
  .sf-input-group {
    background: $input-transparent-background;
    color: $input-content-color;
    border-bottom-color: $input-border-color;
    border-top-color: $input-transparent-background;

    &:hover {
      border-bottom-color: $input-border-hover-color;
    }

    &.sf-input-focus {
      border-bottom-color: $input-border-focus-color;
    }

    &.sf-success {
      border-bottom-color: $input-success-border-color;

      .sf-float-text,
      .sf-input::placeholder {
        color: $input-text-success-color;
      }

      &::before,
      &::after {
        background: $input-success-border-color;
      }
    }

    &.sf-warning {
      border-bottom-color: $input-warning-border-color;

      .sf-float-text,
      .sf-input::placeholder {
        color: $input-text-warning-color;
      }

      &::before,
      &::after {
        background: $input-warning-border-color;
      }
    }

    &.sf-error {
      border-bottom-color: $input-error-border-color;

      .sf-float-text,
      .sf-input::placeholder {
        color: $input-text-error-color;
      }

      &::before,
      &::after {
        background: $input-error-border-color;
      }
    }

    .sf-input-icon {
      background: $input-transparent-background;
      color: $input-close-icon-color;
    }

    .sf-input-icon:not(.sf-no-hover) {
      &:hover {
        background: $input-close-icon-hover-background;
        color: $input-close-icon-hover-color;
      }

      &:active {
        background: $input-close-icon-active-background;
        color: $input-close-icon-active-color;
      }
    }

    .sf-float-text {
      color: $input-placeholder-color;

      &.sf-label-top {
        color: $input-float-label-color;
      }
    }

    &::before,
    &::after {
      background: $input-line-background;
    }

    &.sf-outline {
      border-color: $input-border-color;

      &:hover {
        border-color: $input-outlined-border-hover-color;
      }

      &.sf-success {
        border-color: $input-success-border-color;
      }

      &.sf-warning {
        border-color: $input-warning-border-color;
      }

      &.sf-error {
        border-color: $input-error-border-color;
      }

      &.sf-input-focus {
        border-color: $input-outlined-focus-border-color;
        box-shadow: $input-outlined-focus-border-shadow;

        &.sf-success {
          border-color: $input-success-border-color;
          box-shadow: $input-success-border-shadow;
        }

        &.sf-warning {
          border-color: $input-warning-border-color;
          box-shadow: $input-warning-border-shadow;
        }

        &.sf-error {
          border-color: $input-error-border-color;
          box-shadow: $input-error-border-shadow;
        }
      }
    }

    &.sf-filled {
      background: $input-filled-background;
      transition: $input-filled-background-transition;
      border-color: $input-filled-border-color;
      box-shadow: $input-filled-box-shadow;

      &:hover{
        background-color: $input-filled-hover-active-bg-color;
        border-color: $input-filled-hover-border-color;
      }

      &:active {
        background-color: $input-filled-hover-active-bg-color;
      }

      &.sf-success {
        border-color: $input-success-border-color;
        &::before,
        &::after {
          background: $input-filled-success-line-background;
        }
      }

      &.sf-warning {
        border-color: $input-warning-border-color;
        &::before,
        &::after {
          background: $input-filled-warning-line-background;
        }
      }

      &.sf-error {
        border-color: $input-error-border-color;
        &::before,
        &::after {
          background: $input-filled-error-line-background;
        }
      }

      &::before,
      &::after {
        background: $input-filled-line-background;
      }

      &.sf-input-focus {
        border-color: $input-filled-focus-border-color;
        box-shadow: $input-filled-focus-border-shadow;

        &.sf-success {
          border-color: $input-success-border-color;
          box-shadow: $input-filled-success-border-shadow;
        }

        &.sf-warning {
          border-color: $input-warning-border-color;
          box-shadow: $input-filled-warning-border-shadow;
        }

        &.sf-error {
          border-color: $input-error-border-color;
          box-shadow: $input-filled-error-border-shadow;
        }
      }
    }

    &.sf-disabled {
      opacity: 1;
      border-bottom-color: $input-border-disabled-color;
      color: $input-content-disabled-color;
      background: $input-disabled-bg-color;

      & ::placeholder {
        color: $input-placeholder-disabled-color;
      }

      &.sf-outline {
        background-color: $input-outlined-disabled-bg-color;
      }
      &.sf-filled {
        background-color: $input-filled-disabled-bg-color;
      }
    }

    &.sf-readonly {
      background: $input-readonly-bg-color;

      &.sf-outline {
        background-color: $input-outlined-readonly-bg-color;
      }
      &.sf-filled {
        background-color: $input-filled-disabled-bg-color;
      }
    }
  }

  .sf-input {
    background: none;
    color: inherit;

    &::selection {
      background: $input-select-background;
      color: $input-select-font-color;
    }

    &::placeholder {
      color: $input-placeholder-color;
      user-select: none;
    }
  }
}