$namespace: 'cs-';
@import '../../../node_modules/creative-patterns/packages/components/teaser/src/teaser';
@import '../../../node_modules/creative-patterns/packages/components/image-teaser/src/image-teaser';

.#{$namespace}image-teaser {
    $root: &;

    @include teaser();
    @include imageTeaser();
    margin-bottom: 3rem;

    &__slide {
        #{$root}:not(#{$root}--slider) & {
            height: auto;
        }

        #{$root}--slider & {
            margin-bottom: 0;
        }

        &--scheme-light:not(#{$root}__slide--image-uploaded) {
            background-color: $colorMineShaft;
        }
    }

    &__slide-link {
        display: flex;
        width: 100%;

        &:hover {
            text-decoration: none;
        }

        #{$root}__wrapper--content-display-outside & {
            flex-wrap: wrap;
        }
    }

    &__content-wrapper {
        color: $colorMineShaft;

        #{$root}__wrapper--content-display-inside & {
            padding: 2rem 1rem;
            @include media('>=laptop') {
                padding: 2rem;
            }
        }

        #{$root}--items-in-row-1 #{$root}__wrapper--content-display-inside & {
            @include media('>=laptop') {
                padding: 2rem 3rem;
            }
        }

        #{$root}__wrapper--content-display-outside & {
            background-color: transparent;
        }

        #{$root}__wrapper--content-display-inside &--content-display-scenario-1,
        #{$root}__wrapper--content-display-inside
            &--content-display-scenario-2 {
            #{$root}__subheadline,
            #{$root}__text,
            #{$root}__cta {
                //Style specific for creativeshop template, probably should be removed in child template
                padding-left: 1rem;
                @include media('>=laptop') {
                    padding-left: 0;
                }
            }
        }

        &--content-display-scenario-4 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
    }

    &__headline {
        //Below are styles specific for creativeshop template, probably should be removed in child template

        #{$root}__slide--scheme-light & {
            color: $colorWhite;
        }

        #{$root}:not(#{$root}--items-in-row-1)
            #{$root}__wrapper--content-display-inside
            #{$root}__content-wrapper--content-display-scenario-1
            &,
        #{$root}:not(#{$root}--items-in-row-1)
            #{$root}__wrapper--content-display-inside
            #{$root}__content-wrapper--content-display-scenario-2
            & {
            max-width: 70%;
            margin-left: -1rem;
            padding: 0.5rem 1.5rem 0.5rem 2rem;
            background-color: $colorGold;
            @include media('>=laptop') {
                margin-left: -2rem;
            }

            &:after {
                //Style specific for creativeshop template, probably should be removed in child template
                display: block;
                content: '';
                position: absolute;
                right: -2rem;
                top: 0;
                z-index: -1;
                background: $colorGold;
                height: 100%;
                width: 4.5rem;
                transform: skew(-18deg);
            }
        }

        #{$root}--items-in-row-2
            #{$root}__wrapper--content-display-inside
            #{$root}__content-wrapper--content-display-scenario-1
            &,
        #{$root}--items-in-row-2
            #{$root}__wrapper--content-display-inside
            #{$root}__content-wrapper--content-display-scenario-2
            & {
            max-width: 50% !important;
        }

        //End of style very specific to creativeshop template

        #{$root}__wrapper--content-display-inside & {
            width: auto;
            position: relative;
            z-index: 3;
            font-weight: 700;
            text-transform: none;
        }

        #{$root}__wrapper--content-display-outside & {
            margin-bottom: 0.5rem;
            font-weight: 700;

            @include media('>=laptop') {
                #{$root}--items-in-row-2 & {
                    font-size: 2.43rem;
                }

                #{$root}--items-in-row-3 & {
                    font-size: 2.1rem;
                }

                #{$root}--items-in-row-4 & {
                    font-size: 1.95rem;
                }

                #{$root}--items-in-row-6 & {
                    font-size: 1.74rem;
                }
            }
        }

        + #{$root}__subheadline {
            margin: 0.25rem 0 0;
        }

        + #{$root}__text {
            margin: 0.25rem 0 0;
        }
    }

    &__subheadline {
        margin-bottom: 1rem;

        #{$root}__slide--scheme-light & {
            color: $colorWhite;
        }

        + #{$root}__text {
            margin: 0.25rem 0 0;
        }
    }

    &__text {
        line-height: 1.18;
        color: $colorDoveGray;
        font-weight: 400;
        display: none;

        #{$root}__slide--scheme-light & {
            color: $colorWhite;
        }

        @include media('<laptop') {
            font-size: 1.45rem;
        }

        @include media('>=laptop') {
            display: block;
        }
    }

    &__cta {
        white-space: nowrap;

        .#{$namespace}button--type_long {
            font-size: 1.19rem;

            @include media('<laptop') {
                min-width: 10rem;
                text-indent: 0;
                min-height: 3.35rem;
                padding: 0.65rem 5rem 0.65rem 1.5rem;
            }
        }
    }

    &__pagination {
        @extend .#{$namespace}products-promo__pagination;
        position: static;
        transform: none;
        margin-top: 2rem;
        margin-left: 1rem;

        &-item {
            @extend .#{$namespace}products-promo__pagination-item;

            &:only-child {
                display: none;
            }

            &--active {
                @extend .#{$namespace}products-promo__pagination-item--active;
            }
        }

        &-button {
            @extend .#{$namespace}products-promo__pagination-button;
        }
    }

    &__nav {
        @extend .#{$namespace}products-promo__nav;
        z-index: 3;
        background-color: $colorWhite;

        @include media('<tablet') {
            display: none;
        }

        &--disabled {
            opacity: 0.5;
            cursor: initial !important;

            &:hover {
                transform: translateY(-50%) !important;
            }
        }

        &--prev {
            left: 1.5rem;
        }

        &--next {
            right: 1.5rem;
        }
    }

    &__nav-icon {
        fill: $colorCeruleanBlue;

        @include media('<tablet') {
            height: calc(5.5rem * 0.75);
        }
    }

    &--full-width-slider {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    &__number--current {
        color: $colorGold;
    }
}