// По умолчанию
@mixin type-default () {

	// Размеры
	$size-slider: 16px;
	$size-thumb: 10px;
	$size-button: 19px;

	// Для горизонтального направления
	$icon-width: 5px;
	$icon-height: 6px;

	& {
		border-radius: 4px;
		background: $default-slider-bg;
	}

	.slider__thumb {
		border-radius: $size-thumb / 2;
		background: $default-thumb-bg;
		box-shadow: $default-thumb-shadow;
		transition: box-shadow 0.3s ease;
		&:hover,
		&.slider__thumb--pressed {
			box-shadow: $default-thumb-shadow-hover;
		}
	}

	.button-up,
	.button-down {
		background: $default-slider-bg;
		transition: background 0.2s ease;
		&:hover {
			background: $default-slider-bg-hover;
		}
		&:after {
			transition: border 0.2s ease;
		}
	}

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

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

		.slider__thumb {
			height: $size-thumb;
		}

		.button-up,
		.button-down {
			width: $size-button;
		}

		.button-up {
			&:after {
				border-top: solid $icon-height / 2 transparent;
				border-bottom: solid $icon-height / 2 transparent;
				border-right: solid $icon-width $default-button-icon;
			}
			&:hover:after {
				border-right: solid $icon-width $default-button-icon-hover;
			}
		}

		.button-down {
			&:after {
				border-top: solid $icon-height / 2 transparent;
				border-bottom: solid $icon-height / 2 transparent;
				border-left: solid $icon-width $default-button-icon;
			}
			&:hover:after {
				border-left: solid $icon-width $default-button-icon-hover;
			}
		}
	}

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

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

		.slider__thumb {
			width: $size-thumb;
		}

		.button-up,
		.button-down {
			height: $size-button;
		}

		.button-up {
			&:after {
				border-left: solid $icon-height / 2 transparent;
				border-right: solid $icon-height / 2 transparent;
				border-bottom: solid $icon-width $default-button-icon;
			}
			&:hover:after {
				border-bottom: solid $icon-width $default-button-icon-hover;
			}
		}

		.button-down {
			&:after {
				border-left: solid $icon-height / 2 transparent;
				border-right: solid $icon-height / 2 transparent;
				border-top: solid $icon-width $default-button-icon;
			}
			&:hover:after {
				border-top: solid $icon-width $default-button-icon-hover;
			}
		}
	}
}