@use '../../scss/theming' as *;

// stylelint-disable selector-class-pattern
@mixin daff-switch-theme($theme) {
	$primary: daff-get-palette($theme, primary);
	$white: daff-get-base-color($theme, 'white');
	$neutral: daff-get-palette($theme, neutral);
	$base-contrast: daff-get-base-color($theme, base-contrast);
	$mode: daff-get-theme-mode($theme);

	.daff-switch {
		$root: '.daff-switch';

		&__label {
			color: $base-contrast;
		}

		&.checked {
			#{$root}__toggle {
				background-color: daff-color($primary);
			}
		}

		@include light($mode) {
			&__toggle {
				background-color: daff-color($neutral, 30);

				&::before {
					background-color: $white;
				}

				&:focus {
					&::after {
						outline: 2px solid rgba($base-contrast, 0.08);
					}
				}
			}
		}

		@include dark($mode) {
			&__toggle {
				background-color: daff-color($neutral, 70);

				&::before {
					background-color: $white;
				}

				&:focus {
					&::after {
						outline: 2px solid rgba($base-contrast, 0.15);
					}
				}
			}
		}
	}
}