@layer components {
    .btn {
        @apply flex bg-giftdesign rounded-lg px-4 py-2 text-white text-base font-medium shadow-md items-center;

        @screen md {
            @apply px-6 text-lg;
        }
        @screen xl {
            @apply text-base;
        }

        svg {
            @apply inline-flex;
        }

        span {
            vertical-align: middle;
        }

        &:hover {
            @apply bg-giftdesign-300;
        }

        &:focus {
            @apply outline-none border-transparent ring-4 ring-giftdesign-800 ring-opacity-50;
        }
    }

    .btn-primary {
        color:#ffffff !important;
        @apply bg-primary shadow-md;

        &:hover {
            @apply bg-primary-lighter shadow-lg;
        }
    }

    .btn-secondary, .hyva_checkout-index-index .btn-secondary.btn-previous {
        @apply bg-white border-2 border-primary-lighter text-black shadow-md;

        &:hover {
            @apply bg-white border-primary-darker shadow-lg;
        }

        &:focus {
            @apply border-2 border-transparent;
        }
    }
    .btn-primary.btn{
        @apply bg-primary text-xl font-suse font-medium;
    }

    .btn-primary.btn:hover {
        @apply bg-giftdesign-300 shadow-lg;
    }

    .btn-size-lg {
        @apply px-10 py-4 text-lg;
    }

    .btn-size-sm {
        @apply px-2 py-2 text-sm;
    }
}
.primary>button.submit.action, .submit, .submit.action{
    @apply text-white;
}