﻿[data-sidebar] {
    display: grid;
    grid-template-columns: var(--grid-template-columns, 100%);
    grid-column-gap: var(--sidebar-gap, 4%);
    grid-row-gap: 50px
}

    [data-sidebar] > aside {
        order: var(--sidebar-order)
    }

@media(min-width: 1000px) {
    [data-sidebar=right] {
        --grid-template-columns: minmax(100px, 1fr) var(--sidebar-width, 27%)
    }

    [data-sidebar=left] {
        --sidebar-order: -1;
        --grid-template-columns: var(--sidebar-width, 27%) minmax(100px, 1fr)
    }

        [data-sidebar=left] > section {
            grid-column: 2
        }
}

[data-prefix] div[data-sidebar] > article {
    --has-wide: var(--false);
    --has-boxed-structure: var(--false)
}

.ct-sidebar {
    position: relative;
    z-index: 1
}

    .ct-sidebar .ct-widget {
        color: var(--theme-text-color)
    }

        .ct-sidebar .ct-widget:not(:last-child) {
            margin-bottom: var(--sidebar-widgets-spacing, 40px)
        }

@media(min-width: 1000px) {
    .ct-sidebar[data-sticky=sidebar], .ct-sidebar .ct-sticky-widgets {
        position: sticky;
        top: calc(var(--sidebar-offset, 50px) + var(--admin-bar, 0px) + var(--theme-frame-size, 0px) + var(--header-sticky-height, 0px)*var(--sticky-shrink, 100)/100)
    }
}

@media(min-width: 1000px) {
    .ct-sidebar[data-sticky=widgets] {
        height: 100%
    }
}

aside[data-type=type-2] .ct-sidebar:not([data-widgets=separated]) {
    padding: var(--sidebar-inner-spacing, 35px);
    background: var(--sidebar-background-color, var(--theme-palette-color-8));
    border: var(--theme-border);
    box-shadow: var(--theme-box-shadow);
    border-radius: var(--theme-border-radius)
}

aside[data-type=type-2] .ct-sidebar[data-widgets=separated] .ct-widget {
    padding: var(--sidebar-inner-spacing, 35px);
    background: var(--sidebar-background-color, var(--theme-palette-color-8));
    border: var(--theme-border);
    box-shadow: var(--theme-box-shadow);
    border-radius: var(--theme-border-radius)
}

@media(max-width: 999.98px) {
    aside[data-type=type-4] .ct-sidebar {
        padding: var(--sidebar-inner-spacing, 35px);
        background: var(--sidebar-background-color, var(--theme-palette-color-8))
    }
}

@media(min-width: 1000px) {
    aside[data-type=type-3], aside[data-type=type-4] {
        position: relative
    }

        aside[data-type=type-3]:after, aside[data-type=type-4]:after {
            position: absolute;
            content: "";
            top: var(--sidebar-helper-top, 0);
            height: var(--sidebar-helper-height, 100%)
        }

        aside[data-type=type-3]:after {
            border-right: var(--theme-border)
        }

        aside[data-type=type-4]:after {
            background: var(--sidebar-background-color, var(--theme-palette-color-8));
            width: calc(100% + 30vw)
        }

    [data-sidebar=right] > [data-type=type-3], [data-sidebar=right] > [data-type=type-4] {
        padding-inline-start: var(--sidebar-inner-spacing, 35px)
    }

        [data-sidebar=right] > [data-type=type-3]:after, [data-sidebar=right] > [data-type=type-4]:after {
            inset-inline-start: 0
        }

    [data-sidebar=left] > [data-type=type-3], [data-sidebar=left] > [data-type=type-4] {
        padding-inline-end: var(--sidebar-inner-spacing, 35px)
    }

        [data-sidebar=left] > [data-type=type-3]:after, [data-sidebar=left] > [data-type=type-4]:after {
            inset-inline-end: 0
        }
}

@media(min-width: 1000px) {
    [data-vertical-spacing="top:bottom"] {
        --sidebar-helper-top: calc(var(--theme-content-vertical-spacing) * -1);
        --sidebar-helper-height: calc(100% + var(--theme-content-vertical-spacing) * 2)
    }

    [data-vertical-spacing=top] {
        --sidebar-helper-top: calc(var(--theme-content-vertical-spacing) * -1)
    }

    [data-vertical-spacing=top], [data-vertical-spacing=bottom] {
        --sidebar-helper-height: calc(100% + var(--theme-content-vertical-spacing))
    }
}
