@use 'variables';

/// Mixin used to redefine css variable for different size of slider
/// In particular the size bar and the size of the handle
/// The offset is used to add some space between the text and the slider
@mixin setSliderSize($barSize, $handleSize, $fontSize, $offset, $tickPrimarySize, $tickSecondarySize) {
	--#{variables.$prefix}slider-font-size: #{$fontSize};
	--#{variables.$prefix}slider-border-radius: calc(#{$barSize} / 2);

	--#{variables.$prefix}slider-secondary-size: #{$barSize};

	--#{variables.$prefix}slider-horizontal-margin-block-with-labels: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
	--#{variables.$prefix}slider-horizontal-margin-block-no-labels: calc((#{$handleSize} - #{$barSize}) * 0.75);
	--#{variables.$prefix}slider-vertical-margin-inline-no-labels: calc((#{$handleSize} - #{$barSize}) * 0.75);
	--#{variables.$prefix}slider-vertical-margin-inline-with-labels: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});

	--#{variables.$prefix}slider-handle-size: #{$handleSize};
	--#{variables.$prefix}slider-tick-primary-size: #{$tickPrimarySize};
	--#{variables.$prefix}slider-tick-secondary-size: #{$tickSecondarySize};

	--#{variables.$prefix}slider-padding: calc(#{$handleSize} / 2);

	--#{variables.$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
	--#{variables.$prefix}slider-tick-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$tickPrimarySize} - #{$barSize}) / 2));
	--#{variables.$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
}

