@layer components {
  .sci-btn-group {
    @apply inline-flex items-center gap-2 relative;
  }

  .btn {
    @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-[22px] py-2 px-4 rounded border border-solid appearance-none whitespace-nowrap cursor-pointer max-h-[40px];
    border-color: transparent;
  }

  .btn.icon-btn {
    @apply px-2 ;
  }

  .btn.btn-lg {
    @apply py-2.5 px-[1.125rem] text-base leading-5 h-[44px];
  }

  .btn.btn-lg.icon-btn {
    @apply px-2.5;
  }

  .btn.btn-sm {
    @apply py-1.5 px-2.5 text-xs leading-5 h-[36px];
  }

  .btn.btn-sm.icon-btn {
    @apply px-1.5;
  }

  .btn.btn-xs {
    @apply py-0.5 px-2.5 text-xs leading-5 h-[30px];
  }

  .btn.btn-xs.icon-btn {
    @apply px-0.5;
  }

  .btn:hover {
    @apply no-underline;
  }

  .btn:focus {
    @apply no-underline outline-none text-sn-white;
    box-shadow: 0px 0px 0px 4px var(--sn-science-blue-hover);
  }

  .btn:active {
    box-shadow: none;
  }

  .btn:disabled,
  .btn.disabled {
    @apply cursor-not-allowed pointer-events-none;
  }

  .btn.btn-primary,
  .btn.btn-success {
    @apply bg-sn-blue text-sn-white;
  }

  .btn.btn-primary:hover,
  .btn.btn-success:hover{
    @apply bg-sn-blue-hover text-sn-white;
  }

  .btn.btn-primary:disabled,
  .btn.btn-primary.disabled,
  .btn.btn-success:disabled,
  .btn.btn-success.disabled {
    @apply bg-sn-light-grey text-sn-sleepy-grey border-sn-light-grey;
  }

  .btn.btn-secondary,
  .btn.btn-default {
    @apply bg-sn-white text-sn-blue border-sn-light-grey;
  }

  .btn.btn-shared {
    @apply bg-sn-science-blue text-sn-white border-sn-white;
  }

  .btn.btn-secondary:hover,
  .btn.btn-default:hover {
    @apply  border-sn-blue-hover;
  }

  .btn.btn-shared:hover {
    @apply border-sn-light-grey;
  }

  .btn.btn-secondary:disabled,
  .btn.btn-secondary.disabled,
  .btn.btn-default:disabled,
  .btn.btn-default.disabled {
    @apply bg-sn-white text-sn-sleepy-grey;
  }

  .btn.btn-shared:disabled,
  .btn.btn-shared.disabled {
    @apply bg-sn-white text-sn-sleepy-grey border-sn-light-grey;
  }

  .btn.btn-light {
    @apply bg-transparent text-sn-blue border-transparent;
  }

  .btn.btn-light.btn-black {
    @apply text-sn-black;
  }

  .btn.btn-light.btn-white {
    @apply text-sn-white;
  }

  .btn.btn-light.btn-white:hover {
    @apply bg-transparent;
  }

  .btn.btn-light:hover {
    @apply bg-sn-super-light-grey;
  }

  .btn.btn-light:disabled,
  .btn.btn-light.disabled {
    @apply text-sn-sleepy-grey;
  }

  .btn.btn-danger {
    @apply bg-sn-delete-red text-sn-white;
  }

  .btn.btn-danger:hover {
    @apply bg-sn-delete-red-hover;
  }

  .btn.btn-danger:disabled,
  .btn.btn-danger.disabled {
    @apply bg-sn-delete-red-disabled;
  }
}