.btn {
  @apply rounded-lg font-medium inline-flex items-center justify-center h-auto box-border;
  transition: all 0.2s;

  // Button Sizes
  &--xs {
    padding-top: 3px;
    padding-bottom: 3px;
    @apply px-2 text-2xs;
  }

  &--sm {
    @apply px-3 py-1.5 text-xs;
  }

  &--md {
    @apply px-3 h-10 text-sm;
  }

  &--lg {
    @apply px-4 py-3 text-base leading-6;
  }

  // Icon buttons
  &--icon--sm {
    @apply p-1.5 text-xs;
  }

  // Default buttons' variations
  &--primary {
    background: linear-gradient(180deg, #1e9ffd 0%, #0094ff 100%);
    @apply text-white border-none shadow;

    &:hover,
    &:hover:is(a):not(.disabled) {
      background: linear-gradient(180deg, #45b1ff 0%, #1e9ffd 100%);
      @apply cursor-pointer text-white;
    }
    &:focus {
      background: linear-gradient(180deg, #1e9ffd 0%, #0094ff 100%);
      @apply outline outline-1 outline-primary-500 outline-offset-2 text-white;
    }
    &:active {
      background: linear-gradient(180deg, #45b1ff 0%, #1e9ffd 100%);
      @apply text-white;
    }
    &[disabled],
    &.disabled {
      @apply cursor-not-allowed bg-primary-200 text-white;
    }
  }

  &--secondary {
    background: linear-gradient(180deg, #fff 0%, #e6e6e6 100%);
    border: 1px solid #e6e6e6;
    @apply text-primary-500;

    &:hover {
      border: 1px solid #e6e6e6;
      @apply cursor-pointer bg-gray-100 text-primary-500 border-solid;
    }
    &:focus {
      border: 1px solid #e6e6e6;
      background: linear-gradient(180deg, #fff 0%, #e6e6e6 100%);
      @apply text-primary-500  border-solid outline outline-offset-2 outline-1 outline-gray-300;
    }
    &:active {
      border: 1px solid #e6e6e6;
      @apply bg-gray-200 text-primary-500 border-solid;
    }
    &[disabled],
    &:disabled {
      background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
      @apply cursor-not-allowed text-gray-400 border border-gray-100 border-solid;
    }

    &.btn {
      &--lg {
        @apply py-2.5;
      }
    }
  }

  // Link buttons
  &-link {
    @apply bg-transparent border-0 p-0 rounded-none shadow-none;

    // Size
    &--sm {
      @apply text-2xs;
    }
    &--md {
      @apply text-sm h-10;
    }
    &--lg {
      @apply text-base;
    }

    // Link buttons' variations
    &--primary {
      @apply text-primary-500;

      &:hover,
      &:active,
      &:focus {
        @apply cursor-pointer text-primary-500 bg-transparent underline;
      }
      &[disabled] {
        @apply cursor-not-allowed text-primary-300 bg-transparent;
      }
    }

    &--secondary {
      @apply text-gray-900;

      &:hover,
      &:active,
      &:focus {
        @apply cursor-pointer text-primary-500 bg-transparent;
      }
      &[disabled] {
        @apply cursor-not-allowed text-gray-400 bg-transparent;
      }
    }

    &--linux {
      @apply text-gray-300;

      &:hover,
      &:active,
      &:focus {
        @apply cursor-pointer text-primary-500 bg-transparent;
      }
      &[disabled] {
        @apply cursor-not-allowed text-gray-200 bg-transparent;
      }
    }
  }

  &--link {
    @apply bg-transparent border-0 p-0 rounded-none text-primary-500 shadow-none;
    &:hover,
    &:active,
    &:focus {
      @apply bg-transparent text-primary-500 opacity-80;
    }
    &.btn--interactive {
      @apply p-4 rounded-lg;
      &:hover,
      &:active,
      &:focus {
        @apply bg-primary-50;
      }
    }
  }

  &--text {
    @apply bg-transparent border-0 shadow-none text-gray-900;
    &:hover,
    &:focus {
      @apply text-primary-500 bg-transparent;
    }
  }

  &--full {
    @apply w-full;
  }

  &--circle {
    @apply rounded-full h-9 w-9;
  }

  &[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }

  i:first-child:not(:only-child) {
    @apply mr-2;
  }

}

.btn-group {
  @apply flex items-center flex-nowrap;
}

.btn-group > .btn:not(:last-child) {
  @apply -mr-0.5;
}
