// The mixin used to style tooltip. Make sure that element to which mixin is applied have '&--arrow' element inside
@mixin tooltip {
  @apply absolute border border-field-borders rounded bg-sub-bg z-1;

  .reference {
    @apply flex items-center justify-center;
  }

  .vc-arrow {
    text-align: initial;
    @apply absolute w-4 h-4;

    &:before {
      content: '';
      @apply bg-sub-bg border-t border-l border-field-borders transform w-4 h-4 absolute;
    }
  }

  // top
  &--top-left, &--top-center, &--top-right {
    @apply mt-3;
  }
  &--top-left .vc-arrow, &--top-center .vc-arrow, &--top-right .vc-arrow {
    top: calc(theme('spacing.2') * -1 - 1px);

    &:before {
      @apply rotate-45;
    }
  }
  // bottom
  &--bottom-left, &--bottom-right {
    @apply mb-3;
  }
  &--bottom-left .vc-arrow, &--bottom-center .vc-arrow, &--bottom-right .vc-arrow {
    bottom: calc(theme('spacing.2') * -1 - 1px);

    &:before {
      @apply rotate-225;
    }
  }

  // top/bottom
  &--top-left .vc-arrow, &--bottom-left .vc-arrow {
    @apply left-8;
  }
  &--top-center .vc-arrow, &--bottom-center .vc-arrow {
    @apply transform -translate-x-1/2 inset-x-1/2;
  }
  &--top-right .vc-arrow, &--bottom-right .vc-arrow {
    @apply right-8;
  }

  // left
  &--left-top, &--left-center, &--left-bottom {
    @apply ml-3;
  }
  &--left-top .vc-arrow, &--left-center .vc-arrow, &--left-bottom .vc-arrow {
    left: calc(theme('spacing.2') * -1 - 1px);

    &:before {
      @apply -rotate-45;
    }
  }
  // right
  &--right-top, &--right-center, &--right-bottom {
    @apply mr-3;
  }
  &--right-top .vc-arrow, &--right-center .vc-arrow, &--right-bottom .vc-arrow {
    right: calc(theme('spacing.2') * -1 - 1px);

    &:before {
      @apply rotate-135;
    }
  }

  // left/right
  &--left-top .vc-arrow, &--right-top .vc-arrow {
    @apply top-8;
  }
  &--left-center .vc-arrow, &--right-center .vc-arrow {
    @apply transform -translate-y-1/2 inset-y-1/2;
  }
  &--left-bottom .vc-arrow, &--right-bottom .vc-arrow {
    @apply bottom-8;
  }

  // (top/bottom) left
  [dir='rtl'] &--top-left .vc-arrow, [dir='rtl'] &--bottom-left .vc-arrow {
    @apply left-auto right-8;
  }
  // (top/bottom) center
  [dir='rtl'] &--top-center .vc-arrow, [dir='rtl'] &--bottom-center .vc-arrow {
    @apply translate-x-1/2;
  }
  // (top/bottom) right
  [dir='rtl'] &--top-right .vc-arrow, [dir='rtl'] &--bottom-right .vc-arrow {
    @apply right-auto left-8;
  }

  // left
  [dir='rtl'] &--left-top, [dir='rtl'] &--left-center, [dir='rtl'] &--left-bottom {
    @apply ml-0 mr-3;
  }
  [dir='rtl'] &--left-top .vc-arrow, [dir='rtl'] &--left-center .vc-arrow, [dir='rtl'] &--left-bottom .vc-arrow {
    right: calc(theme('spacing.2') * -1 - 1px);
    @apply left-auto;

    &:before {
      @apply rotate-135;
    }
  }

  // right
  [dir='rtl'] &--right-top, [dir='rtl'] &--right-center, [dir='rtl'] &--right-bottom {
    @apply mr-0 ml-3;
  }
  [dir='rtl'] &--right-top .vc-arrow, [dir='rtl'] &--right-center .vc-arrow, [dir='rtl'] &--right-bottom .vc-arrow {
    left: calc(theme('spacing.2') * -1 - 1px);
    @apply right-auto;

    &:before {
      @apply -rotate-45;
    }
  }
}

@mixin inputWithNumber {
  .vc-btn__decrease {
    @apply rounded-l top-px left-px;
  }
  .vc-btn__increase {
    @apply rounded-r top-px right-px;
  }
  .vc-btn__increase,
  .vc-btn__decrease {
    @apply bg-secondary-actions-bg--focus w-8 flex items-center justify-center select-none z-1;
    height: calc(100% - 2px);

    &:hover {
      @apply cursor-pointer;
    }
    :deep.icon {
      @apply text-default-text;
    }
    &.disabled {
      &:hover {
        @apply cursor-not-allowed;
      }
      .icon {
        @apply text-black opacity-50;
      }
    }
  }

  @include label;
  @include errorContainer;
}

