@use '../../assets/styles/fonts';

@mixin transition-all($time: 0.3s) {
  transition: opacity $time ease-out, transform $time ease-out,
    font-size $time ease-out, padding $time ease-out;
}

@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left + 2px;
}

@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
  opacity: $opacity;
  @if $color {
    color: var(--nlp-input-placeholder-color);
  }
  @if $border-color-arg {
    border-color: var(--nlp-border-color);
  }
}

.ff-nlp-input-wrapper {
  position: relative;

  .ff-nlp-input {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 32px;
    min-width: 482px;
    display: flex;
    align-items: end;
    position: relative;
    &-fieldset {
      margin: 0;
      padding: 25px 0px 0px 8px;
      border: 1px solid transparent;
      box-sizing: border-box;
      height: 32px;
      width: 100%;
      border-radius: 4px;
      display: block;

      &--border-radius {
        border-radius: 0px 4px 4px 0px;
      }

      &--no-label {
        padding: 30px 0px 0px 8px;
      }

      &--default {
        @include opacity-style(0, null, var(--ff-nlp-input-border-color));
      }

      &--active {
        @include opacity-style(1, null, var(--ff-nlp-input-brand-color));
      }

      &--option {
        opacity: 1;
      }

      &--no-border {
        border-color: transparent;
      }

      &--error {
        border-color: var(--error-light);
      }

      .ff-nlp-input-legend {
        @extend .font-size-8;
        padding: 0 2px;
        letter-spacing: 0.5px;
        &--default {
          @include transition-all(0.3s);
          opacity: 0;
        }

        &--active {
          @include transition-all(0.25s);
          @include opacity-style(1, var(--ff-nlp-input-brand-color));
        }

        &--option {
          @include opacity-style(1, var(--ff-nlp-input-default-color));
        }

        &--error {
          color: var(--error-light);
        }

        &--required {
          margin-right: 2px;
        }
      }
    }

    &-container {
      @extend .fontSm;
      @include absolute-position(6px, auto, auto, auto);
      width: 482px;
      height: 32px;
      padding: 0 28px 0 8px;
      border-radius: 4px;
      border: 1px solid transparent;
      z-index: 100;
      background: transparent;
      outline: none;
      color: var(--nlp-option-color);
      text-indent: 22px;

      &:hover {
        ~ .ff-nlp-input-label {
          color: var(--nlp-input-placeholder-color);
          padding-left: 26px;
        }
      }

      &--border-radius {
        border-radius: 0px 4px 4px 0px;
      }

      &--default {
        @include opacity-style(1, null, var(--ff-nlp-input-border-color));

        &:hover {
          border-color: var(--nlp-input-placeholder-color);

          ~ .ff-nlp-input-fieldset--option {
            border-color: var(--ff-nlp-input-text-color);

            .ff-nlp-input-legend--option {
              color: var(--ff-nlp-input-text-color);
            }
          }
        }
      }

      &--no-label {
        min-height: calc(100% - 2px);
        margin-top: 0px;
        top: 0px;
      }

      &--active {
        border-color: transparent;

        &:hover {
          border-color: transparent;
        }
      }

      &--no-border {
        border: none;
        border-color: transparent;

        &:hover {
          border-color: transparent;

          ~ .ff-nlp-input-fieldset--no-border {
            border-color: transparent;
          }
        }
      }

      &--disable {
        border-color: var(--ff-nlp-input-border-color);

        &:hover {
          border-color: var(--ff-nlp-input-border-color);

          ~ .ff-nlp-input-label--default {
            color: var(--ff-nlp-input-default-color);
          }
        }
      }

      &--error {
        border-color: var(--error-light);

        &:hover {
          border-color: var(--error-light);
        }
      }
    }

    &-label {
      @include absolute-position(13px, auto, auto, 8px);
      z-index: 1;
      font-size: 12px;
      top: 60%;
      padding-left: 8px;

      &--default {
        @include transition-all;
        @include opacity-style(1, var(--ff-nlp-input-default-color));
        transform: translateY(-50%);
      }

      &--active {
        @include transition-all;
        opacity: 0;
        transform: translateY(-150%);
        padding: 0 6px;
      }

      &--required {
        margin-right: 2px;
      }
    }

    &-arrow {
      position: absolute;
      top: 60%;
      height: 100%;
      right: 10px;
      transform: rotateX(0deg) translateY(-50%);
      cursor: pointer;
      z-index: 10000;

      &--no-label {
        top: 50%;
      }
    }
  }

  &-error-text {
    @include absolute-position(auto, auto, -14px, 12px);
    white-space: nowrap;
  }
  .ff-nlp-input-label {
    display: flex;
    align-items: center;
    padding-left: 26px;
    gap: 4px;
  }
  .ff-nlp-help_icon {
    position: absolute;
    bottom: 4px;
    left: 8px;
    width: 30px;
    height: 30px;
    z-index: 100;
    cursor: pointer;
  }
}
.ff-nlp-input-arrow {
  z-index: 111;
}
.ff-nlp-icon-container {
  position: relative;
  display: inline-block;
}

.icon-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-55%);
  transform: translateY(-145%);
  margin-bottom: 5px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  background-color: var(--tooltip-bg-color);
  color: var(--tooltip-text-color);
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

.ff-nlp-icon-container:hover .icon-label {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.help-icon-label {
  position: absolute;
  bottom: 80%;
  left: 96%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  background-color: var(--tooltip-bg-color);
  color: var(--tooltip-text-color);
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.help-icon-container:hover .help-icon-label {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.main-section {
  display: flex;
  padding-left: 8px;

  .chips-accordion-content {
    padding-top: 6px;
    padding-right: 8px;
  }
}