@layer components {
  .btn,
  .btn-group > .btn {
    @apply tw-rounded-md tw-text-[13.45px] tw-leading-[20px] tw-font-medium;
  }

  .btn-xs,
  .btn-group > .btn-xs,
  .btn-group-xs > .btn {
    @apply tw-text-xs tw-rounded;
  }

  .btn-sm,
  .btn-group > .btn-sm,
  .btn-group-sm > .btn {
    @apply tw-text-[12px] tw-py-1 tw-px-2.5 tw-rounded;
  }

  .btn-lg,
  .btn-group > .btn-lg,
  .btn-group-lg > .btn {
    @apply tw-text-base;
  }

  .btn .caret {
    @apply ltr:!tw-ml-1 rtl:tw-mr-1;
  }

  .btn:focus,
  .btn:active,
  .btn.active,
  .btn:active:focus,
  .btn.active:focus {
    @apply tw-outline-none tw-shadow-none;
  }

  /* secondary */

  .btn-secondary {
    @apply tw-text-neutral-800 tw-bg-neutral-100 tw-border-neutral-300;
  }

  .btn-secondary:focus,
  .btn-secondary.focus {
    @apply tw-ring-2 tw-ring-neutral-700 tw-ring-offset-2 tw-bg-neutral-50 tw-text-neutral-900 tw-border-neutral-300;
  }

  .btn-secondary:hover {
    @apply tw-bg-neutral-50 tw-text-neutral-900 tw-border-neutral-300;
  }

  .btn-secondary:active,
  .btn-secondary.active,
  .open > .dropdown-toggle.btn-secondary {
    @apply tw-ring-2 tw-ring-neutral-700 tw-ring-offset-2 tw-bg-neutral-50 tw-text-neutral-900 tw-border-neutral-300 tw-bg-none;
  }

  .btn-secondary:active:hover,
  .btn-secondary.active:hover,
  .open > .dropdown-toggle.btn-secondary:hover,
  .btn-secondary:active:focus,
  .btn-secondary.active:focus,
  .open > .dropdown-toggle.btn-secondary:focus,
  .btn-secondary:active.focus,
  .btn-secondary.active.focus,
  .open > .dropdown-toggle.btn-secondary.focus {
    @apply tw-ring-2 tw-ring-neutral-700 tw-ring-offset-2 tw-bg-neutral-50 tw-text-neutral-900 tw-border-neutral-300;
  }

  .btn-secondary.disabled:hover,
  .btn-secondary[disabled]:hover,
  fieldset[disabled] .btn-secondary:hover,
  .btn-secondary.disabled:focus,
  .btn-secondary[disabled]:focus,
  fieldset[disabled] .btn-secondary:focus,
  .btn-secondary.disabled.focus,
  .btn-secondary[disabled].focus,
  fieldset[disabled] .btn-secondary.focus {
    @apply tw-bg-white tw-border-neutral-100;
  }

  .btn-secondary .badge {
    @apply tw-bg-neutral-700 tw-text-neutral-100;
  }

  /* default */

  .btn-default {
    @apply tw-text-neutral-700 tw-bg-white tw-border-neutral-300;
  }

  .btn-default:focus,
  .btn-default.focus {
    @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2 tw-bg-neutral-50 tw-text-neutral-800 tw-border-neutral-300;
  }

  .btn-default:hover {
    @apply tw-bg-neutral-50 tw-text-neutral-800 tw-border-neutral-300;
  }

  .btn-default:active,
  .btn-default.active,
  .open > .dropdown-toggle.btn-default {
    @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2 tw-bg-neutral-50 tw-text-neutral-800 tw-border-neutral-300 tw-bg-none;
  }

  .btn-default:active:hover,
  .btn-default.active:hover,
  .open > .dropdown-toggle.btn-default:hover,
  .btn-default:active:focus,
  .btn-default.active:focus,
  .open > .dropdown-toggle.btn-default:focus,
  .btn-default:active.focus,
  .btn-default.active.focus,
  .open > .dropdown-toggle.btn-default.focus {
    @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2 tw-bg-neutral-50 tw-text-neutral-800 tw-border-neutral-300;
  }

  .btn-default.disabled:hover,
  .btn-default[disabled]:hover,
  fieldset[disabled] .btn-default:hover,
  .btn-default.disabled:focus,
  .btn-default[disabled]:focus,
  fieldset[disabled] .btn-default:focus,
  .btn-default.disabled.focus,
  .btn-default[disabled].focus,
  fieldset[disabled] .btn-default.focus {
    @apply tw-bg-white tw-border-neutral-100;
  }

  .btn-default .badge {
    @apply tw-bg-neutral-200 tw-text-neutral-600;
  }

  /* info */

  .btn-info {
    @apply tw-text-white tw-bg-info-600 tw-border-info-600;
  }

  .btn-info:focus,
  .btn-info.focus {
    @apply tw-ring-2 tw-ring-info-500 tw-ring-offset-2 tw-bg-info-700 tw-text-white tw-border-info-600;
  }

  .btn-info:hover {
    @apply tw-bg-info-700 tw-text-white tw-border-info-600;
  }

  .btn-info:active,
  .btn-info.active,
  .open > .dropdown-toggle.btn-info {
    @apply tw-ring-2 tw-ring-info-500 tw-ring-offset-2 tw-bg-info-700 tw-text-white tw-border-info-600 tw-bg-none;
  }

  .btn-info:active:hover,
  .btn-info.active:hover,
  .open > .dropdown-toggle.btn-info:hover,
  .btn-info:active:focus,
  .btn-info.active:focus,
  .open > .dropdown-toggle.btn-info:focus,
  .btn-info:active.focus,
  .btn-info.active.focus,
  .open > .dropdown-toggle.btn-info.focus {
    @apply tw-ring-2 tw-ring-info-500 tw-ring-offset-2 tw-bg-info-700 tw-text-white tw-border-info-600;
  }

  .btn-info.disabled:hover,
  .btn-info[disabled]:hover,
  fieldset[disabled] .btn-info:hover,
  .btn-info.disabled:focus,
  .btn-info[disabled]:focus,
  fieldset[disabled] .btn-info:focus,
  .btn-info.disabled.focus,
  .btn-info[disabled].focus,
  fieldset[disabled] .btn-info.focus {
    @apply tw-bg-info-600 tw-border-info-600;
  }

  .btn-info .badge {
    @apply tw-bg-white tw-text-info-700;
  }

  /* primary */

  .btn-primary {
    @apply tw-text-white tw-bg-primary-600 tw-border-primary-600;
  }

  .btn-primary:focus,
  .btn-primary.focus {
    @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2 tw-bg-primary-700 tw-text-white tw-border-primary-600;
  }

  .btn-primary:hover {
    @apply tw-bg-primary-700 tw-text-white tw-border-primary-600;
  }

  .btn-primary:active,
  .btn-primary.active,
  .open > .dropdown-toggle.btn-primary {
    @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2 tw-bg-primary-700 tw-text-white tw-border-primary-600 tw-bg-none;
  }

  .btn-primary:active:hover,
  .btn-primary.active:hover,
  .open > .dropdown-toggle.btn-primary:hover,
  .btn-primary:active:focus,
  .btn-primary.active:focus,
  .open > .dropdown-toggle.btn-primary:focus,
  .btn-primary:active.focus,
  .btn-primary.active.focus,
  .open > .dropdown-toggle.btn-primary.focus {
    @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2 tw-bg-primary-700 tw-text-white tw-border-primary-600;
  }

  .btn-primary.disabled:hover,
  .btn-primary[disabled]:hover,
  fieldset[disabled] .btn-primary:hover,
  .btn-primary.disabled:focus,
  .btn-primary[disabled]:focus,
  fieldset[disabled] .btn-primary:focus,
  .btn-primary.disabled.focus,
  .btn-primary[disabled].focus,
  fieldset[disabled] .btn-primary.focus {
    @apply tw-bg-primary-600 tw-border-primary-600;
  }

  .btn-primary .badge {
    @apply tw-bg-white tw-text-primary-700;
  }

  .btn-primary .caret {
    @apply tw-border-white;
  }

  /* success */

  .btn-success {
    @apply tw-text-white tw-bg-success-500 tw-border-success-500;
  }

  .btn-success:focus,
  .btn-success.focus {
    @apply tw-ring-2 tw-ring-success-400 tw-ring-offset-2 tw-bg-success-600 tw-text-white tw-border-success-500;
  }

  .btn-success:hover {
    @apply tw-bg-success-600 tw-text-white tw-border-success-500;
  }

  .btn-success:active,
  .btn-success.active,
  .open > .dropdown-toggle.btn-success {
    @apply tw-ring-2 tw-ring-success-400 tw-ring-offset-2 tw-bg-success-600 tw-text-white tw-border-success-500 tw-bg-none;
  }

  .btn-success:active:hover,
  .btn-success.active:hover,
  .open > .dropdown-toggle.btn-success:hover,
  .btn-success:active:focus,
  .btn-success.active:focus,
  .open > .dropdown-toggle.btn-success:focus,
  .btn-success:active.focus,
  .btn-success.active.focus,
  .open > .dropdown-toggle.btn-success.focus {
    @apply tw-ring-2 tw-ring-success-400 tw-ring-offset-2 tw-bg-success-600 tw-text-white tw-border-success-500;
  }

  .btn-success.disabled:hover,
  .btn-success[disabled]:hover,
  fieldset[disabled] .btn-success:hover,
  .btn-success.disabled:focus,
  .btn-success[disabled]:focus,
  fieldset[disabled] .btn-success:focus,
  .btn-success.disabled.focus,
  .btn-success[disabled].focus,
  fieldset[disabled] .btn-success.focus {
    @apply tw-bg-success-500 tw-border-success-500;
  }

  .btn-success .badge {
    @apply tw-bg-white tw-text-success-600;
  }

  .btn-success .caret {
    @apply tw-border-white;
  }

  /* warning */

  .btn-warning {
    @apply tw-text-white tw-bg-warning-600 tw-border-warning-600;
  }

  .btn-warning:focus,
  .btn-warning.focus {
    @apply tw-ring-2 tw-ring-warning-500 tw-ring-offset-2 tw-bg-warning-700 tw-text-white tw-border-warning-600;
  }

  .btn-warning:hover {
    @apply tw-bg-warning-700 tw-text-white tw-border-warning-600;
  }

  .btn-warning:active,
  .btn-warning.active,
  .open > .dropdown-toggle.btn-warning {
    @apply tw-ring-2 tw-ring-warning-500 tw-ring-offset-2 tw-bg-warning-700 tw-text-white tw-border-warning-600 tw-bg-none;
  }

  .btn-warning:active:hover,
  .btn-warning.active:hover,
  .open > .dropdown-toggle.btn-warning:hover,
  .btn-warning:active:focus,
  .btn-warning.active:focus,
  .open > .dropdown-toggle.btn-warning:focus,
  .btn-warning:active.focus,
  .btn-warning.active.focus,
  .open > .dropdown-toggle.btn-warning.focus {
    @apply tw-ring-2 tw-ring-warning-500 tw-ring-offset-2 tw-bg-warning-700 tw-text-white tw-border-warning-600;
  }

  .btn-warning.disabled:hover,
  .btn-warning[disabled]:hover,
  fieldset[disabled] .btn-warning:hover,
  .btn-warning.disabled:focus,
  .btn-warning[disabled]:focus,
  fieldset[disabled] .btn-warning:focus,
  .btn-warning.disabled.focus,
  .btn-warning[disabled].focus,
  fieldset[disabled] .btn-warning.focus {
    @apply tw-bg-warning-600 tw-border-warning-600;
  }

  .btn-warning .badge {
    @apply tw-bg-white tw-text-warning-700;
  }

  .btn-warning .caret {
    @apply tw-border-white;
  }

  /* danger */

  .btn-danger {
    @apply tw-text-white tw-bg-danger-600 tw-border-danger-600;
  }

  .btn-danger:focus,
  .btn-danger.focus {
    @apply tw-ring-2 tw-ring-danger-500 tw-ring-offset-2 tw-bg-danger-700 tw-text-white tw-border-danger-600;
  }

  .btn-danger:hover {
    @apply tw-bg-danger-700 tw-text-white tw-border-danger-600;
  }

  .btn-danger:active,
  .btn-danger.active,
  .open > .dropdown-toggle.btn-danger {
    @apply tw-ring-2 tw-ring-danger-500 tw-ring-offset-2 tw-bg-danger-700 tw-text-white tw-border-danger-600 tw-bg-none;
  }

  .btn-danger:active:hover,
  .btn-danger.active:hover,
  .open > .dropdown-toggle.btn-danger:hover,
  .btn-danger:active:focus,
  .btn-danger.active:focus,
  .open > .dropdown-toggle.btn-danger:focus,
  .btn-danger:active.focus,
  .btn-danger.active.focus,
  .open > .dropdown-toggle.btn-danger.focus {
    @apply tw-ring-2 tw-ring-danger-500 tw-ring-offset-2 tw-bg-danger-700 tw-text-white tw-border-danger-600;
  }

  .btn-danger.disabled:hover,
  .btn-danger[disabled]:hover,
  fieldset[disabled] .btn-danger:hover,
  .btn-danger.disabled:focus,
  .btn-danger[disabled]:focus,
  fieldset[disabled] .btn-danger:focus,
  .btn-danger.disabled.focus,
  .btn-danger[disabled].focus,
  fieldset[disabled] .btn-danger.focus {
    @apply tw-bg-danger-600 tw-border-danger-600;
  }

  .btn-danger .badge {
    @apply tw-bg-white tw-text-danger-700;
  }

  .btn-danger .caret {
    @apply tw-border-white;
  }
}