@use '@tokens' as tokens;
@use '../tools/typography';

#cc-main .cm__title {
    @include typography.generate(tokens.$heading-small-bold);
}

#cc-main .cm__desc {
    @include typography.generate(tokens.$body-small-regular);
}

#cc-main .cm--flip .cm__btn + .cm__btn,
#cc-main .cm--flip .cm__btn-group + .cm__btn-group {
    margin-bottom: tokens.$space-500;
}

#cc-main .cm--bar:not(.cm--inline) .cm__btn + .cm__btn,
#cc-main .cm--bar:not(.cm--inline) .cm__btn-group + .cm__btn-group {
    margin-left: tokens.$space-700;
}

#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn + .cm__btn,
#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group + .cm__btn-group {
    margin-right: tokens.$space-700;
}

@media screen and (width <= 640px) {
    #cc-main .cm__btn + .cm__btn,
    #cc-main .cm__btn-group + .cm__btn-group {
        // stylelint-disable-next-line declaration-no-important -- Override original library styles.
        margin: tokens.$space-500 0 0 !important;
    }

    #cc-main .cm--flip .cm__btn + .cm__btn,
    #cc-main .cm--flip .cm__btn-group + .cm__btn-group {
        // stylelint-disable-next-line declaration-no-important -- Override original library styles.
        margin-bottom: tokens.$space-500 !important;
    }
}