// These styles are taken from the WordPress Base Styles package.
// https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/
// There are some small changes to make it work properly with Dart Sass.

// WordPress grays.
$black: #000;
$gray-900: #1e1e1e;
$gray-800: #2f2f2f;
$gray-700: #757575;
$gray-600: #949494;
$gray-400: #ccc;
$gray-300: #ddd;
$gray-200: #e0e0e0;
$gray-100: #f0f0f0;
$white: #fff;

// Grid System.
$grid-unit: 8px;
$grid-unit-05: 0.5 * $grid-unit;	// 4px
$grid-unit-10: 1 * $grid-unit;		// 8px
$grid-unit-15: 1.5 * $grid-unit;	// 12px
$grid-unit-20: 2 * $grid-unit;		// 16px
$grid-unit-30: 3 * $grid-unit;		// 24px
$grid-unit-40: 4 * $grid-unit;		// 32px
$grid-unit-50: 5 * $grid-unit;		// 40px
$grid-unit-60: 6 * $grid-unit;		// 48px
$grid-unit-70: 7 * $grid-unit;		// 56px
$grid-unit-80: 8 * $grid-unit;		// 64px

$radius-small: 2px;
$border-width: 1px;

@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {

	// WebKit
	&::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	&::-webkit-scrollbar-track {
		background-color: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $handle-color;
		border-radius: 8px;
		border: 3px solid transparent;
		background-clip: padding-box;
	}

	&:hover::-webkit-scrollbar-thumb, // This needs specificity.
	&:focus::-webkit-scrollbar-thumb,
	&:focus-within::-webkit-scrollbar-thumb {
		background-color: $handle-color-hover;
	}

	// Firefox 109+ and Chrome 111+
	scrollbar-width: thin;
	scrollbar-gutter: stable both-edges;
	scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color"

	&:hover,
	&:focus,
	&:focus-within {
		scrollbar-color: $handle-color-hover transparent;
	}

	// Needed to fix a Safari rendering issue.
	will-change: transform;

	// Always show scrollbar on Mobile devices.
	@media (hover: none) {

		& {
			scrollbar-color: $handle-color-hover transparent;
		}
	}
}