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

// styleline-disable selector-class-pattern
@mixin daff-list-theme($theme) {
	$neutral: daff-get-palette($theme, neutral);
	$base: daff-get-base-color($theme, base);
	$base-contrast: daff-get-base-color($theme, base-contrast);
	$mode: daff-get-theme-mode($theme);

	.daff-list,
	.daff-nav-list {
		color: $base-contrast;
	}

	.daff-nav-list {
		.daff-list-item {
			&::after {
				background-color: $base;
			}

			@include light($mode) {
				&.active {
					&::after {
						background-color: rgba(daff-color($neutral, 20), 0.5);
					}
				}

				@media (hover: hover) {
					&:hover {
						&::after {
							background-color: rgba(daff-color($neutral, 20), 0.5);
						}
					}
				}
			}

			@include dark($mode) {
				&.active {
					&::after {
						background-color: rgba(daff-color($neutral, 20), 0.08);
					}
				}

				@media (hover: hover) {
					&:hover {
						&::after {
							background-color: rgba(daff-color($neutral, 20), 0.08);
						}
					}
				}
			}
		}
	}
}