
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.a4a-slider {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;

	@include break-medium {
		flex-direction: row;
		gap: 24px;
	}
}

.a4a-slider__input {
	position: relative;
	flex-grow: 1;
	margin-block-start: -16px;

	@include break-medium {
		margin-block-start: 0;
	}
}

.a4a-slider__input [type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	height: 50px;
	width: 100%;
	margin: 0;
	padding: 0;

	&:read-only::-webkit-slider-thumb {
		cursor: default;
	}

	&:read-only::-moz-range-thumb {
		cursor: default;
	}

	@mixin slider-track-style {
		background: var(--color-primary-40);
		height: 6px;
		border-radius: 4px;
	}

	@mixin slider-thumb-style {
		-webkit-appearance: none;
		appearance: none;
		background-color: var(--color-surface-backdrop);
		height: 16px;
		width: 16px;
		border-radius: 50%;
		border: 2.62px solid var(--color-border-light);
		margin-block-start: -5px;
		cursor: pointer;
		z-index: 2;
	}

	&::-webkit-slider-runnable-track {
		@include slider-track-style;
	}

	&::-moz-range-track {
		@include slider-track-style;
	}

	&::-webkit-slider-thumb {
		@include slider-thumb-style;
	}

	&::-moz-range-thumb {
		@include slider-thumb-style;
	}
}

.a4a-slider__marker-container {
	position: relative;
	margin-block-start: -24px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.a4a-slider__marker {
	width: 16px;
	max-width: 16px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.a4a-slider__marker-line {
	height: 10px;
	width: 0.5px;
	background-color: var(--color-neutral-10);
}

.a4a-slider__label-container {
	display: flex;
	flex-direction: row;
	text-align: left;
	align-content: center;
	gap: 6px;

	@include break-medium {
		display: block;
		text-align: right;
	}
}

.a4a-slider__sub {
	margin-block-start: 0;

	@include break-medium {
		margin-block-start: 4px;
	}
}

.a4a-slider__label,
.a4a-slider__sub,
.a4a-slider__marker {
	@include heading-medium;
}


.a4a-slider__sub,
.a4a-slider__marker-sub {
	color: var(--color-success);
}

.a4a-slider__number-input {
	-webkit-appearance: none; /* Safari and Chrome */
	-moz-appearance: textfield; /* Firefox */
	appearance: textfield; /* Other browsers */
	width: 2rem;
	align-self: baseline;
	text-align: center;
	border: 1px solid var(--color-neutral-5);
	border-radius: 4px;
	min-height: 36px;
	position: relative;
}

.a4a-slider__number-input::-webkit-inner-spin-button,
.a4a-slider__number-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.a4a-slider__input-disabled-area {
	min-height: 6px;
	width: 0;
	background-color: var(--color-primary-0);
	position: absolute;
	top: 22px;
	left: -1px;
	border-radius: 4px 0 0 4px;
}
