@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/colors';
@import '../../../constants/modifiers';
@import '../../../styles/mixins';
@import "../../../styles/grid.scss";

$slide-border-radius: 8px;

// Component Styles
.carouselSlideImage {
    &_content {
        position: relative;
        display: block;
        height: 100%;
        border-radius: $slide-border-radius;
        background: var(--background-color, transparent) no-repeat center/cover;
        background-image: var(--image-url);
        text-decoration: none;
        font-size: $headingFontSize6;
        overflow: hidden;

        &--fit {
            background-size: contain;
        }

        @include media-lg-up {
            &--text-size-small {
                font-size: $headingFontSize4;
            }
            &--text-size-medium {
                font-size: $headingFontSize2;
            }
            &--text-size-large {
                font-size: $headingFontSize1;
            }
        }
        &::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--overlay-color, transparent);
        }

        @include focus-outline;
    }
    &_grid {
        height: 100%;
    }
    &_text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        width: calc(100% / 12 * 10);
        margin: 0 auto;

        position: relative;
        z-index: 2;

        &--align-left {
            align-items: flex-start;
            text-align: start;
        }
        &--align-right {
            align-items: flex-end;
            text-align: end;
        }
        &--align-center {
            text-align: center;
        }
    }
    &_title {
        @include title-3;
        color: var(--title-color, $body-color);

        @include media-md-up {
            font-size: $headingFontSizeXXLarge;
            line-height: 1.2;
        }

        &--text-size-small {
            font-size: $headingFontSizeLarge;
        }
        &--text-size-medium {
            font-size: $headingFontSizeXLarge;
        }
        &--text-size-large {
            font-size: $headingFontSizeXXLarge;
        }
    }
    &_description {
        opacity: 0.8;
        color: var(--text-color, $body-color);
    }
}
