.button {
    @apply px-6 py-2 rounded-lg font-bold transition-colors duration-150 shadow-md;
    @apply text-white;

    &:hover{
        @apply cursor-pointer shadow-sm;
    }

    &--primary {
        @apply sui-background-primary;
        @apply sui-color-secondary;
        &:hover{
            @apply sui-background-secondary;
            @apply sui-color-primary;
        }
    }

    &--secondary {
        @apply sui-background-secondary;
        @apply sui-color-primary;
        &:hover{
            @apply sui-background-primary;
            @apply sui-color-secondary;
        }  
    }

    &--large{
        @apply px-12 py-4 text-4xl;
    }
    
    &--small{
        @apply px-6 py-2 text-xs;
    }
    &--circle{
        @apply rounded-full flex items-center justify-center;
    }
    
}
.h-small {
    @apply h-12 py-4
}
.w-small {
    @apply w-12 px-4
}
.h-medium {
    @apply h-24 py-8
}
.w-medium {
    @apply w-24 px-8
}
.h-large {
    @apply h-36 py-12
}
.w-large {
    @apply w-36 px-12
}