@charset "UTF-8";

@if $enable-inputs == true {
  .auto-input-box,
  .as-n-c-input-box {
    &--disable {
      cursor: no-drop;

      .auto-input-box__tag-container,
      .as-n-c-input-box__tag-container {
        pointer-events: none;

        input,
        button {
          color: $color-lightest;
        }

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

      .icon {
        fill: $color-lightest;
      }
    }

    &--region-type {
      .icon {
        fill: $brand-turquoise;
      }
    }

    &--icon,
    &--magnifier-icon,
    &--select-type,
    &--pencil-icon {
      .as-n-c-input-box__tag-container {
        position: relative;
      }

      .icon {
        @include size(2rem);

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
    }

    &--icon-textarea {
      .icon {
        @include size(2rem);

        position: absolute;
        top: 23px;
        z-index: 1;
      }
    }

    &--label-type {
      &.auto-input-box--icon,
      &.auto-input-box--magnifier-icon,
      .auto-input-box__fake-label,
      &.as-n-c-input-box--icon,
      &.as-n-c-input-box--magnifier-icon {
        .as-n-c-input-box__fake-label {
          left: 52px;
        }
      }

      .auto-input-box__fake-select-value,
      .auto-input-box__tag-container > input,
      .auto-input-box__tag-container > textarea,
      .as-n-c-input-box__fake-select-value,
      .as-n-c-input-box__tag-container > input,
      .as-n-c-input-box__tag-container > textarea {
        padding: 30px map_get($mq-container-indents, 'sm') 10px;

        .ng-invalid.is-error & {
          &.ng-invalid {
            color: $color-error;

            &::placeholder {
              color: $color-error;
            }

            + .auto-input-box__fake-label,
            + .as-n-c-input-box__fake-label {
              color: $color-error;
            }
          }
        }

        .ng-invalid.is-error & {
          &::placeholder {
            color: $color-error;
          }

          &:not(.ng-valid) {
            + .auto-input-box__fake-label,
            + .as-n-c-input-box__fake-label {
              color: $color-error;
            }
          }
        }
      }

      & .auto-input-box__inputs > input,
      & .as-n-c-input-box__inputs > input {
        padding-right: 52px;
      }
    }

    &--color-type {
      &.auto-input-box--label-type {
        .auto-input-box__fake-select-value {
          display: inline-flex;

          > span {
            &:nth-child(6) {
              border-color: transparent !important;
              background: transparent !important;

              &:after {
                @include text-base(400);

                content: '...';
              }
            }

            &:nth-child(n + 7) {
              display: none;
            }
          }
        }
      }
      &.as-n-c-input-box--label-type {
        .as-n-c-input-box__fake-select-value {
          display: inline-flex;

          > span {
            &:nth-child(6) {
              border-color: transparent !important;
              background: transparent !important;

              &:after {
                @include text-base(400);

                content: '...';
              }
            }

            &:nth-child(n + 7) {
              display: none;
            }
          }
        }
      }
    }

    &--icon,
    &--icon-textarea,
    &--magnifier-icon {
      .auto-input-box__tag-container > input,
      .auto-input-box__tag-container > textarea,
      .auto-input-box__fake-select-value,
      .as-n-c-input-box__tag-container > input,
      .as-n-c-input-box__tag-container > textarea,
      .as-n-c-input-box__fake-select-value {
        padding-left: 52px; // padding + icon width + margin
      }

      .auto-input-box__tag-container > input,
      .auto-input-box__tag-container > textarea,
      .as-n-c-input-box__tag-container > input,
      .as-n-c-input-box__tag-container > textarea {
        &:focus {
          box-shadow: none;
        }
      }

      .icon {
        left: map_get($mq-container-indents, 'sm');
      }
    }

    &--select-type {
      &:not(.auto-input-box--region-type):not(.as-n-c-input-box--region-type) {
        &.is-active {
          .icon {
            &.js-auto-popover-reference-point,
            &.js-fixed-tooltip-point {
              transform: translateY(-50%) rotate(180deg);
            }
          }
        }
      }

      .auto-input-box__fake-select-value,
      .as-n-c-input-box__fake-select-value {
        padding-right: 42px; // padding + icon width + margin
      }

      .icon {
        right: map_get($mq-container-indents, 'sm');
        transition: transform $transition-duration-base-min;
      }
    }

    &--pencil-icon {
      .auto-input-box__fake-label,
      .as-n-c-input-box__fake-label {
        left: 52px; // padding + icon width + margin
        max-width: calc(100% - 52px);
      }

      .auto-input-box__tag-container,
      .as-n-c-input-box__tag-container {
        position: relative;

        .icon {
          left: map_get($mq-container-indents, 'sm');
        }

        > textarea,
        > input {
          padding-left: 52px; // padding + icon width + margin
        }
      }
    }

    &--input-radio {
      .auto-input-box__fake-select-value,
      .as-n-c-input-box__fake-select-value {
        padding-right: 52px !important;
      }
    }

    &__radio-and-checkbox-input {
      @include size(100%);

      position: absolute !important;
      top: 0 !important;
      right: 0 !important;
      z-index: 99 !important;
      cursor: pointer;
      opacity: 0 !important;

      &:checked {
        + .auto-input-box__radio-and-checkbox-icon-container,
        .auto-input-box__radio-icon,
        + .as-n-c-input-box__radio-and-checkbox-icon-container,
        .as-n-c-input-box__radio-icon {
          background: $brand-turquoise;
          border-color: $brand-turquoise;

          &::after {
            opacity: 1;
          }
        }

        &:hover {
          + .auto-input-box__radio-and-checkbox-icon-container,
          .auto-input-box__radio-icon,
          + .as-n-c-input-box__radio-and-checkbox-icon-container,
          .as-n-c-input-box__radio-icon {
            background: $brand-green-pea !important;
            border-color: $brand-green-pea !important;
          }
        }
      }

      &[type='checkbox'] {
        + .auto-input-box__radio-and-checkbox-icon-container,
        .auto-input-box__radio-icon,
        + .as-n-c-input-box__radio-and-checkbox-icon-container,
        .as-n-c-input-box__radio-icon {
          &::after {
            @include size(20px);

            background-color: transparent;
            background: {
              image: url('#{$assets-path}/img/icons/checkbox-check.svg');
              repeat: no-repeat;
            }
          }
        }
      }

      &:hover {
        + .auto-input-box__radio-and-checkbox-icon-container,
        .auto-input-box__radio-icon,
        + .as-n-c-input-box__radio-and-checkbox-icon-container,
        .as-n-c-input-box__radio-icon {
          border-color: $color-base;
        }
      }
    }

    &__radio-and-checkbox-icon-container {
      @include size(2rem);

      position: absolute;
      top: 50%;
      right: map_get($mq-container-indents, 'sm');
      transform: translateY(-50%);
      z-index: 1;
      border-radius: 50%;
    }

    &__radio-icon {
      @include size(100%);

      position: absolute;
      top: 0;
      right: 0;
      border-radius: 50%;
      border: 1px solid $color-gray;
      transition: background $transition-duration-base-min, border-color $transition-duration-base-min;

      &::after {
        @include size(0.8rem);

        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: #fff;
        opacity: 0;
        transition: opacity $transition-duration-base-min;
      }
    }

    &__tag-container {
      position: relative;
      display: block;
      min-height: map_get($mq-container-indents, 'sx') * 0.5;

      &:not(.auto-input-box__tag-container--not-hover):not(.as-n-c-input-box__tag-container--not-hover) {
        &:hover {
          > textarea,
          > input,
          .auto-input-box__fake-select-value,
          .as-n-c-input-box__fake-select-value {
            box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);
          }
        }
      }

      &.auto-input-box__tag-container--not-hover,
      &.as-n-c-input-box__tag-container--not-hover {
        > textarea,
        > input {
          box-shadow: none !important;
        }
      }

      > textarea,
      > input {
        &::placeholder {
          font-weight: 400;
          color: $color-lighter;
        }

        &[type='tel'] {
          &::placeholder {
            font-weight: 500;
            color: $color-base;
          }
        }

        .ng-invalid.is-error & {
          &.ng-invalid {
            &::placeholder {
              color: $color-error;
            }

            + .auto-input-box__fake-label,
            + .as-n-c-input-box__fake-label {
              color: $color-error;
            }
          }
        }

        .is-invalid.is-error & {
          &::placeholder {
            color: $color-error;
          }

          + .auto-input-box__fake-label,
          + .as-n-c-input-box__fake-label {
            color: $color-error;
          }
        }
      }

      > .auto-input-box__fake-select-value,
      > .as-n-c-input-box__fake-select-value,
      > input {
        padding-right: 52px !important;
      }
    }

    &__tag-container > input,
    &__tag-container > textarea,
    &__fake-select-value {
      @include text-base-big(500);

      position: relative;
      z-index: 10;
      display: block;
      padding: 20px map_get($mq-container-indents, 'sm') 20px;
      width: 100%;
      text-align: left;
      color: $color-base;
      transition: box-shadow $transition-duration-base-min;

      .auto-input-box--reference-button-mod,
      .auto-input-box--clear-button-mod &,
      .as-n-c-input-box--reference-button-mod,
      .as-n-c-input-box--clear-button-mod & {
        padding-right: 52px !important;
      }

      &:hover {
        box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);
      }

      &:focus {
        outline: none;
        box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);

        .as-n-c-input-box__tag-container--not-hover & {
          box-shadow: none !important;
        }
      }

      span {
        pointer-events: none;

        &:not(:last-child) {
          &::after {
            content: ', ';
          }

          &[data-content-type='color'] {
            margin-right: map_get($mq-container-indents, 'sm') * 0.5;
          }
        }

        &[data-content-type='color'] {
          @include size(2rem);
          @include font(0, 0);

          display: inline-block;
          border-radius: 50%;
          border: 1px solid;
        }
      }
    }

    &__fake-label {
      @include text-base(400);
      @include ellipsis(calc(100% - #{map_get($mq-container-indents, 'sx') * 0.5}), block);

      content: attr(data-label);
      position: absolute;
      top: map_get($mq-container-indents, 'sm') * 0.5;
      left: map_get($mq-container-indents, 'sm');
      margin-bottom: 2px;
      color: $color-lighter;
      width: calc(100% - #{map_get($mq-container-indents, 'sx') * 0.5});
    }

    &__fake-select-value {
      @include ellipsis(100%, block);
    }

    &__reference-button,
    &__clear-button {
      @include size(2rem);
      @include interact(background-color, $color-gray);

      position: absolute;
      top: 50%;
      right: map_get($mq-container-indents, 'sm');
      transform: translateY(-50%);
      z-index: 100;
      border-radius: 50% !important; // override ordinal styles
      background-color: $color-lightest;
      transition: background-color $transition-duration-base-min;

      &:focus {
        background-color: $color-gray;
        outline: none;
      }

      &::before,
      > .icon {
        position: absolute !important; // !important not to write an exception in several places
        top: 50% !important; // !important not to write an exception in several places
        left: 50% !important; // !important not to write an exception in several places
        transform: translate(-50%, -50%) !important; // !important not to write an exception in several places
      }
    }

    &__clear-button {
      > .icon {
        @include size(1rem);

        fill: #fff !important; // !important not to write an exception in several places
      }
    }

    &__reference-button {
      @include interact(fill, #fff, 'hover .icon');

      > .icon {
        @include size(2rem);

        fill: $color-base;
      }
    }
  }
}