/**
 * BUTTON
 *
*/
@layer components {
    .n7-btn {
        @apply py-2 px-4 rounded border inline-flex gap-2 items-center font-bold text-lg tracking-wide transition-all duration-200 ease-out;
    }

    .n7-btn--primary {
        @apply n7-button-primary text-white hover:text-white hover:n7-button-primary-hover focus:n7-button-primary-hover active:n7-button-primary-active;
    }

    .n7-btn--secondary {
        @apply n7-button-secondary text-white hover:text-white hover:n7-button-secondary-hover focus:n7-button-secondary-hover active:n7-button-secondary-active;
    }

    .n7-btn--only-text {
        @apply bg-transparent n7-button-only-text hover:n7-button-only-text-hover hover:bg-neutral-100 focus:n7-button-only-text-hover active:n7-button-only-text-active;
    }

    .n7-btn--outline {
        @apply bg-transparent n7-button-outline border border-current hover:n7-button-primary hover:text-white focus:n7-button-outline-hover focus:bg-neutral-100;
    }

    .n7-btn--inverted {
        @apply n7-button-inverted n7-button-inverted-text hover:n7-button-inverted-hover hover:n7-button-inverted-text-hover focus:n7-button-inverted-focus focus:n7-button-inverted-text-focus active:n7-button-inverted-active  active:n7-button-inverted-text-active;
    }

    .n7-btn--text-inverted {
        @apply n7-button-text-inverted n7-button-text-inverted-text hover:n7-button-text-inverted-hover hover:n7-button-text-inverted-text-hover focus:n7-button-text-inverted-focus focus:n7-button-text-inverted-text-focus active:n7-button-text-inverted-active active:n7-button-text-inverted-text-active;
    }

    /* ICON VARIANTS */

    .n7-btn--icon {
        @apply justify-center p-0 w-9 h-9;
    }

    .n7-btn--icon-right,
    .n7-btn--icon-left {
        @apply gap-1.5;
    }

    .n7-btn--icon-right {
        @apply pr-2;
    }

    .n7-btn--icon-left {
        @apply pl-2;
    }

    /* SIZES MANAGEMENT */

    .n7-btn--s {
        @apply text-sm py-1 px-3;
    }

    .n7-btn--s.n7-btn--icon {
        @apply w-6 h-6;
    }

    .n7-btn--s.n7-btn--icon-right {
        @apply pr-1.5 gap-1;
    }

    .n7-btn--s.n7-btn--icon-left {
        @apply pl-1.5 gap-1;
    }

    .n7-btn--l {
        @apply text-xl py-3 px-6;
    }

    .n7-btn--l.n7-btn--icon {
        @apply w-12 h-12;
    }

    .n7-btn--l.n7-btn--icon-right {
        @apply pr-4 gap-2;
    }

    .n7-btn--l.n7-btn--icon-left {
        @apply pl-4 gap-2;
    }

    .n7-btn--s.n7-btn--icon,
    .n7-btn--l.n7-btn--icon {
        @apply px-0;
    }

}