.au-slider {
	// scss-docs-start slider-css-vars
	--#{variables.$prefix}slider-background-color: #{variables.$au-slider-color-background};
	--#{variables.$prefix}slider-font-size: #{variables.$au-slider-font-size};
	--#{variables.$prefix}slider-border-radius: #{variables.$au-slider-border-radius};
	--#{variables.$prefix}slider-line-height: #{variables.$au-slider-line-height};

	--#{variables.$prefix}slider-primary-size: #{variables.$au-slider-primary-size};
	--#{variables.$prefix}slider-secondary-size: #{variables.$au-slider-secondary-size};
	--#{variables.$prefix}slider-horizontal-margin-block-with-labels: #{variables.$au-slider-horizontal-margin-block-with-labels};
	--#{variables.$prefix}slider-horizontal-margin-block-no-labels: #{variables.$au-slider-horizontal-margin-block-no-labels};
	--#{variables.$prefix}slider-vertical-margin-inline-no-labels: #{variables.$au-slider-vertical-margin-inline-no-labels};
	--#{variables.$prefix}slider-vertical-margin-inline-with-labels: #{variables.$au-slider-vertical-margin-inline-with-labels};
	--#{variables.$prefix}slider-translate-vertical: #{variables.$au-slider-translate-vertical};
	--#{variables.$prefix}slider-translate-horizontal: #{variables.$au-slider-translate-horizontal};
	--#{variables.$prefix}slider-padding: #{variables.$au-slider-padding};

	--#{variables.$prefix}slider-handle-color: #{variables.$au-slider-handle-color};
	--#{variables.$prefix}slider-handle-hover-color: #{variables.$au-slider-handle-hover-color};
	--#{variables.$prefix}slider-handle-size: #{variables.$au-slider-handle-size};
	--#{variables.$prefix}slider-handle-border: #{variables.$au-slider-handle-border};
	--#{variables.$prefix}slider-handle-border-hover: #{variables.$au-slider-handle-border-hover};
	--#{variables.$prefix}slider-handle-border-radius: #{variables.$au-slider-handle-border-radius};
	--#{variables.$prefix}slider-handle-outline: #{variables.$au-slider-handle-outline};
	--#{variables.$prefix}slider-handle-focus-box-shadow: #{variables.$au-slider-handle-focus-box-shadow};
	--#{variables.$prefix}slider-handle-focus-hover-box-shadow: #{variables.$au-slider-handle-focus-hover-box-shadow};

	--#{variables.$prefix}slider-tick-primary-size: #{variables.$au-slider-tick-primary-size};
	--#{variables.$prefix}slider-tick-secondary-size: #{variables.$au-slider-tick-secondary-size};

	--#{variables.$prefix}slider-tick-neutral-color: #{variables.$au-slider-tick-neutral-color};
	--#{variables.$prefix}slider-tick-selected-color: #{variables.$au-slider-tick-selected-color};
	--#{variables.$prefix}slider-tick-disabled-color: #{variables.$au-slider-tick-disabled-color};
	--#{variables.$prefix}slider-tick-fill-color: #{variables.$au-slider-tick-fill-color};

	--#{variables.$prefix}slider-tick-label-translate-vertical: #{variables.$au-slider-tick-label-translate-vertical};

	--#{variables.$prefix}slider-progress-color: #{variables.$au-slider-progress-color};
	--#{variables.$prefix}slider-progress-height: #{variables.$au-slider-progress-height};
	--#{variables.$prefix}slider-progress-vertical-transform: #{variables.$au-slider-progress-vertical-transform};

	--#{variables.$prefix}slider-label-margin-block-start: #{variables.$au-slider-label-margin-block-start};
	--#{variables.$prefix}slider-label-font-weight: #{variables.$au-slider-label-font-weight};
	--#{variables.$prefix}slider-label-now-font-weight: #{variables.$au-slider-label-now-font-weight};

	--#{variables.$prefix}slider-label-min-position: #{variables.$au-slider-label-min-position};
	--#{variables.$prefix}slider-label-max-position: #{variables.$au-slider-label-max-position};
	--#{variables.$prefix}slider-label-now-transform: #{variables.$au-slider-label-now-transform};

	--#{variables.$prefix}slider-label-vertical-margin-inline-start: #{variables.$au-slider-label-vertical-margin-inline-start};
	--#{variables.$prefix}slider-label-vertical-min-transform: #{variables.$au-slider-label-vertical-min-transform};
	--#{variables.$prefix}slider-label-vertical-max-transform: #{variables.$au-slider-label-vertical-max-transform};
	--#{variables.$prefix}slider-label-vertical-white-space: #{variables.$au-slider-label-vertical-white-space};
	--#{variables.$prefix}slider-label-vertical-min-top: #{variables.$au-slider-label-vertical-min-top};
	--#{variables.$prefix}slider-label-vertical-max-top: #{variables.$au-slider-label-vertical-max-top};
	--#{variables.$prefix}slider-label-vertical-now-transform: #{variables.$au-slider-label-vertical-now-transform};

	--#{variables.$prefix}slider-clickable-area-main-size: #{variables.$au-slider-clickable-area-main-size};
	--#{variables.$prefix}slider-clickable-area-secondary-size: #{variables.$au-slider-clickable-area-secondary-size};
	--#{variables.$prefix}slider-clickable-area-translate: #{variables.$au-slider-clickable-area-translateY};
	--#{variables.$prefix}slider-clickable-area-vertical-translate: #{variables.$au-slider-clickable-area-translateX};
	--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink: #{variables.$au-slider-clickable-area-vertical-flex-shrink};
	--#{variables.$prefix}slider-clickable-area-cursor: #{variables.$au-slider-clickable-area-cursor};

	--#{variables.$prefix}slider-disabled-background-color: #{variables.$au-slider-disabled-background-color};
	--#{variables.$prefix}slider-disabled-color: #{variables.$au-slider-disabled-color};
	--#{variables.$prefix}slider-disabled-cursor: #{variables.$au-slider-disabled-cursor};
	// scss-docs-end slider-css-vars

	height: 100%;

	&.au-slider-horizontal {
		padding-inline: var(--#{variables.$prefix}slider-padding);
	}

	&.au-slider-vertical {
		padding-block: var(--#{variables.$prefix}slider-padding);
	}

	&.au-slider-lg {
		@include setSliderSize(
			variables.$au-slider-bar-size-lg,
			variables.$au-slider-handle-size-lg,
			variables.$au-slider-font-size-lg,
			variables.$au-slider-offset-lg,
			variables.$au-slider-tick-primary-size-lg,
			variables.$au-slider-tick-secondary-size-lg
		);
	}

	&.au-slider-sm {
		@include setSliderSize(
			variables.$au-slider-bar-size-sm,
			variables.$au-slider-handle-size-sm,
			variables.$au-slider-font-size-sm,
			variables.$au-slider-offset-sm,
			variables.$au-slider-tick-primary-size-sm,
			variables.$au-slider-tick-secondary-size-sm
		);
	}

	.au-slider-content {
		display: flex;
		background-color: var(--#{variables.$prefix}slider-background-color);
		border-radius: var(--#{variables.$prefix}slider-border-radius);
		font-size: var(--#{variables.$prefix}slider-font-size);
		line-height: var(--#{variables.$prefix}slider-line-height);
		position: relative;

		&.au-slider-horizontal {
			width: var(--#{variables.$prefix}slider-primary-size);
			height: var(--#{variables.$prefix}slider-secondary-size);
			margin-block-start: var(--#{variables.$prefix}slider-horizontal-margin-block-no-labels);
			margin-block-end: var(--#{variables.$prefix}slider-horizontal-margin-block-no-labels);
			&.au-slider-with-labels {
				margin-block-start: var(--#{variables.$prefix}slider-horizontal-margin-block-with-labels);
			}
			.au-slider-handle-horizontal {
				top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
				transform: var(--#{variables.$prefix}slider-translate-horizontal);
			}
			.au-slider-tick-horizontal {
				top: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
				transform: var(--#{variables.$prefix}slider-translate-horizontal);
			}
		}

		&.au-slider-vertical {
			height: var(--#{variables.$prefix}slider-primary-size);
			width: var(--#{variables.$prefix}slider-secondary-size);
			margin-inline-start: var(--#{variables.$prefix}slider-vertical-margin-inline-no-labels);
			margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-with-labels);
			&.au-slider-with-labels {
				margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-with-labels);
			}
			.au-slider-handle-vertical {
				left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
				transform: var(--#{variables.$prefix}slider-translate-vertical);
			}
			.au-slider-tick-vertical {
				left: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
				transform: var(--#{variables.$prefix}slider-translate-vertical);
			}
		}

		.au-slider-handle {
			background-color: var(--#{variables.$prefix}slider-handle-color);
			border: var(--#{variables.$prefix}slider-handle-border);
			border-radius: var(--#{variables.$prefix}slider-handle-border-radius);
			outline: var(--#{variables.$prefix}slider-handle-outline);
			position: absolute;
			width: var(--#{variables.$prefix}slider-handle-size);
			height: var(--#{variables.$prefix}slider-handle-size);

			&:not([disabled]):hover {
				border: var(--#{variables.$prefix}slider-handle-border-hover);
				background-color: var(--#{variables.$prefix}slider-handle-hover-color);
				&:focus-visible {
					box-shadow: var(--#{variables.$prefix}slider-handle-focus-hover-box-shadow);
				}
			}
			&:focus-visible {
				box-shadow: var(--#{variables.$prefix}slider-handle-focus-box-shadow);
			}
		}

		.au-slider-tick {
			position: absolute;
			height: var(--#{variables.$prefix}slider-tick-primary-size);
			width: var(--#{variables.$prefix}slider-tick-secondary-size);
			cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);

			// center align the svg along the slider axis
			svg {
				display: block;
				width: var(--#{variables.$prefix}slider-tick-secondary-size);
				height: var(--#{variables.$prefix}slider-tick-primary-size);
				fill: none;

				circle {
					cx: 50%;
					cy: 50%;
					fill: var(--#{variables.$prefix}slider-tick-fill-color);

					&.au-slider-tick-outer {
						r: 45%;
						stroke: var(--#{variables.$prefix}slider-tick-neutral-color);
						stroke-width: 1.5;

						&.au-slider-tick-disabled {
							stroke: var(--#{variables.$prefix}slider-tick-disabled-color);
						}
					}

					&.au-slider-tick-selected {
						&.au-slider-tick-outer {
							fill: var(--#{variables.$prefix}slider-tick-selected-color);
							stroke: none;
							r: 50%;

							&.au-slider-tick-disabled {
								fill: var(--#{variables.$prefix}slider-tick-disabled-color);
							}
						}

						&.au-slider-tick-inner {
							r: 25%;
						}
					}
				}
			}
		}

		.au-slider-tick-label {
			position: absolute;
			text-wrap: nowrap;
			transform: var(--#{variables.$prefix}slider-translate-horizontal);
			margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
		}

		.au-slider-tick-label-vertical {
			position: absolute;
			margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
			transform: var(--#{variables.$prefix}slider-tick-label-translate-vertical);
		}

		.au-slider-tick-label-now {
			font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
		}

		.au-slider-progress {
			background-color: var(--#{variables.$prefix}slider-progress-color);
			border-radius: var(--#{variables.$prefix}slider-border-radius);
			position: absolute;
		}

		.au-slider-progress-vertical {
			transform: var(--#{variables.$prefix}slider-progress-vertical-transform);
		}

		.au-slider-label {
			font-weight: var(--#{variables.$prefix}slider-label-font-weight);
			margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
			position: absolute;
			text-wrap: nowrap;

			&.au-slider-label-min:not(.au-slider-rtl) {
				left: var(--#{variables.$prefix}slider-label-min-position);
			}

			&.au-slider-label-min.au-slider-rtl {
				right: var(--#{variables.$prefix}slider-label-max-position);
			}

			&.au-slider-label-max:not(.au-slider-rtl) {
				right: var(--#{variables.$prefix}slider-label-max-position);
			}

			&.au-slider-label-max.au-slider-rtl {
				left: var(--#{variables.$prefix}slider-label-min-position);
			}

			&.au-slider-label-now {
				font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
				transform: var(--#{variables.$prefix}slider-label-now-transform);
			}

			&.invisible {
				visibility: hidden;
			}
		}

		.au-slider-label-vertical {
			position: absolute;
			margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
			white-space: var(--#{variables.$prefix}slider-label-vertical-white-space);

			&.au-slider-label-vertical-min:not(.au-slider-rtl) {
				top: var(--#{variables.$prefix}slider-label-vertical-min-top);
				transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
			}

			&.au-slider-label-vertical-min.au-slider-rtl {
				top: var(--#{variables.$prefix}slider-label-vertical-max-top);
				transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
			}

			&.au-slider-label-vertical-max:not(.au-slider-rtl) {
				top: var(--#{variables.$prefix}slider-label-vertical-max-top);
				transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
			}

			&.au-slider-label-vertical-max.au-slider-rtl {
				top: var(--#{variables.$prefix}slider-label-vertical-min-top);
				transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
			}

			&.au-slider-label-vertical-now {
				transform: var(--#{variables.$prefix}slider-label-vertical-now-transform);
			}
		}

		.au-slider-clickable-area {
			height: var(--#{variables.$prefix}slider-clickable-area-main-size);
			width: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
			transform: var(--#{variables.$prefix}slider-clickable-area-translate);
			cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
		}

		.au-slider-clickable-area-vertical {
			width: var(--#{variables.$prefix}slider-clickable-area-main-size);
			height: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
			transform: var(--#{variables.$prefix}slider-clickable-area-vertical-translate);
			flex-shrink: var(--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink);
			cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
		}

		.au-slider-clickable-area-with-ticks {
			cursor: default;
		}

		&.disabled {
			cursor: var(--#{variables.$prefix}slider-disabled-cursor);
			background-color: var(--#{variables.$prefix}slider-disabled-background-color);

			.au-slider-label,
			.au-slider-label-vertical,
			.au-slider-tick-label,
			.au-slider-tick-label-vertical {
				color: var(--#{variables.$prefix}slider-disabled-color);
			}
			.au-slider-progress,
			.au-slider-handle {
				background-color: var(--#{variables.$prefix}slider-disabled-color);
				cursor: var(--#{variables.$prefix}slider-disabled-cursor);
			}
			.au-slider-clickable-area,
			.au-slider-clickable-area-vertical,
			.au-slider-tick {
				cursor: var(--#{variables.$prefix}slider-disabled-cursor);
			}
		}
	}
}
