@import "./variables.css";

@layer components {
    .btn {
        @apply p-1 px-4 border-2 border-transparent bg-primary text-light cursor-pointer flex items-center justify-center
        hover:bg-primary/90 transition rounded-full font-button;
        font-weight: 500;
    }
    .btn-secondary {
        @apply bg-secondary text-dark
        hover:bg-secondary-dark transition;
    }
    .btn-light {
        @apply bg-light text-primary
        hover:bg-primary hover:text-light hover:border-light transition;
    }
    .btn-light-dark {
        @apply bg-light-dark text-primary
        hover:bg-primary hover:text-light hover:border-light transition;
    }
    .btn-light-grey {
        @apply text-primary
        hover:bg-primary hover:text-light hover:border-light transition;
        background: #e5e5e5;
    }
    .btn-outline {
        @apply bg-transparent border border-primary text-primary
        hover:bg-primary/10 transition;
    }
    .btn-block {
        min-width: 150px;

        @media(max-width: 767px) {
            min-width: initial;
        }
    }
}