@layer components {
    .bw-button {
        @apply py-3 px-5 tracking-wider text-xs font-medium inline-block items-center transition duration-300
    }

    .bw-button-circle {
        @apply focus:outline-none focus:!ring-opacity-25 focus:ring-offset-0 rounded-full inline-flex place-items-center justify-center
    }

    .bw-button.tiny {
        @apply py-[6px] px-[15px] text-[10px]
    }

    .bw-button.small {
        @apply py-[11px] px-4 !text-[11px]
    }

    .bw-button.medium {
        @apply py-4 px-6
    }

    .bw-button.medium.has-icon {
        @apply py-[15px] px-6
    }

    .bw-button.big {
        @apply py-6 px-9 !text-[14px]
    }

    .bw-button.big.has-icon {
        @apply pt-[19px] pb-[20px] px-8 !text-[16px]
    }

    .bw-button.primary:not(.outlined), .bw-button-circle.primary:not(.outlined),
    .bw-button.secondary:not(.outlined), .bw-button-circle.secondary:not(.outlined) {
        @apply active:translate-y-0.5 text-white text-opacity-90 hover:text-opacity-100 hover:!no-underline
        active:opacity-100 focus:outline-none focus:!ring-opacity-25 focus:!ring-offset-0
    }

    .bw-button.primary.outlined, .bw-button-circle.primary.outlined,
    .bw-button.secondary.outlined, .bw-button-circle.secondary.outlined {
        @apply bg-transparent focus:outline-none focus:!ring-opacity-25 focus:!ring-offset-0
    }

    .bw-button.disabled, .bw-button-circle.disabled {
        @apply disabled:opacity-50 disabled:cursor-not-allowed
    }

    .bw-button.outlined {
        @apply py-2.5
    }

    .bw-button.tiny.outlined {
        @apply py-[5px]
    }

    .bw-button.small.outlined {
        @apply py-[8.5px]
    }

    .bw-button.medium.outlined {
        @apply py-[14px]
    }

    .bw-button.big.outlined {
        @apply py-[22px]
    }

    .bw-button-circle.tiny {
        @apply size-[31px]
    }

    .bw-button-circle.small {
        @apply p-0.5 size-10
    }

    .bw-button-circle.regular {
        @apply p-1 size-[42px]
    }

    .bw-button-circle.medium {
        @apply p-1 size-[50px]
    }

    .bw-button-circle.big {
        @apply p-3 size-[65px]
    }

    .bw-button-circle.tiny.outlined {
        @apply size-[32px]
    }

    .bw-button-circle.small.outlined {
        @apply p-0.5
    }

    .bw-button-circle.medium.outlined {
        @apply p-1 size-[50px]
    }

    .bw-button-circle.big.outlined {
        @apply p-3 size-[66px]
    }

}