@layer components {
  .btn {
    $btn: &;
    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-primary px-4  py-2 text-sm transition-colors duration-150 ease-in-out focus:outline-none disabled:cursor-not-allowed disabled:opacity-60;

    //Sizes
    &-xs {
      @apply px-2 py-1 text-xs;
    }

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

    &-md {
      @apply px-4 py-2 text-sm;
    }

    &-lg {
      @apply px-5 py-2.5 text-base;
    }

    &-xl {
      @apply px-6 py-3 text-base;
    }

    //Groups
    &-group {
      @apply inline-flex rounded-primary;

      & > #{$btn} {
        @apply rounded-none;

        &:first-child {
          @apply rounded-l-primary;
        }

        &:last-child {
          @apply rounded-r-primary border-l-0;
        }

        &:not(:first-child):not(:last-child) {
          @apply border-l-0;
        }
      }

      &.rounded {
        #{$btn}:first-child {
          @apply rounded-l-full;
        }

        #{$btn}:last-child {
          @apply rounded-r-full;
        }
      }
    }

    &-primary {
      @apply bg-primary-500 text-white hover:bg-primary-600 focus:ring focus:ring-primary-500 focus:ring-opacity-50 disabled:bg-primary-500;
    }

    &-secondary {
      @apply bg-secondary-500 text-white hover:bg-secondary-600 focus:ring focus:ring-secondary-500 focus:ring-opacity-50 disabled:bg-secondary-500;
    }

    &-success {
      @apply bg-success-500 text-white hover:bg-success-600 focus:ring focus:ring-success-500 focus:ring-opacity-50 disabled:bg-success-500;
    }

    &-warning {
      @apply bg-warning-500 text-white hover:bg-warning-600 focus:ring focus:ring-warning-500 focus:ring-opacity-50 disabled:bg-warning-500;
    }

    &-danger {
      @apply bg-danger-500 text-white hover:bg-danger-600 focus:ring focus:ring-danger-500 focus:ring-opacity-50 disabled:bg-danger-500;
    }

    &-info {
      @apply bg-info-500 text-white hover:bg-info-600 focus:ring focus:ring-info-500 focus:ring-opacity-50 disabled:bg-info-500;
    }

    &-dark {
      @apply bg-dark-500 text-white hover:bg-dark-600 focus:ring focus:ring-dark-500 focus:ring-opacity-50 disabled:bg-dark-500;
    }

    &-outline-primary {
      @apply border border-primary-500 text-primary-500 hover:bg-primary-100 focus:border-primary-600 focus:bg-primary-100 focus:text-primary-600 disabled:hover:bg-transparent dark:hover:bg-primary-500 dark:hover:text-slate-200 dark:disabled:hover:bg-transparent dark:disabled:hover:text-primary-500;
    }

    &-outline-secondary {
      @apply border border-secondary-500 text-secondary-500 hover:bg-secondary-100 focus:border-secondary-600 focus:bg-secondary-100 focus:text-secondary-600 disabled:hover:bg-transparent dark:hover:bg-secondary-500 dark:hover:text-slate-200 dark:disabled:hover:bg-transparent dark:disabled:hover:text-secondary-500;
    }

    &-outline-success {
      @apply border border-success-500 text-success-500 hover:bg-success-100 focus:border-success-600 focus:bg-success-100 focus:text-success-600 disabled:hover:bg-transparent dark:hover:bg-success-500 dark:hover:text-slate-200 dark:disabled:hover:bg-transparent dark:disabled:hover:text-success-500;
    }

    &-outline-info {
      @apply border border-info-500 text-info-500 hover:bg-info-100 focus:border-info-600 focus:bg-info-100 focus:text-info-600 disabled:hover:bg-transparent dark:hover:bg-info-500 dark:hover:text-slate-200 dark:disabled:hover:bg-transparent dark:disabled:hover:text-info-500;
    }

    &-outline-warning {
      @apply border border-warning-500 text-warning-500 hover:bg-warning-100 focus:border-warning-600 focus:bg-warning-100 focus:text-warning-600 disabled:hover:bg-transparent dark:hover:bg-warning-500 dark:hover:text-slate-200 dark:disabled:hover:bg-transparent dark:disabled:hover:text-warning-500;
    }

    &-outline-danger {
      @apply border border-danger-500 text-danger-500 hover:bg-danger-100 focus:border-danger-600 focus:bg-danger-100 focus:text-danger-600 disabled:hover:bg-transparent dark:hover:bg-danger-500 dark:hover:text-slate-200 dark:disabled:hover:bg-transparent dark:disabled:hover:text-danger-500;
    }

    &-outline-dark {
      @apply border border-dark-500 text-dark-500 hover:bg-dark-100 focus:border-dark-600 focus:bg-dark-100 focus:text-dark-600 disabled:hover:bg-transparent dark:hover:bg-dark-500 dark:hover:text-slate-200 dark:disabled:hover:bg-transparent dark:disabled:hover:text-dark-500;
    }

    &-plain-primary {
      @apply text-primary-500 hover:bg-primary-100 focus:bg-primary-100 focus:text-primary-600 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
    }

    &-plain-secondary {
      @apply text-secondary-500 hover:bg-secondary-100 focus:bg-secondary-100 focus:text-secondary-600 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
    }

    &-plain-success {
      @apply text-success-500 hover:bg-success-100 focus:bg-success-100 focus:text-success-600 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
    }

    &-plain-info {
      @apply text-info-500 hover:bg-info-100 focus:bg-info-100 focus:text-info-600 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
    }

    &-plain-warning {
      @apply text-warning-500 hover:bg-warning-100 focus:bg-warning-100 focus:text-warning-600 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
    }

    &-plain-danger {
      @apply text-danger-500 hover:bg-danger-100 focus:bg-danger-100 focus:text-danger-600 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
    }

    &-plain-dark {
      @apply text-dark-500 hover:bg-dark-100 focus:bg-dark-100 focus:text-dark-600 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent;
    }

    &-soft-primary {
      @apply bg-primary-100 text-primary-500 hover:bg-primary-200 focus:bg-primary-200 focus:text-primary-600 disabled:hover:bg-primary-100 dark:bg-primary-900 dark:text-primary-200 dark:hover:bg-primary-800 dark:disabled:hover:bg-primary-900;
    }

    &-soft-secondary {
      @apply bg-secondary-100 text-secondary-500 hover:bg-secondary-200 focus:bg-secondary-200 focus:text-secondary-600 disabled:hover:bg-secondary-100 dark:bg-secondary-900 dark:text-secondary-200 dark:hover:bg-secondary-800 dark:disabled:hover:bg-secondary-900;
    }

    &-soft-success {
      @apply bg-success-100 text-success-500 hover:bg-success-200 focus:bg-success-200 focus:text-success-600 disabled:hover:bg-success-100 dark:bg-success-900 dark:text-success-200 dark:hover:bg-success-800 dark:disabled:hover:bg-success-900;
    }

    &-soft-info {
      @apply bg-info-100 text-info-500 hover:bg-info-200 focus:bg-info-200 focus:text-info-600 disabled:hover:bg-info-100 dark:bg-info-900 dark:text-info-200 dark:hover:bg-info-800 dark:disabled:hover:bg-info-900;
    }

    &-soft-warning {
      @apply bg-warning-100 text-warning-500 hover:bg-warning-200 focus:bg-warning-200 focus:text-warning-600 disabled:hover:bg-warning-100 dark:bg-warning-900 dark:text-warning-200 dark:hover:bg-warning-800 dark:disabled:hover:bg-warning-900;
    }

    &-soft-danger {
      @apply bg-danger-100 text-danger-500 hover:bg-danger-200 focus:bg-danger-200 focus:text-danger-600 disabled:hover:bg-danger-100 dark:bg-danger-900 dark:text-danger-200 dark:hover:bg-danger-800 dark:disabled:hover:bg-danger-900;
    }

    &-soft-dark {
      @apply bg-dark-100 text-dark-500 hover:bg-dark-200 focus:bg-dark-200 focus:text-dark-600 disabled:hover:bg-dark-100 dark:bg-dark-900 dark:text-dark-200 dark:hover:bg-dark-800 dark:disabled:hover:bg-dark-900;
    }
  }
}
