@layer components {
    .divider {
        position: relative;
        width: var(--lineWidth);
        height: var(--lineHeight)
    }

    .divider__line {
        width: 100%;
        height: 100%;
        background-color: var(--primary);
        opacity: 1;
        transition-property: opacity;
        transition-duration: var(--durationL);
        transition-timing-function: var(--bezierFastoutSlowin);
        transition-delay: var(--collapseDelay);
        transform-origin: left center;
        transform: scaleX(1)
    }

    @media (prefers-reduced-motion: no-preference) {
        .divider__line {
            transition-property: transform, opacity
        }
    }

    .divider__line[data-collapsed=true] {
        opacity: 0;
        transform: scaleX(0)
    }

    .divider__notch {
        background-color: var(--primary);
        position: absolute;
        transition-property: opacity;
        transition-duration: var(--durationL);
        transition-timing-function: var(--bezierFastoutSlowin);
        transition-delay: var(--collapseDelay);
        opacity: 1;
        clip-path: polygon(0 -1px, 100% -1px, calc(100% - 10px) 100%, 10px 100%);
        width: var(--notchWidth);
        height: var(--notchHeight);
        top: var(--lineHeight)
    }

    @media (prefers-reduced-motion: no-preference) {
        .divider__notch {
            transition-property: clip-path, opacity
        }
    }

    .divider__notch[data-collapsed=true] {
        opacity: 0;
        clip-path: polygon(0 -1px, 0 -1px, 10px 100%, 10px 100%)
    }
}