carousel-slider {
    display: grid !important;
    box-sizing: border-box;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    position: relative;

    &:not(:has(*)) {
        display: none !important;
    }

    & > * {
        max-width: inherit;
        width: inherit;
        min-width: inherit;
        max-height: inherit;
        height: inherit;
        min-height: inherit;
        overflow: hidden;
    }


    & * {
        box-sizing: border-box;
    }

    &::part(left) {
        grid-row: 1 / span 3;
        grid-column: 1;
        font-size: 2rem;
        margin-left: 10px;
        place-self: center;
        border: none;
        outline: none;
        background-color: transparent;
        cursor: pointer;
        font: var(--fa-font-solid);
        font-size: 2rem;
        z-index: 2;
        color: white;
        text-shadow: 0 0 3px black;
        &::after {
            content: "\f053"
        }
    }

    &::part(right) {
        grid-row: 1 / span 3;
        grid-column: 3;
        font-size: 2rem;
        margin-right: 10px;
        place-self: center;
        border: none;
        outline: none;
        background-color: transparent;
        cursor: pointer;
        font: var(--fa-font-solid);
        font-size: 2rem;
        z-index: 2;
        color: white;
        text-shadow: 0 0 3px black;
        &::after {
            content: "\f054"
        }
    }

    &:not([contenteditable=true])[marker=off], &:not([contenteditable=true])[marker=false] {
        &::part(left) {
            display: none;
        }
        &::part(right) {
            display: none;
        }

    }

    &::part(canvas) {
        grid-row: 1 / span 3 ;
        grid-column: 1 / span 3;
        display: grid;
        position: relative;
        grid: repeat(1, 1fr) / auto-flow 100%;
        column-gap: 10px;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: none;
        max-height: inherit;
        max-width: inherit;
        /* width: inherit;
        height: inherit; */
        min-width: inherit;
        min-height: inherit;
    }

    &::part(child) {
        grid-row: 1;
        display: block;
        cursor: grab;
        min-width: 100%;
        max-height: inherit;
        max-width: inherit;
        width: inherit;
        height: inherit;
        min-width: inherit;
        min-height: inherit;
    }

    &:not([scrolling]) {

        &::part(canvas) {
            scroll-snap-type: x mandatory;
        }

        &::part(child) {
            scroll-snap-align: center;
            scroll-snap-stop: always;
        }
    }

    &::part(indicator) {
        grid-row: 3 ;
        grid-column: 2;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px;
        min-height: 30px;
        z-index: 2;
    }

    &::part(circle) {
        cursor: pointer;
        font-size: 0.6rem;
        text-shadow: 0 0 9px #0000008f;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-color: currentColor;
        -webkit-text-stroke-width: 1px;
        &::before {
            content: "⚫";
        }
    }
    &::part(active)::before {
        content: "⚪";    
    }

    &[hide-indicators=yes], &[hide-indicators=true] {
        &::part(left), &::part(right) {
            display: none;
        }
        &::part(circle), &::part(indicator) {
            display: none;
        }
    }

}

body[editing] carousel-slider {

    &[hide-indicators=yes], &[hide-indicators=true] {
        &::part(left), &::part(right) {
            display: inline-block;
            opacity: 0.5;
            z-index: 2000;
        }
    }

    &::part(indicator) {
        z-index: 2000;
    }
}