@import '../../assets/sass/main/mixins';
.vc-selectbox {
  @include input;
  padding-right: var(--selectbox-padding);

  &-input__container{
    @apply h-8 relative rounded w-full;
    .vc-selectbox::placeholder {
      color: var(--placeholder-color);
    }
    .vc-input-suffix {
      @apply absolute flex h-full items-center top-0 right-1 w-6 justify-center pointer-events-none;
      &-content {
        @apply absolute flex h-full items-center top-0 right-8 pointer-events-none;
      }
      .vc-icon-close {
        pointer-events: all;
      }
      .icon {
        @apply text-active-elements;
        transform: rotate(0deg);
        transition: transform 0.2s linear;
      }
      .rotate {
        transform: rotate(180deg);
        transition: transform 0.2s linear;
      }
    }
  }

  &--error {
    .vc-selectbox {
      @apply border-error;
    }
  }
}
[dir="rtl"] {
  .vc-selectbox {
    @apply pr-3;
    padding-left: var(--selectbox-padding);
  }
  .vc-selectbox--prefix-icon .vc-selectbox {
    @apply pr-6;
    padding-left: var(--selectbox-padding);
  }
  .vc-selectbox-input__container {
    .vc-input-suffix-content {
      @apply left-8 right-unset whitespace-nowrap truncate;
    }
    .vc-input-suffix {
      @apply left-1 right-unset;
    }
  }
}
