﻿.media-block-slider {
    position: relative;
}

    .media-block-slider .slider-controls > div[aria-disabled=true] {
        opacity: 0.25;
    }

.theme--2 .media-block-slider .slider-controls > div {
    background: var(--colour-neutral);
    color: var(--colour-one);
}

.media-block-slider .text-content {
    padding-bottom: var(--section-spacing);
}

.media-block-slider__nav {
    display: -webkit-flex;
    display: flex;
    gap: 20px;
    margin-top: -5px;
    position: relative;
    z-index: 5;
}

.media-block-slider__nav__item {
    width: 50px;
    height: 5px;
    opacity: 0.5;
    cursor: pointer;
    background: var(--colour-one);
}

.theme--2 .media-block-slider__nav__item, .theme--4 .media-block-slider__nav__item, .theme--5 .media-block-slider__nav__item {
    background: var(--colour-neutral);
}

.media-block-slider__nav__item.tns-nav-active {
    opacity: 1;
}

.media-block-slider__nav__item:hover, .media-block-slider__nav__item:focus {
    opacity: 1;
}

@media (max-width: 767px) {
    .media-block-slider .gutter {
        margin-left: 0;
        margin-right: 0;
    }

        .media-block-slider .gutter > * {
            padding-left: 0;
            padding-right: 0;
        }

    .media-block-slider .blurb-media__inner__content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .media-block-slider .slider-controls {
        position: absolute;
        right: 15px;
        bottom: 0;
        display: -webkit-flex;
        display: flex;
        gap: 10px;
        z-index: 5;
    }

    .media-block-slider__nav {
        padding: 0 15px;
    }

    .theme .media-block-slider__inner {
        margin-top: calc(var(--section-spacing) * -1);
    }
}

@media (min-width: 768px) {
    .media-block-slider {
        --button-offset: -25px;
        --slider-control-button-width: 45px;
    }

        .media-block-slider .tns-slider {
            display: -webkit-flex;
            display: flex;
        }

            .media-block-slider .tns-slider .blurb-media {
                display: -webkit-flex;
                display: flex;
            }

            .media-block-slider .tns-slider .blurb-media__inner {
                -webkit-flex: 1;
                flex: 1;
            }

    .media-block-slider__inner {
        position: relative;
        width: var(--container-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .media-block-slider .text-content {
        padding-right: calc(var(--slider-control-button-width) + var(--button-offset) + var(--spacing));
    }

    .media-block-slider .slider-controls {
        position: absolute;
        width: var(--container-width);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--slider-control-button-width);
        margin: auto;
        padding-left: 15px;
        padding-right: 15px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        z-index: 5;
        pointer-events: none;
    }

        .media-block-slider .slider-controls > div {
            pointer-events: auto;
        }

            .media-block-slider .slider-controls > div:first-child {
                margin-left: -35.5px;
            }

            .media-block-slider .slider-controls > div:last-child {
                margin-right: -35.5px;
            }

    .media-block-slider__nav {
        max-width: var(--container-width);
        margin-left: auto;
        margin-right: auto;
        padding-right: calc(var(--slider-control-button-width) + var(--spacing) + var(--button-offset));
        padding-left: calc(var(--container-width) / 2);
    }

    .media-block-slider--image-right .media-block-slider__nav {
        padding-left: calc(var(--slider-control-button-width) + var(--spacing) + var(--button-offset));
        padding-right: calc(var(--container-width) / 2);
    }

    .media-block-slider--image-right .text-content {
        padding-right: 0;
        padding-left: calc(var(--slider-control-button-width) + var(--button-offset) + var(--spacing));
    }
}

@media (min-width: 992px) {
    .media-block-slider .slider-controls > div:first-child {
        margin-left: -46.5px;
    }

    .media-block-slider .slider-controls > div:last-child {
        margin-right: -46.5px;
    }
}

@media (min-width: 1200px) {
    .media-block-slider {
        --button-offset: -32.5px;
        --slider-control-button-width: 65px;
    }

    .media-block-slider__nav {
        padding-left: calc(50% + (var(--gutter-width) * 2));
    }

    .media-block-slider--image-right .media-block-slider__nav {
        padding-right: calc(50% + (var(--gutter-width) * 2));
        padding-left: calc(var(--slider-control-button-width) + var(--spacing) + var(--button-offset));
    }
}
