// Тонкий серый слайдер
@mixin type-thin-gray () {

	// Размеры
	$size-slider: 14px;
	$size-thumb: 14px;
	$size-thumb-handle: 4px;
	$size-thumb-padding: 7px;

	& {
		background: $thin-gray-slider-bg;
	}

	.slider__thumb {
		position: relative;
		&:after {
			content: '';
			position: absolute;
			border-radius: $size-thumb-handle / 2;
			background: $thin-gray-thumb-bg;
			transition: background 0.3s ease;
		}
		&:hover,
		&.slider__thumb--pressed {
			&:after {
				background: $thin-gray-thumb-bg-pressed;
			}
		}
	}

	.button-up,
	.button-down {
		display: none;
	}

	// Горизонтальный слайдер
	&[direction="horizontal"] {
		@include flex-row-auto();
		height: $size-slider;

		.slider {
			@include flex-row-max();
		}

		.slider__thumb {
			height: $size-thumb;
			&:after {
				left: $size-thumb-padding;
				right: $size-thumb-padding;
				top: ($size-thumb - $size-thumb-handle) / 2;
				height: $size-thumb-handle;
			}
		}
	}

	// Вертикальный слайдер
	&[direction="vertical"] {
		@include flex-col-auto();
		width: $size-slider;

		.slider {
			@include flex-col-max();
		}

		.slider__thumb {
			width: $size-thumb;
			&:after {
				top: $size-thumb-padding;
				bottom: $size-thumb-padding;
				left: ($size-thumb - $size-thumb-handle) / 2;
				width: $size-thumb-handle;
			}
		}
	}
}