@use '../../../variables' as *;

// Colors sourced from DS.scrollbarThumb / scrollbarThumbHover / scrollbarThumbActive (ui.tokens.ts).

.#{$prefix}theme-centurion {
	.#{$prefix}scroll-area {
		--#{$prefix}scroll-area-size: 10px;
		--#{$prefix}scroll-area-margin: 0px;
		--#{$prefix}scroll-area-autohide-margin: 0px;
		--#{$prefix}scroll-area-radius: 0px;
		--#{$prefix}scroll-area-track-color: transparent;
		--#{$prefix}scroll-area-thumb-color: #94a6ca;
		--#{$prefix}scroll-area-thumb-area-hover-color: #b0c1e4;
		--#{$prefix}scroll-area-thumb-hover-color: #c4d5ff;
		--#{$prefix}scroll-area-thumb-active-color: #5f6fa4;
		--#{$prefix}scroll-area-fade-size: 40px;

		--#{$prefix}scroll-area-button-display: block;
		--#{$prefix}scroll-area-button-content: '';
		--#{$prefix}scroll-area-button-size: 17px;
		--#{$prefix}scroll-area-button-bg: transparent;
		--#{$prefix}scroll-area-button-border: 1px solid rgba(255, 255, 255, 0.25);
		--#{$prefix}scroll-area-button-up-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a6ca' d='M7 14l5-5 5 5z'/%3E%3C/svg%3E");
		--#{$prefix}scroll-area-button-down-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a6ca' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
		--#{$prefix}scroll-area-button-left-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a6ca' d='M14 7l-5 5 5 5z'/%3E%3C/svg%3E");
		--#{$prefix}scroll-area-button-right-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/xml' width='17' height='17' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a6ca' d='M10 7l5 5-5 5z'/%3E%3C/svg%3E");

		&.#{$prefix}scroll-area--autohide {
			--#{$prefix}scroll-area-margin: var(--#{$prefix}scroll-area-autohide-margin, 0px) !important;
		}
	}
}