.buttongroup {
    @apply flex flex-col md:flex-row rounded-lg border sui-border-color-secondary sui-font-family-code text-xs md:text-base overflow-hidden;
    &__option{
        @apply flex-1 px-6 py-2 text-center md:border-r sui-border-color-secondary font-bold transition-colors duration-150;
        &:hover{
            @apply cursor-pointer;
        }
        &:first-child {
            @apply rounded-t-md md:rounded-t-none md:rounded-l-md;
        }
        &:last-child {
            @apply border-r-0 md:rounded-r-md;
        }
        
    }

    &--primary  {
        .buttongroup__option{
            @apply sui-background-primary;
            @apply sui-font-family-secondary;
            &:hover{
                @apply sui-background-secondary;
                @apply sui-font-family-primary;
            }
            &--active {
                @apply sui-background-secondary;
                @apply sui-font-family-primary;
            }
        }
        
    }

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

    &--large{
        @apply px-12 py-4 text-4xl;
    }

    &--small{
        @apply px-6 py-2 text-xs;
    }
    
}