$vc-button-loaderSpeed: 1.5s;
$vc-button-transition: all .28s ease;

@mixin buttonColorsAction($color) {
  &-color--#{$color} {
    @apply text-#{$color}-actions;
    .vc-button--content {
      @apply text-white;
    }
    &:not(.vc-button--disabled) {
      &:hover, &:focus {
        @apply text-#{$color}-actions--focus;
      }
      &:active {
        @apply text-#{$color}-actions--pressed;
      }
    }
  }
}

.vc-button {
  @apply
  relative
  inline-flex
  items-center
  cursor-pointer
  bg-transparent
  text-center
  outline-none
  rounded-sm
  border
  border-inactive-elements;
  transition: $vc-button-transition;
  height: max-content;

  .vc-button--content {
    @apply flex text-center items-center flex-grow flex-shrink-0 whitespace-nowrap text-white;
    transition:$vc-button-transition;
    line-height: 1;
  }
  .content-icon {
    line-height: 1;
  }

  &-size--large {
    @apply border-2 py-2.5 px-10;
    .vc-button--content {
      @apply font-bold text-base;
    }
    .content-icon {
      @apply text-base mr-2;
    }
  }
  &-size--middle {
    @apply py-2 px-4 border;
    .vc-button--content {
      @apply font-semibold text-sm;
    }
    .content-icon {
      @apply text-base mr-1;
    }
  }
  &-size--small {
    @apply py-1 px-3 border;
    .vc-button--content {
      @apply font-normal text-sm;
    }
    .content-icon {
      @apply text-xs mr-1;
    }
  }

  @include buttonColorsAction(primary);
  @include buttonColorsAction(secondary);
  @include buttonColorsAction(destructive);

  &-type--default {
    @apply bg-current border-current;
    .vc-button--content {
      @apply text-white;
    }
  }
  &-type--outline {
    @apply border-current;
    .vc-button--content {
      @apply text-current;
    }
  }
  &-type--borderless {
    @apply border-transparent bg-transparent;
    .vc-button--content {
      @apply text-current;
    }
  }

  &-type--outline:not(&--disabled), &-type--borderless:not(&--disabled) {
    &.vc-button-color--primary {
      &:hover, &:focus {
        @apply bg-primary-actions-bg--focus;
      }
      &:active {
        @apply bg-primary-actions-bg--pressed;
      }
    }
    &.vc-button-color--destructive {
      &:hover, &:focus {
        @apply bg-destructive-actions-bg--focus;
      }
      &:active {
        @apply bg-destructive-actions-bg--pressed;
      }
    }
    &.vc-button-color--secondary {
      &:hover, &:focus {
        @apply bg-secondary-actions-bg--focus;
      }
      &:active {
        @apply bg-secondary-actions-bg--pressed;
      }
    }
  }

  &--disabled, &:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .vc-button--loader {
    @apply absolute top-0 left-0 w-full h-full flex items-center justify-center overflow-hidden text-base;
    transition: $vc-button-transition;
    i {
      animation: fa-spin $vc-button-loaderSpeed linear infinite
    }
  }

  &-type--default {
    .vc-button--loader {
      @apply text-default-loader;
    }
  }

  &-size--large {
    .vc-button--loader {
      @apply text-lg;
    }
  }
  &-size--small {
    .vc-button--loader {
      @apply text-sm;
    }
  }

  &.is-loading {
    @apply pointer-events-none;
    .vc-button--content {
      @apply opacity-20;
    }
  }
}

[dir='rtl'] {
  .vc-button {
    &-size--large {
      .content-icon {
        @apply mr-0 ml-2;
      }
    }
    &-size--middle {
      .content-icon {
        @apply mr-0 ml-1;
      }
    }
    &-size--small {
      .content-icon {
        @apply mr-0 ml-1;
      }
    }
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}