$component-identifier: '.extend-text';

#{$component-identifier} {
  position: relative;

  .form-element__textbox {
    padding-right: 24px;

    &[readonly] {
      cursor: pointer;
    }
  }

  &.is-opened {
    #{$component-identifier}__auto-complete-container {
      border-color: $border-color-focus-input;
    }
  }

  &.m-bottom {
    &.is-opened {
      .form-element__textbox {
        @include border-bottom-radius(0);
      }
    }

    #{$component-identifier}__auto-complete-container {
      @include border-bottom-radius($border-radius-input);

      top: 100%;
      border-top: none;

      &:last-child {
        @include border-bottom-radius($border-radius-input - 1);
      }
    }

    #{$component-identifier}__tags-container,
    #{$component-identifier}__tag {
      margin: 0 4px 4px 0;
    }
  }

  &.m-top {
    &.is-opened {
      .form-element__textbox {
        @include border-top-radius(0);
      }
    }

    #{$component-identifier}__auto-complete-container {
      @include border-top-radius($border-radius-input);

      bottom: 100%;
      border-bottom: none;

      &:last-child {
        @include border-top-radius($border-radius-input - 1);
      }
    }

    #{$component-identifier}__tags-container,
    #{$component-identifier}__tag {
      margin: 4px 4px 0 0;
    }
  }

  &__loading-indicator {
    position: absolute;
    right: 25px;
    top: 3px;
    animation: spin .4s linear infinite;
    height: 20px;
    width: 20px;
  }

  &__drop-down-indicator {
    position: absolute;
    right: 0;
    top: 0;
    height: 26px;
    width: 31px;
    cursor: pointer;
    padding: 8px;
  }

  &__input-container {
    position: relative;
  }

  &__auto-complete {
    &-container {
      position: absolute;
      width: 100%;
      border: 1px solid $border-color-input;
      z-index: 100;
      background-color: $color-white;
      max-height: 300px;
      overflow-y: auto;
    }

    &-help-text {
      padding: 8px;
      font-style: italic;
    }

    &-option {
      padding: 8px;
      cursor: pointer;

      &.is-active {
        background-color: $color-blue1;
      }
    }
  }

  &__tag {
    .svg-icon__container {
      margin-right: $spacing-extra-tiny;
      height: 10px;
      width: 10px;
    }

    &-delete {
      cursor: pointer;
    }
  }
}

$component-identifier: '';