﻿img-comparison-slider {
    visibility: hidden;
}

    img-comparison-slider [slot='second'] {
        display: none;
    }

    img-comparison-slider.rendered {
        visibility: inherit;
    }

        img-comparison-slider.rendered [slot='second'] {
            display: unset;
        }

.before,
.after {
    margin: 0;
}

    .before figcaption,
    .after figcaption {
        background: #282828;
        border: 1px solid #c0c0c0;
        border-radius: 2px;
        color: #ffffff;
        opacity: 0.9;
        padding: 0.5rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        line-height: 100%;
    }

    .before figcaption {
        left: 0.3rem;
    }   

    .after figcaption {
        right: 0.3rem;
    }

img-comparison-slider {
    --divider-width: 2px;
    --divider-color: #ffd800;
    --default-handle-opacity: 1.0;
    --default-handle-color: #ffd800;
}