@layer components {
    .btn {
        @apply flex items-center p-2 text-sm justify-center font-bold text-white uppercase bg-black shadow-md;

        @screen md {
            @apply p-3 text-lg;
        }

        svg {
            @apply inline-flex;
        }

        &:hover {
             @apply bg-gray-600;
         }

        &:focus {
             @apply border-transparent outline-none ring-0;
        }
    }


    .btn-primary {
        @apply text-white shadow-md bg-primary;

        &:hover {
            @apply text-white shadow-lg bg-background-darkBurgundy;
        }

    }

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

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

    &:focus {
        @apply border-2 border-transparent;
    }

    }

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

    .btn-size-sm {
        @apply px-2 py-2 text-sm;
    }
}
