@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-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer max-h-[40px];
  }

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

  .btn.btn-lg {
    @apply py-2.5 px-[1.125rem] text-base leading-5 max-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 max-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 max-h-[30px];
  }

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

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

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

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

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

  .btn.btn-primary,
  .btn.btn-success {
    background-color: var(--sn-blue);
    color: var(--sn-white);
  }

  .btn.btn-primary:hover,
  .btn.btn-success:hover{
    background-color: var(--sn-blue-hover);
    color: var(--sn-white);
  }

  .btn.btn-primary:disabled,
  .btn.btn-primary.disabled,
  .btn.btn-success:disabled,
  .btn.btn-success.disabled {
    background-color: var(--sn-light-grey);
    border: 1px solid var(--sn-light-grey);
    color: var(--sn-sleepy-grey);
  }

  .btn.btn-secondary,
  .btn.btn-default {
    background-color: var(--sn-white);
    border: 1px solid var(--sn-light-grey);
    color: var(--sn-blue);
  }

  .btn.btn-secondary:hover,
  .btn.btn-default:hover {
    border: 1px solid var(--sn-blue-hover);
  }

  .btn.btn-secondary:disabled,
  .btn.btn-secondary.disabled,
  .btn.btn-default:disabled,
  .btn.btn-default.disabled {
    background-color: var(--sn-white);
    color: var(--sn-sleepy-grey);
  }

  .btn.btn-light {
    background-color: transparent;
    color: var(--sn-blue);
  }

  .btn.btn-light.btn-black {
    color: var(--sn-black);
  }

  .btn.btn-light.btn-white {
    color: var(--sn-white);
  }

  .btn.btn-light.btn-white:hover {
    background-color: transparent;
  }

  .btn.btn-light:hover {
    background-color: var(--sn-super-light-grey);
  }

  .btn.btn-light:disabled,
  .btn.btn-light.disabled {
    color: var(--sn-sleepy-grey);
  }

  .btn.btn-danger {
    background-color: var(--sn-delete-red);
    color: var(--sn-white);
  }

  .btn.btn-danger:hover {
    background-color: var(--sn-delete-red-hover);
  }

  .btn.btn-danger:disabled,
  .btn.btn-danger.disabled {
    background-color: var(--sn-delete-red-disabled);
  }
}