@forward "../shared/cutout-circles";
@forward "../shared/cutouts";
@forward "../shared/workleaves";
@forward "../shared/workspace";

body {
    --sidedock-inset-border-color: var(--background-secondary);
}

.site-body-left-column {
    background-color: var(--workspace-background);
    padding-right: 10px;
}

// Add the cutout effect to the sidebar but only on bottom corners
.nav-view-outer {
    position: relative;
    flex-grow: 1;
    background-color: var(--workleaves-background);
    -webkit-mask: radial-gradient(
        var(--cutout-corner-radius) at var(--cutout-corner-radius) 100%,
        transparent 100%,
        black
    );
    -webkit-mask-position: calc(-1 * var(--cutout-corner-radius)) calc(-1 * var(--cutout-corner-radius));
    -webkit-mask-repeat: repeat-x;
}

.nav-view-outer::before {
    content: "";
    position: absolute;
    inset: var(--cutout-outline-inset);
    top: 0px;
    background: var(--sidedock-inset-border-color);
    -webkit-mask:
        radial-gradient(
                var(--cutout-corner-radius) at var(--cutout-corner-radius) 100%,
                transparent calc(100% - 1px),
                black calc(100% - 1px) 100%,
                transparent
            )
            calc(-1 * var(--cutout-corner-radius)) calc(-1 * var(--cutout-corner-radius)) / auto repeat-x,
        linear-gradient(90deg, black 2px, transparent 0) -1px 0px / 100% calc(100% - var(--cutout-corner-radius) * 2)
            repeat-x,
        linear-gradient(black 2px, transparent 0) 50% calc(100% - var(--cutout-corner-radius)) /
            calc(100% - var(--cutout-corner-radius) * 2 + 1px) 1px no-repeat;
    pointer-events: none;
}

// Change the scroll element
.nav-view-outer {
    overflow: hidden;
    scrollbar-gutter: auto;
    padding-inline: var(--cutout-outline-inset);
}

.nav-view {
    overflow: auto;
    scrollbar-gutter: stable;
    height: 100%;
    padding-bottom: var(--cutout-corner-radius);
    padding-inline: 4px;
}

// Add the cutout effect to the search bar but only on top corners
.search-view-outer {
    position: relative;
    padding: calc(12px + var(--size-4-2));
    padding-top: 0;
    margin-bottom: -13px;
    background-color: var(--workleaves-background);
    -webkit-mask-image: radial-gradient(
        var(--cutout-corner-radius) at var(--cutout-corner-radius) var(--cutout-corner-radius),
        transparent 100%,
        black
    );
    -webkit-mask-position: calc(-1 * var(--cutout-corner-radius)) calc(-1 * var(--cutout-corner-radius));
    -webkit-mask-repeat: repeat-x;
}

.search-view-outer::before {
    content: "";
    position: absolute;
    inset: var(--cutout-outline-inset);
    bottom: 0;
    background: var(--sidedock-inset-border-color);
    -webkit-mask:
        radial-gradient(
                var(--cutout-corner-radius) at var(--cutout-corner-radius) var(--cutout-corner-radius),
                transparent calc(100% - 1px),
                black calc(100% - 1px) 100%,
                transparent
            )
            calc(-1 * var(--cutout-corner-radius)) calc(-1 * var(--cutout-corner-radius)) / auto repeat-x,
        linear-gradient(90deg, black 2px, transparent 0) -1px 50% / 100%
            calc(100% - var(--cutout-corner-radius) * 2 + 1px) repeat-x,
        linear-gradient(black 2px, transparent 0) 50% -1px / calc(100% - var(--cutout-corner-radius) * 2 + 1px) 100%
            no-repeat;
    pointer-events: none;
}
