.tile-gallery-component {
    .carousel {
        overflow: hidden;
        // The transform: translateZ(0); attr added is to overcome a bug with Safari which stops border radius applying to parent divs
        transform: translateZ(0);

        .owl-item {
            overflow: hidden;
            flex: 1 1 auto;
        }

        .item {
            height: 380px;
            background: #fff;

            .fitted-image {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 1;
                z-index: 1;
            }

            // Set's backdrop blur
            $backdrop-blur: 15px;
            $backdrop-offset: -25px;

            .fitted-image-backdrop {
                position: absolute;
                top: $backdrop-offset;
                right: $backdrop-offset;
                bottom: $backdrop-offset;
                left: $backdrop-offset;
                filter: blur($backdrop-blur);
                z-index: 0;
            }

            .slide-image-link {
                height: 100%;
                width: 100%;
                display: block;
            }

            .slide-image-link:hover,
            .slide-image-link:hover .fitted-image {
                opacity: 1;
            }
        }

        .slider-banner {
            background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
            padding: 1rem;
            margin: 0;
            color: #000;
            left: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            z-index: 2;

            .slider-banner-title {
                margin: 0;
                border: none;
                color: #FFF;
            }

            .slider-banner-subtitle {
                color: #FFF;
                margin-top: 10px;
                margin: 0;
            }

            .slider-banner-subtitle:empty {
                margin-top: 0;
            }
        }

        // Styles the slider banner background so it sits behind the slider banner
        .slider-banner .slider-banner-bg {
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        // owl controls
        .owl-carousel {
            position: relative;

            .owl-nav {
                margin: 0;
                opacity: 0;
                visibility: hidden;
                transition: 0.3s;

                .owl-prev,
                .owl-next {
                    position: absolute;
                    top: 50%;
                    margin-top: -15px;
                    padding: 0.25rem !important;
                    margin: 0 0.5rem;
                    font-size: 16px;
                    border-radius: 10rem;
                    background: #fff;
                    color: #000;
                    opacity: 0.9;
                    transition: 0.3s;
                }
            }

            .owl-prev {
                left: 0;
                transform: translateX(5px);
            }

            .owl-next {
                right: 0;
                transform: translateX(-5px);
            }

            .owl-controls {
                margin-top: 0;
            }
        }

        // Shows the owl navigation buttons when the user hovers over the slider
        .owl-carousel:hover {
            .owl-nav {
                opacity: 1;
                visibility: visible;
                transition: 0.3s;

                .owl-prev, .owl-next {
                    transition: 0.3s;
                }

                .owl-prev {
                    left: 0;
                    transform: translateX(0);
                }

                .owl-next {
                    right: 0;
                    transform: translateX(0);
                }
            }
        }

        // Vertically aligns the slider banner to the top of the slide
        .overlay-top {
            top: 0;
        }

        // Applies additional top margin to the slider banner when pagination dots are present
        .pagination-dots .overlay-top {
            margin-top: 2.5rem;
        }

        // Vertically aligns the slider banner to the top of the slide
        .overlay-middle {
            top: 50%;
            transform: translateY(-50%);
            margin-top: 0;
            margin-bottom: 0;
        }

        // Veritcal aligns the slider banner to the bottom of the slide
        .overlay-bottom {
            bottom: 0;
        }

    }


    // Smart Object Slider styling
    #ajaxSlider {
        .owl-carousel {
            display: block;
        }
    }

    .tile-gallery-component .slide {
        border-bottom-left-radius: var(--theme-rounded-corners);
        border-bottom-right-radius: var(--theme-rounded-corners);
    }

    .tile-gallery-component .hide-header + .content-block .slide {
        border-radius: var(--theme-rounded-corners);
    }

    /*Pagination buttons*/
    .slide {
        .owl-carousel .owl-dots {
            position: absolute;
            top: 10px;
            left: 10px;
            margin-top: 0 !important;

            .owl-dot {
                span {
                    position: relative;
                    background: #fff;
                    width: 12px;
                    height: 12px;
                    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
                    opacity: 0.5;
                }
            }

            .owl-dot span:hover {
                opacity: 1;
            }

            .owl-dot.active span {
                opacity: 1;

                &:after {
                    content: '';
                    position: absolute;
                    background: var(--theme-primary-color);
                    height: 6px;
                    width: 6px;
                    border-radius: 350px;
                    left: 0;
                    top: 0;
                    margin: 3px;
                }
            }
        }
    }
}
