.beforeAndAfter {
    position: relative;
    width: max-content;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    border-radius: var(--border-radius);

    >.title {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 0.7em;
        font-weight: 300;
        padding: 0 .8em;
        border-radius: var(--border-radius-small);
        background: var(--color-background-dark);

        >a {
            text-decoration: none;
        }
    }

    >.image {
        float: left;
        width: 100%;
        border-radius: var(--border-radius);
    }

    >.image.after {
        position: absolute;
        left: 0;
        top: 0;
        clip-path: inset(0px 100% 0px 0px);
    }

    >picture>img {
        float: left;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30%;
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    >.divisor {
        position: absolute;
        /* background: var(--color-background-dark); */
        top: 0;
        bottom: 0;
        left: 0%;
        width: 2px;
        margin-left: -2px;
        content: '';
        z-index: 1;

        >.tooltip {
            position: absolute;
            top: 50%;
            left: 40px;
            transform: translateY(-50%);
            background: var(--color-accent);
            color: #fff;
            padding: 6px 12px;
            border-radius: var(--border-radius-small);
            font-weight: normal;
            white-space: nowrap;
            opacity: 1;
            transition: opacity 0.3s ease;
            pointer-events: none;
            box-shadow: 0 4px 6px hsla(from var(--color-accent) h s 20% / .5);

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: -6px;
                transform: translateY(-50%);
                border-width: 6px 6px 6px 0;
                border-style: solid;
                border-color: transparent var(--color-accent) transparent transparent;
            }
        }

        >.tooltip.hidden {
            opacity: 0;
        }
    }

    >input[type=range] {
        z-index: 1;
        position: absolute;
        left: -22px;
        right: -22px;
        top: 50%;
        background: none;
        width: auto;

        -webkit-appearance: none;

        &:focus {
            outline: none;
        }

        &::-webkit-slider-runnable-track {
            background: transparent;
            height: 0px;
        }

        &::-webkit-slider-thumb {
            height: 45px;
            width: 45px;
            margin-top: -22px;

            background-color: var(--color-accent);
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 3l4 4l-4 4m4-4H4m4 14l-4-4l4-4m-4 4h16"/></svg>');
            background-size: 20px;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: var(--border-radius);


            cursor: pointer;
            -webkit-appearance: none;
        }

        &::-moz-range-track {
            background: transparent;
            height: 0px;
        }

        &::-moz-range-thumb {
            border: none;
            height: 45px;
            width: 45px;
            margin-top: -22px;

            background-color: var(--color-background-dark);
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 3l4 4l-4 4m4-4H4m4 14l-4-4l4-4m-4 4h16"/></svg>');
            background-size: 20px;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: var(--border-radius);


            cursor: pointer;
            -webkit-appearance: none;
        }


        &:-moz-focusring {
            outline: none;
        }

        &:focus::-moz-range-track {
            background: transparent;
        }
    }

    >input[type=range].wobble {
        animation-name: sliderWobble;
        animation-duration: 3s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
    }
}

@keyframes sliderWobble {

    35%,
    45% {
        transform: translateX(5px);
    }

    0%,
    30%,
    40%,
    50% {
        transform: translateX(0);
    }
}