// Imports
@import './_variables.scss';

.nv-btn {
  @apply inline-flex items-center border box-border bg-clip-padding text-sm text-white transition-all align-middle whitespace-nowrap;
  &:not([class*=" rounded-"]):not([class^="rounded-"]) {
    @apply rounded-lg;
  }
  span {
    font-weight: $btn-font-weight;
  }

  &--default:not([disabled]) {
    @apply bg-white border-gray-300 text-black
    hover:bg-gray-200 hover:border-gray-200
    focus:outline-gray-200 focus:border-gray-500
    active:bg-primary-darken active:border-primary-darken active:text-white active:outline-0;
  }

  &--primary:not([disabled]) {
    @apply bg-primary-lighten/80 border-primary-lighten/80
    hover:bg-primary hover:border-primary
    focus:bg-primary focus:border-primary focus:outline focus:outline-4 focus:outline-gray-300
    active:bg-primary active:border-primary-darken active:outline-0;

    &.nv-btn--outlined {
      @apply bg-transparent border-primary-lighten text-primary-lighten
      hover:border-primary hover:text-primary
      focus:bg-transparent focus:text-primary-darken focus:border-primary-lighten focus:outline-blue-50
      active:border-primary-darken active:text-primary-darken active:bg-primary-darken/10 active:outline-0;
    }
  }

  &--dark:not([disabled]) {
    @apply bg-black/80 border-black/80
    hover:bg-black hover:border-black
    focus:bg-primary-darken focus:border-primary-darken focus:outline focus:outline-4 focus:outline-gray-300
    active:bg-black active:border-black active:outline-0;
    &.nv-btn--outlined {
      @apply bg-transparent border-black/60 text-black/60
      hover:border-black hover:text-black
      focus:bg-transparent focus:text-black focus:border-gray-500 focus:outline-gray-300
      active:border-black active:text-black active:bg-black/10 active:outline-0;
    }
  }

  &--icon {
    @apply p-0;
    &-left {
      @apply pl-1.5;
    }

    &-right {
      @apply pr-1.5;
    }
  }

  &--outlined {
    @apply bg-transparent;
  }

  &[disabled] {
    @apply cursor-not-allowed opacity-25 border-black;
    &:not(.nv-btn--outlined) {
      @apply bg-black;
    }

    &.nv-btn--outlined {
      @apply text-black;
    }
  }

  &:focus {
    @apply outline outline-2
  }

  @each $name, $size in $btn-sizes {
    &.nv-size--#{$name} {
      height: #{$size};
      font-size: map-deep-get($btn-font-sizes, $name);
      &:not(.nv-btn--icon) {
        padding-left: map-deep-get($btn-paddings-x, $name);
        padding-right: map-deep-get($btn-paddings-x, $name);
      }
      &.nv-btn--icon {
        @apply justify-center;
        width: #{$size};
      }

      .nv-icon {
        font-size: map-deep-get($btn-icon-sizes, $name);
        width: map-deep-get($btn-icon-sizes, $name);
        height: map-deep-get($btn-icon-sizes, $name);

        svg {
          width: map-deep-get($btn-icon-sizes, $name);
          height: map-deep-get($btn-icon-sizes, $name);
        }
      }
    }
  }


  @each $name, $size in $btn-icon-padding-x-out {
    &.nv-btn--icon-left {
      &.nv-size--#{$name} {
        padding-left: #{$size};
      }
    }
    &.nv-btn--icon-right {
      &.nv-size--#{$name} {
        padding-right: #{$size};
      }
    }
  }

  &.nv-btn--icon-left {
    span:not(.nv-icon) {
      margin-left: $btn-icon-text-margin-between;
    }
  }

  &.nv-btn--icon-right {
    span:not(.nv-icon) {
      margin-right: $btn-icon-text-margin-between;
    }
  }
}