@import '../../../../../styles/mixins';
@import '../../../../../styles/grid';
@import '../../../../../styles/definitions/breakpoints';
@import '../../../../../styles/definitions/variables';

.variantCta {
	&_buttons {
        display: flex;

        &:not(&--fullscreen) {
            flex-direction: column;
            align-items: flex-end;
            flex-shrink: 0;
            padding-left: $grid-gutter-width;
    
            @include media-md-down {
                @include grid-width(4);
            }
        }
        &--fullscreen {
            flex-wrap: wrap;
            justify-content: center;
            margin-top: $grid-gutter-width * 2;
        }

        .button_item {
            position: relative;
        }
    }

	&_button {
        $button-padding-x: 24px;
        $icon-width: 26px;
        $icon-spacing: 16px;

        &Icon {
            position: absolute;
            left: $button-padding-x;
            top: 50%;
            transform: translateY(-50%);
            width: $icon-width;
            fill: $white;
        }
        &--with-icon {
            position: relative;

            @include media-md-up {
                .button_text {
                    padding-left: $button-padding-x + $icon-width + $icon-spacing;
                }
            }
        }
        &--fullscreen {
            $button-spacing: 3px;
            width: 50%;
            margin-top: $button-spacing;

            .button_item {
                width: 100%;
            }

            &:nth-child(even) {
                padding-left: $button-spacing;
            }
            &:nth-child(odd) {
                padding-right: $button-spacing;
            }
        }

        &:not(&--fullscreen) {
            width: 100%;
            text-align: right;
        
            &:not(:first-of-type) {
                margin-top: 12px;
            }

            @include media-md-down {
                .button_item {
                    font-size: $bodyFontSize6;
                    width: 100%;
                    min-width: 0;
                    min-height: $button_height--small;
                }
                .button_text {
                    padding: $button_padding--small;
                }
            }
        }

        @include media-md-down {
            &Icon {
                display: none;
            }
        }
    }
}