@mixin input {
  @apply text-sm rounded border border-field-borders outline-none h-8 px-3 w-full bg-sub-bg;
  &--clearable & {
    @apply pr-6;
  }
  [dir='rtl'] &--clearable & {
    @apply pr-3 pl-6;
  }
  &:hover:not(:disabled) {
    @apply shadow-focus-outer;
  }
  &.vc-input-color--active {
    &:hover:not(:disabled) {
      @apply shadow-focus-outer;
    }
  }
  &.vc-input-color--primary {
    &:hover:not(:disabled) {
      @apply shadow-focus-outer-primary;
    }
  }
  &.vc-input-color--secondary {
    &:hover:not(:disabled) {
      @apply shadow-focus-outer-secondary;
    }
  }
  &.vc-input-color--destructive {
    &:hover:not(:disabled) {
      @apply shadow-focus-outer-destructive;
    }
  }
  &--prefix-icon {
    .vc-input-icon-color--active {
      @apply text-active-elements;
    }
    .vc-input-icon-color--primary {
      @apply text-primary-actions;
    }
    .vc-input-icon-color--secondary {
      @apply text-secondary-actions;
    }
    .vc-input-icon-color--destructive {
      @apply text-destructive-actions;
    }
  }
  &--prefix-icon & {
    @apply pl-6;
  }
  [dir='rtl'] &--prefix-icon & {
    @apply pl-3 pr-6;
  }
  &:focus:not(:disabled):not(.vc-input--error) {
    @apply border-primary-actions--focus;
  }
  &.vc-input-color--active {
    &:focus:not(:disabled):not(.vc-input--error) {
      @apply border-active-elements--focus;
    }
  }
  &.vc-input-color--primary {
    &:focus:not(:disabled):not(.vc-input--error) {
      @apply border-primary-actions--focus;
    }
  }
  &.vc-input-color--secondary {
    &:focus:not(:disabled):not(.vc-input--error) {
      @apply border-secondary-actions--focus;
    }
  }
  &.vc-input-color--destructive {
    &:focus:not(:disabled):not(.vc-input--error) {
      @apply border-destructive-actions--focus;
    }
  }
  &.disabled {
    @apply bg-default-bg;
    &:hover {
      @apply cursor-not-allowed shadow-none;
    }
  }
  &--error {
    @apply border-error;
  }
  &-wrapper {
    @apply flex px-4 flex-1 justify-center;

    &.disabled {
      @apply cursor-not-allowed opacity-50 text-secondary-actions--focus;
    }
  }
  &__container {
    @apply relative;
  }
  &__clearable {
    & i {
      @apply cursor-pointer;
    }
  }
  &__clearable,
  [dir='ltr'] &__clearable {
    @apply absolute h-8 flex justify-center items-center top-0 right-2 left-auto w-2.5;
  }
  [dir='rtl'] &__clearable {
    @apply absolute h-8 flex justify-center items-center top-0 left-2 right-auto w-2.5;
  }
  &__clearable i:hover {
    @apply text-icons;
  }
  &__prefix-icon,
  [dir='ltr'] &__prefix-icon {
    @apply absolute h-8 flex justify-center items-center top-0 left-2 w-2.5;
  }
  [dir='rtl'] &__prefix-icon {
    @apply absolute h-8 flex justify-center items-center top-0 right-2 w-2.5;
  }

  @include label;
  @include errorContainer;
  @include fileUploader;
}

@mixin label {
  &__label {
    &-wrapper {
      @apply flex text-sm text-default-text font-normal;
      &--left-item {
        @apply inline-flex;
        &-icon {
          @apply mr-2 leading-none;
          [dir=rtl] & {
            @apply mr-0 ml-2;
          }
        }
      }
      &-label {
        @apply text-sm text-default-text font-normal;
        &__required-icon {
          @apply text-primary-actions;
        }
      }
    }
    .vc-input__label-info {
      @apply text-active-elements cursor-pointer;
    }
  }
}

@mixin errorContainer {
  &__error-wrapper {
    @apply relative w-full text-xs leading-normal;
    &--text {
      @apply inline-flex flex-wrap text-destructive-actions text-xs left-0 top-0 w-full overflow-hidden overflow-ellipsis whitespace-normal;
    }
  }
}

@mixin labelCustomInput {
  &__label-wrap {
    @apply flex;
  }
  &__label {
    @apply mb-2 flex items-center text-sm text-default-text font-normal;
    &-icon-wrap {
      @apply inline-flex;
    }
    &-icon {
      @apply mr-2 flex-shrink-0;
      [dir=rtl] & {
        @apply mr-0 ml-2;
      }
    }
    &-text {
      @apply text-sm text-default-text font-normal;
    }
    &-required-icon {
      @apply text-primary-actions;
    }
  }
  .vc-input__label-info {
    @apply text-active-elements cursor-pointer;
  }
}

@mixin fileUploader {
  &__file-uploader {
    &-wrapper {
      &-input {
        display: none;
      }
      &-label {
        padding-bottom: 0.5rem;
      }
    }
  }
  &__message-wrapper {
    @apply relative w-full text-xs leading-normal;
    &--text {
      @apply inline-flex flex-wrap text-secondary-actions text-xs left-0 top-0 w-full overflow-hidden overflow-ellipsis whitespace-nowrap;
    }
  }
}
