/*
CMS blocks
==============================================
General styling for cms blocks and
specific styling for elements dependent on their parent block
*/

.cms-block {
    overflow: hidden;

    &.bg-image {
        position: relative;
        background-repeat: no-repeat;
        background-position: 50%;
    }

    .cms-block-background {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;

        object-fit: none;

        &.media-mode--contain {
            object-fit: contain;
        }

        &.media-mode--cover {
            object-fit: cover;
        }
    }

    .cms-block-container {
        position: relative;

        .cms-block-container-row {
            flex-direction: row;
        }
    }
}

.cms-block-center-text {
    .cms-element-text {
        padding: 30px;
    }
}

.cms-block-image-three-cover {
    .row {
        margin: 0;
    }

    [class^=col-] {
        padding: 0;
    }
}

.cms-block-image-text-bubble,
.cms-block-image-bubble-row {
    .cms-element-image .cms-image-container {
        height: 300px;
        width: 300px;
        margin: auto;
        border-radius: 50%;
        background-clip: padding-box;
        overflow: hidden;
    }
}

.cms-block-image-highlight-row {
    .cms-element-image {
        border: 12px solid $white;
    }
}

.cms-block-image-text-bubble,
.cms-block-image-text-row {
    .cms-element-text {
        padding-top: 20px;
    }
}

.cms-block-image-text-gallery {
    .image-text-gallery-card {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    }

    .cms-element-text {
        padding: 20px;
    }
}

.cms-block-text-on-image {
    .cms-element-text {
        padding: 30px;
        align-items: center;
        min-height: 240px;
    }
}

.cms-block-image-text-cover {
    .cms-element-text {
        padding-top: 30px;
    }
}

.cms-block-image-simple-grid {
    .left-top {
        margin-bottom: $grid-gutter-width;
    }

    .right {
        height: 100%;
    }
}

@include media-breakpoint-up(lg) {
    .cms-block-container {
        .cms-block-container-row.has--sidebar {
            flex-direction: column;

            > div {
                flex-basis: auto;
                flex-grow: 1;
                max-width: 100%;
            }
        }
    }
}

@include media-breakpoint-down(md) {
    .cms-block-image-text-gallery,
    .cms-block-image-two-column,
    .cms-block-image-three-column,
    .cms-block-image-four-column,
    .cms-block-image-bubble-row,
    .cms-block-image-highlight-row {
        .cms-row > :not(:last-child) {
            margin-bottom: $grid-gutter-width;
        }
    }

    .cms-block-image-text,
    .cms-block-image-text-cover {
        .cms-row > :first-child {
            margin-bottom: $grid-gutter-width;
        }
    }

    .cms-block-image-simple-grid {
        .left-bottom {
            margin-bottom: $grid-gutter-width;
        }
    }
}

.cms-block-sidebar-filter {
    overflow: visible;

    /*
    The filter's col is set to "initial" because the "boundary" option
    of the filter panel bootstrap dropdown is not working otherwise.
    The "boundary" option sets the dropdown container to "static" to
    be able to "break out" of "overflow: hidden". But this interferes
    with position "relative" on surrounding columns.
    */
    .col-12 {
        position: initial;
    }
}

.cms-element-product-name {
    display: inline-block;
}

.cms-element-manufacturer-logo {
    .cms-image-link {
        height: 100%;
    }

    .cms-image-container.is-standard {
        img {
            max-width: 200px;
            max-height: 70px;
        }
    }
}
