/* path file: components/slider/before.and.after/templates/.default/style.css */

.slider-before-and-after .before-after-slider {
    background-color: #2C2C2C;
    margin: 20px 0;
}

.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.slider-container .slider-wrap {
    position: relative;
    height: 100%;
}

.slider-container .slider-wrap img {
    display: block;
    height: 100%;
    user-select: none;
}

.slider-container .slider-wrap .slider-before-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    background-color: #2C2C2C;
}

.slider-container .slider-wrap .slider-btn {
    display: block;
    width: 6px;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    cursor: ew-resize;
    box-sizing: border-box;
    outline: none;
    border: 0;
    z-index: 2;
}

.slider-container .slider-wrap .slider-btn-wrap {
    width: 40px;
    height: 40px;
    background-color: rgb(58, 140, 240);
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    font-size: 25px;
    font-weight: 900;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    border: 1px solid #000;
}

.slider-container .slider-wrap .slider-btn-wrap:hover {
    transform: translate(-50%, -50%) scale(0.9);
    font-size: 20px;
    line-height: 40px;
}

.slider-container .slider-wrap .slider-btn-wrap span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-color: #ffffff transparent transparent transparent;
    border-width: 8px;
    border-style: solid;
    transition: all 0.3s ease;
    border-top-width: 6px;
    border-bottom-width: 6px;
}

.slider-container .slider-wrap .slider-btn-wrap span:nth-child(1) {
    border-color: transparent #ffffff transparent transparent;
    left: 0px;
}

.slider-container .slider-wrap .slider-btn-wrap span:nth-child(2) {
    border-color: transparent transparent transparent #ffffff;
    right: 0px;
}

.slider-container .slider-wrap {
    overflow: hidden;
}

.slider-container .slider-before-content {
    /* transform: skewX(-20deg); */
    transform-origin: top left;
}

.slider-container .before-content {
    /* transform: skewX(20deg); */
    transform-origin: top right;
}

.slider-container .slider-wrap .slider-btn {
    transform: translateX(-50%);

    transform-origin: top;
}

.slider-container .slider-after-content {
    height: 100%;
}

.slider-container .after-content {
    height: 100%;
}

.slider-container .before-content {
    height: 100%;
}

.slider-content__description:before {
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


@media(min-width: 768px) {
    .slider-content__description {
        position: absolute;
        display: flex;
        bottom: 30px;
    }

    .after-content .slider-content__description {
        max-width: 210px;
        right: 30px;
        color: #fff;
        flex-direction: row-reverse;
        text-align: right;
    }

    .before-content .slider-content__description {
        max-width: 140px;
        left: 30px;
        color: #00FFFF;
        min-width: max-content;
    }

    .slider-content__description:before {
        min-width: 9px;
        width: 9px;
        height: 23px;
        transform: translateY(-18px);
        -webkit-transform: translateY(-18px);
        -moz-transform: translateY(-18px);
        -ms-transform: translateY(-18px);
        -o-transform: translateY(-18px);
    }

    .before-content .slider-content__description:before {
        background-image: url("data:image/svg+xml,%3Csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.83389 9.06805L5.59733 8.83236L6.52726 4.24217C1.04603 8.6308 -0.285079 16.5072 3.65627 22.3774L2.61295 23.0779C-1.73796 16.5977 -0.205347 7.87761 5.94665 3.11806L1.14633 2.20314L1.39628 0.969379L6.97489 2.03265L8.21145 2.26833L6.83389 9.06805Z' fill='%2300FFFF'/%3E%3C/svg%3E%0A");
    }

    .after-content .slider-content__description:before {
        background-image: url("data:image/svg+xml,%3Csvg width='9' height='23' viewBox='0 0 9 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.27124 8.86967L3.5078 8.6383L2.57787 4.13213C8.0591 8.44043 9.39021 16.1726 5.44886 21.9354L6.49219 22.623C10.8431 16.2615 9.31048 7.70102 3.15849 3.0286L7.9588 2.13042L7.70885 0.919249L2.13025 1.96305L0.893685 2.19442L2.27124 8.86967Z' fill='white'/%3E%3C/svg%3E%0A");
    }

    .slider-content__description_top,
    .slider-content__description_bottom {
        display: none;
    }
}

@media(max-width: 768px) {
    .slider-container {
        height: 300px !important;
    }

    .slider-before-and-after .before-after-slider {
        margin: 7px 0;
    }

    .slider-content__description {
        font-size: 14px;
        display: flex;
        gap: 4px;
    }

    .slider-content__description:before {
        min-width: 16px;
        width: 16px;
        height: 19px;
    }

    .slider-content__description_top {
        margin-left: 4px;
    }

    .slider-content__description_bottom {
        flex-direction: row-reverse;
        text-align: right;
        margin-right: 4px;
    }

    .slider-content__description_top:before {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7124 11.6637L9.82744 10.7684L6.53492 14.0992C7.12307 7.10219 12.9202 1.60653 19.9908 1.60653L19.9908 0.349854C12.1855 0.349853 5.8002 6.48312 5.27801 14.2438L1.84258 10.7684L0.957609 11.6637L4.95004 15.7025L5.83501 16.5977L10.7124 11.6637Z' fill='black'/%3E%3C/svg%3E%0A");
        transform: translateY(50%);
    }

    .slider-content__description_bottom:before {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2348 5.28359L11.1198 6.17883L14.4123 2.84807C13.8242 9.84507 8.027 15.3407 0.956421 15.3407L0.956421 16.5974C8.76173 16.5974 15.1471 10.4641 15.6692 2.7035L19.1047 6.17883L19.9896 5.28358L15.9972 1.24479L15.1122 0.34954L10.2348 5.28359Z' fill='black'/%3E%3C/svg%3E%0A");
    }

    .before-slider__subtitle {
        display: none;
    }

}

@media(max-width: 480px) {
    .slider-container {
        height: 210px !important;
    }
}