@use "../../1-helpers/functions";

.ct-sidebar {
	position: relative;
	z-index: 1;

	// widgets spacing
	.ct-widget {
		color: var(--theme-text-color);

		&:not(:last-child) {
			margin-bottom: var(--sidebar-widgets-spacing, 40px);
		}
	}

	// sticky sidebar
	&[data-sticky='sidebar'],
	.ct-sticky-widgets {
		@include functions.media-breakpoint-up(lg) {
			// prettier-ignore
			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));
		}
	}

	&[data-sticky='widgets'] {
		@include functions.media-breakpoint-up(lg) {
			height: 100%;
		}
	}
}

aside {
	// position: relative;

	// type 2
	&[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);
		}

		&[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);
			}
		}
	}

	// type 4
	&[data-type='type-4'] {
		@include functions.media-breakpoint-down(md) {
			.ct-sidebar {
				padding: var(--sidebar-inner-spacing, 35px);
				background: var(--sidebar-background-color, var(--theme-palette-color-8));
			}
		}
	}
}

// type 3 & 4 helper
@include functions.media-breakpoint-up(lg) {
	aside[data-type='type-3'],
	aside[data-type='type-4'] {
		position: relative;

		&: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-type='type-4'] {
			padding-inline-start: var(--sidebar-inner-spacing, 35px);

			&:after {
				inset-inline-start: 0;
			}
		}
	}

	[data-sidebar='left'] {
		> [data-type='type-3'],
		> [data-type='type-4'] {
			padding-inline-end: var(--sidebar-inner-spacing, 35px);

			&:after {
				inset-inline-end: 0;
			}
		}
	}
}

// type 3 & 4
@include functions.media-breakpoint-up(lg) {
	[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));
	}
}
