@use 'theme-variables' as *;

@include export-module('input-layout') {
  .sf-large.sf-input-group {
    font-size: $input-large-font-size;
    line-height: $input-large-line-height;
    letter-spacing: $input-large-letter-spacing;

    .sf-input,
    .sf-multiselect-values {
      padding: $input-large-padding;
    }

    &.sf-float-input {
      margin-top: $input-large-float-margin-top;
    }

    .sf-float-text {
      inset-block-start: $input-large-outlined-float-top;
      inset-inline-start: $input-large-float-left;
    }

    &.sf-float-input:has(.sf-label-top) .sf-float-text {
      transform: $input-large-float-focus-transition;
      font-size: $input-large-float-font-size;
      line-height: $input-large-float-line-height;
      inset-inline-start: $input-float-prefix-focus-left;
    }

    &.sf-has-prefix {
      .sf-float-text {
        inset-inline-start: $input-large-close-icon-box-size;
      }

      &:has(.sf-label-top) {
        .sf-float-text {
          transform: $input-large-float-prefix-focus-transition;
          inset-inline-start: $input-float-prefix-focus-left;
        }
      }
    }

    .sf-input-icon {
      padding: $input-large-close-icon-box-padding;
      margin-inline: $input-large-close-icon-margin-inline;

      svg {
        font-size: $input-large-close-icon-font-size;
      }
    }

    &.sf-outline {
      border-radius: $input-large-outlined-border-radius;

      .sf-input,
      .sf-multiselect-values {
        padding: $input-large-outlined-padding;
      }

      &.sf-has-prefix {
        .sf-input {
          padding: $input-large-outlined-prefix-padding;
        }

        .sf-float-text {
          inset-inline-start: $input-large-close-icon-box-size;
        }

        &:has(.sf-label-top) {
          .sf-float-text {
            transform: $input-large-outlined-float-prefix-focus-transition;
            inset-inline-start: $input-outlined-float-focus-left;
          }
        }
      }

      .sf-float-text {
        inset-block-start: $input-large-outlined-float-top;
      }

      &.sf-float-input:has(.sf-label-top) .sf-float-text {
        transform: $input-large-outlined-float-focus-transition;
        inset-inline-start: $input-outlined-float-focus-left;
      }

    }

    &.sf-filled {
      border-radius: $input-large-filled-border-radius;
      line-height: $input-large-filled-line-height;
      font-size: $input-large-filled-font-size;

      .sf-input,
      .sf-multiselect-values {
        padding: $input-large-filled-padding;
      }

      &.sf-float-input .sf-input {
        padding: $input-large-filled-float-padding;
      }

      .sf-float-text {
        inset-block-start: $input-large-filled-float-top;
        inset-inline-start: $input-large-filled-float-left;
      }

      &.sf-has-prefix {
        .sf-input {
          padding: $input-large-filled-prefix-padding;
        }

        &.sf-float-input .sf-input {
          padding: $input-large-filled-float-prefix-padding;
        }

        .sf-float-text {
          inset-inline-start: $input-large-close-icon-box-size;
        }
      }

      &:has(.sf-label-top) {
        .sf-float-text {
          transform: $input-large-filled-float-focus-transition;
          inset-inline-start: $input-filled-float-focus-left;
        }
      }

    }
  }

  .sf-medium.sf-input-group {
    font-size: $input-medium-font-size;
    line-height: $input-medium-line-height;
    letter-spacing: $input-medium-letter-spacing;

    .sf-input,
    .sf-multiselect-values {
      padding: $input-medium-padding;
    }

    &.sf-float-input {
      margin-top: $input-medium-float-margin-top;
    }

    .sf-float-text {
      inset-block-start: $input-medium-outlined-float-top;
      inset-inline-start: $input-medium-float-left;
    }

    &.sf-float-input:has(.sf-label-top) .sf-float-text {
      transform: $input-medium-float-focus-transition;
      font-size: $input-medium-float-font-size;
      line-height: $input-medium-float-line-height;
      inset-inline-start: $input-float-prefix-focus-left;
    }

    &.sf-has-prefix {
      .sf-float-text {
        inset-inline-start: $input-medium-close-icon-box-size;
      }

      &:has(.sf-label-top) {
        .sf-float-text {
          transform: $input-medium-float-prefix-focus-transition;
          inset-inline-start: $input-float-prefix-focus-left;
        }
      }
    }

    .sf-input-icon {
      padding: $input-medium-close-icon-box-padding;
      margin-inline: $input-medium-close-icon-margin-inline;

      svg {
        font-size: $input-medium-close-icon-font-size;
      }
    }

    &.sf-outline {
      border-radius: $input-medium-outlined-border-radius;

      .sf-input,
      .sf-multiselect-values {
        padding: $input-medium-outlined-padding;
      }

      &.sf-has-prefix {
        .sf-input {
          padding: $input-medium-outlined-prefix-padding;
        }

        .sf-float-text {
          inset-inline-start: $input-medium-close-icon-box-size;
        }

        &:has(.sf-label-top) {
          .sf-float-text {
            transform: $input-medium-outlined-float-prefix-focus-transition;
            inset-inline-start: $input-outlined-float-focus-left;
          }
        }
      }

      .sf-float-text {
        inset-block-start: $input-medium-outlined-float-top;
      }

      &.sf-float-input:has(.sf-label-top) .sf-float-text {
        transform: $input-medium-outlined-float-focus-transition;
        inset-inline-start: $input-outlined-float-focus-left;
      }

    }

    &.sf-filled {
      border-radius: $input-medium-filled-border-radius;
      line-height: $input-medium-filled-line-height;
      font-size: $input-medium-filled-font-size;

      .sf-input,
      .sf-multiselect-values {
        padding: $input-medium-filled-padding;
      }

      &.sf-float-input .sf-input {
        padding: $input-medium-filled-float-padding;
      }

      .sf-float-text {
        inset-block-start: $input-medium-filled-float-top;
        inset-inline-start: $input-medium-filled-float-left;
      }

      &.sf-has-prefix .sf-float-text {
        inset-inline-start: $input-medium-close-icon-box-size;
      }


      &:has(.sf-label-top) {
        .sf-float-text {
          transform: $input-medium-filled-float-focus-transition;
          inset-inline-start: $input-filled-float-focus-left;
        }
      }

    }
  }

  .sf-input-group {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: $input-font-size;
    line-height: $input-line-height;
    vertical-align: middle;
    border-width: 1px 0;
    border-style: solid;
    margin-bottom: $input-margin-bottom;
    overflow-inline: clip;
    justify-content: flex-end;

    .sf-input-icon {
      display: flex;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      text-align: center;
      font-size: $input-medium-close-icon-font-size;
      padding: $input-close-icon-box-padding;
      margin-inline: $input-close-icon-margin-inline;
      border-radius: $input-close-icon-border-radius;
      margin-block: $input-close-icon-box-margin;
      position: relative;
      border: none;

      &.sf-input-adornment-icon {
        cursor: default;
      }
    }

    .sf-clear-icon.sf-clear-icon-hide {
      visibility: hidden;
    }

    &.sf-float-input {
      margin-top: $input-float-margin-top;
      overflow-inline: visible;

      &:has(.sf-label-top) {
        .sf-float-text {
          font-size: $input-float-focus-font-size;
          font-weight: $input-float-font-weight;
          transform: $input-float-focus-transition;
          line-height: $input-float-line-height;
          inset-inline-start: $input-float-prefix-focus-left;
        }
      }
    }

    .sf-float-text {
      position: absolute;
      overflow: hidden;
      pointer-events: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      user-select: none;
      line-height: inherit;
      transform: $input-float-transform;
      transform-origin: left top;
      transition: 0.25s ease-in-out;
      inset-block-start: $input-float-top;
      letter-spacing: $input-float-text-letter-spacing;
      inset-inline-start: $input-float-left;
    }

    &.sf-has-prefix {
      .sf-float-text {
        inset-inline-start: $input-close-icon-box-size;
      }

      &:has(.sf-label-top) {
        .sf-float-text {
          transform: $input-float-prefix-focus-transition;
          inset-inline-start: $input-float-prefix-focus-left;
        }
      }
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      bottom: $input-line-bottom;
      height: $input-float-focus-height;
      width: $input-float-focus-line-width;
      transition: .2s cubic-bezier(.4, 0, .4, 1);
    }

    &::before {
      left: 50%;
    }

    &::after {
      right: 50%;
    }

    &.sf-input-focus {

      &::before,
      &::after {
        width: 50%;
      }
    }

    &.sf-outline {
      border-width: 1px;
      border-radius: $input-outlined-border-radius;
      transition: border 0.2s, box-shadow 0.2s;

      &::before,
      &::after {
        content: none;
      }

      .sf-input,
      .sf-multiselect-values {
        padding: $input-outlined-padding;
      }

      &.sf-has-prefix {
        .sf-input {
          padding: $input-outlined-prefix-padding;
        }

        .sf-float-text {
          inset-inline-start: $input-close-icon-box-size
        }
      }

      .sf-float-text {
        inset-inline-start: $input-outlined-float-left;
        background: $input-outlined-float-focus-background;
      }


      &:has(.sf-label-top) {
        .sf-float-text {
          transform: $input-outlined-float-focus-transition;
          width: auto;
          padding: $input-outlined-float-focus-padding;
          inset-inline-start: $input-outlined-float-focus-left;
        }
      }

    }

    &.sf-filled {
      border-radius: $input-filled-border-radius;
      border-width: $input-filled-border-width;
      font-size: $input-filled-font-size;
      line-height: $input-filled-line-height;

      .sf-input,
      .sf-multiselect-values {
        padding: $input-filled-padding;
      }

      &.sf-has-prefix {
        .sf-input {
          padding: $input-filled-prefix-padding;
        }

        &.sf-float-input .sf-input {
          padding: $input-filled-prefix-float-padding;
        }

        .sf-float-text {
          inset-inline-start: $input-close-icon-box-size;
        }
      }

      &.sf-float-input .sf-input {
        padding: $input-filled-float-padding;
      }

      .sf-float-text {
        inset-block-start: $input-filled-float-top;
        inset-inline-start: $input-filled-float-left;
      }


      &:has(.sf-label-top) {
        .sf-float-text {
          transform: $input-filled-float-focus-transition;
          inset-inline-start: $input-filled-float-focus-left
        }
      }
    }
  }

  .sf-input {
    width: 100%;
    border: 0;
    outline: none;
    font: inherit;
    line-height: inherit;
    height: auto;
    padding: $input-padding;
    text-indent: 0;
    letter-spacing: inherit;
  }

  .sf-multiselect-values {
    padding: $input-padding;
  }

  .sf-form-label {
    font-size: $input-form-label-font-size;
    line-height: $input-form-label-line-height;
    letter-spacing: $input-form-label-letter-space;
    color: $input-form-label-color;
  }

  .sf-form-error {
    font-size: $input-form-error-font-size;
    color: $input-form-error-color;
  }

  .sf-helper-text {
    font-weight: $input-helper-text-font-weight;
    font-size: $input-helper-text-font-size;
    line-height: $input-helper-text-line-height;
    letter-spacing: $input-helper-text-letter-spacing;
  }

  .sf-helper-text-container {
    overflow: hidden;
  }

  .sf-helper-text-on-focus {
    transform: $input-helper-text-on-focus-transform;
    transition: $input-helper-text-on-focus-transition;
  }

  .sf-helper-text-on-focus.sf-helper-text-focused {
    transform: $input-helper-text-on-focused-transform;
  }

  .sf-input-group.sf-medium+.sf-helper-text-container .sf-helper-text {
    font-size: $input-medium-helper-text-font-size;
    line-height: $input-medium-helper-text-line-height;
  }

  .sf-input-group.sf-large+.sf-helper-text-container .sf-helper-text {
    font-size: $input-large-helper-text-font-size;
    line-height: $input-large-helper-text-line-height;
  }
}