/* Scroll Bar */
:root {
    --ui-scroll-brd-rds: 12px; /* { readonly: true } */
    --ui-scroll-w: 0.278rem; /* { readonly: true } */
}

.ui-scroll {
    overflow: auto;
	
	&::-webkit-scrollbar {
	    width: var(--ui-scroll-w) !important;
	    height: calc(var(--ui-scroll-w) * 2) !important;
	}
	
	&::-webkit-scrollbar-thumb {
	    background-color: var(--text-color);
	    border-radius: var(--ui-scroll-brd-rds);
	    border: 0;
	}
	
	&::-webkit-scrollbar-track {
	    background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o));
	    border-radius: var(--ui-scroll-brd-rds);
	    box-shadow: none;
	    opacity: .3;
	}

	&[class*="ht-"] {
		--ui-height: auto;
		max-height: var(--ui-height);
	}
	
	&.ht-10 {
		--ui-height: 10rem;
	}

	&.ht-15 {
		--ui-height: 15rem;
	}

	&.ht-20 {
		--ui-height: 20rem;
	}

}