// Imports
@import "./_variables.scss";

.nv-input {
  @apply w-full;

  &:not(.nv-input--prepend) {
    input,
    textarea,
    label,
    .nv-input__input-content {
      @apply pl-1;
    }
  }

  input,
  textarea,
  label {
    box-shadow: none;
  }

  .iconbox {
    @apply flex items-center;
    z-index: 1;

    &--inner {
      @apply -mt-px;
      &-append {
        @apply absolute;
      }
    }

    &__icon-wrap {
      @apply flex opacity-20 items-center;
    }
  }

  &__close {
    @apply transition border-none cursor-pointer opacity-20 hover:opacity-100;
  }

  &:not(.nv-input--append) {
    .nv-input__close {
      @apply mr-2;
    }
  }

  &__fieldset {
    @apply absolute border top-0 left-0 h-full w-full bg-white;
    &:not([class*=" rounded-"]):not([class^="rounded-"]) {
      @apply rounded-lg;
    }
  }

  &__legend {
    @apply px-1 h-auto invisible flex items-center text-sm z-10 transition-all whitespace-nowrap overflow-hidden outline;
  }

  &__label {
    @apply absolute transition-all opacity-40 block items-start whitespace-nowrap overflow-hidden max-w-[calc(100%-32px)] text-ellipsis;
    &--active {
      @apply text-sm opacity-100;
      @apply min-h-0 py-0 #{!important};
    }
  }

  &__loader {
    @apply absolute bottom-px left-2 flex h-px rounded-full w-[calc(100%-16px)] z-10 overflow-hidden;
    .linear-activity {
      @apply overflow-hidden w-full h-full bg-primary-lighten/10
    }

    //.determinate {
    //  @apply relative max-w-full h-full bg-primary;
    //  transition: width 500ms ease-out 1s;
    //}

    .indeterminate {
      @apply relative w-full h-full;
    }

    .indeterminate:before {
      @apply absolute h-full bg-primary;
      content: '';
      animation: indeterminate_first 2.5s infinite ease-out;
    }

    .indeterminate:after {
      @apply absolute h-full bg-primary;
      content: '';
      animation: indeterminate_second 2.5s infinite ease-in;
    }

    @keyframes indeterminate_first {
      0% {
        left: -100%;
        width: 100%;
      }
      100% {
        left: 100%;
        width: 10%;
      }
    }

    @keyframes indeterminate_second {
      0% {
        left: -150%;
        width: 100%;
      }
      100% {
        left: 100%;
        width: 10%;
      }
    }
  }

  &__input {
    @apply w-full focus:outline-none bg-transparent text-black disabled:text-subline border-0 focus:border-0;
  }

  &.nv-input--append {
    .nv-input__input {
      padding-right: calc(16px + 1em);
    }
  }

  &__field {
    @apply flex items-start h-full;
    &__inner {
      @apply field p-px flex grow relative w-full h-full;
    }
  }

  &--disabled {
    .nv-input__fieldset {
      @apply bg-gray-50;
    }
  }

  &:not(.nv-input--disabled) {
    .nv-input__field__inner {
      @apply cursor-text;
    }
  }

  @each $name, $size in $input-font-sizes {
    &.nv-size--#{$name} {
      font-size: map-deep-get($input-font-sizes, $name);

      input {
        box-shadow: none;
        min-height: map-deep-get($input-height, $name);
        font-size: map-deep-get($input-font-sizes, $name);
      }

      .nv-input__label {
        padding-top: calc(
                (map-deep-get($input-height, $name) -
                map-deep-get($input-font-line-height, $name)) /
                2 -
                1px
        );
      }

      .nv-input__label.nv-input__label--active,
      legend {
        font-size: map-deep-get($input-label-font-sizes, $name);
      }

      .field {
        padding-left: map-deep-get($input-inner-margin, $name);
      }

      .nv-input__legend {
        margin-left: map-deep-get($input-inner-margin, $name);
      }

      &.nv-input--prepend {
        .field {
          padding-left: calc(map-deep-get($input-inner-margin, $name) / 2);
        }

        .nv-input__legend {
          margin-left: calc(map-deep-get($input-inner-margin, $name) / 2);
        }
      }

      &.nv-input--append {
        input:not([type="number"]),
        textarea {
          padding-right: calc(map-deep-get($input-inner-margin, $name) + map-deep-get($input-icon-sizes, $name));
        }
      }

      &.nv-input--clearable {
        input:not([type="number"]),
        textarea {
          padding-right: calc(map-deep-get($input-inner-margin, $name) + map-deep-get($input-icon-sizes, $name) * 2);
        }
      }

      .iconbox {
        height: map-deep-get($input-height, $name);

        &--inner {
          &-prepend {
            padding-right: calc(map-deep-get($input-inner-margin, $name) / 2);
          }

          &-append {
            margin-left: calc(map-deep-get($input-inner-margin, $name) / 2);
            margin-right: calc(map-deep-get($input-inner-margin, $name) / 2);
          }
        }

        &--outer {
          &-prepend {
            margin-right: map-deep-get($input-icon-outer-margin, $name);
          }

          &-append {
            margin-left: map-deep-get($input-icon-outer-margin, $name);
          }
        }
      }

      .nv-icon {
        font-size: map-deep-get($input-icon-sizes, $name);
        width: map-deep-get($input-icon-sizes, $name);
        height: map-deep-get($input-icon-sizes, $name);

        svg {
          width: map-deep-get($input-icon-sizes, $name);
          height: map-deep-get($input-icon-sizes, $name);
        }
      }
    }
  }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  .hide-spin-buttons::-webkit-outer-spin-button,
  .hide-spin-buttons::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .hide-spin-buttons {
    -moz-appearance: textfield; /* Firefox */
  }

  .hide-spin-buttons::-webkit-scrollbar,
  .hide-spin-buttons::-webkit-scrollbar-corner {
    background: transparent;
  }
}