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

.#{$prefix}theme-fci {
	.#{$prefix}scroll-area {
		--#{$prefix}scroll-area-size: 8px;
		--#{$prefix}scroll-area-margin: 3px;
		--#{$prefix}scroll-area-autohide-margin: 4px;
		--#{$prefix}scroll-area-radius: 10px;
		--#{$prefix}scroll-area-track-color: transparent;
		--#{$prefix}scroll-area-thumb-color: rgba(0, 0, 0, 0.2);
		--#{$prefix}scroll-area-thumb-area-hover-color: rgba(0, 0, 0, 0.28);
		--#{$prefix}scroll-area-thumb-hover-color: rgba(0, 0, 0, 0.35);
		--#{$prefix}scroll-area-thumb-active-color: rgba(0, 0, 0, 0.5);
		--#{$prefix}scroll-area-fade-size: 40px;

		--#{$prefix}scroll-area-button-display: block;
		--#{$prefix}scroll-area-button-content: '';
		--#{$prefix}scroll-area-button-size: 16px;
		--#{$prefix}scroll-area-button-bg: transparent;
		--#{$prefix}scroll-area-button-border: none;
		--#{$prefix}scroll-area-button-up-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' 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='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' 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='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' 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/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' d='M10 7l5 5-5 5z'/%3E%3C/svg%3E");
	}
}