@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "pkg:iro-design" as iro;

@mixin styles {
	@include bem.component("with-visited-indicator") {
		@include bem.elem("indicator") {
			block-size: 1.4em;
			color: props.get(iro.$core--theme, --text);

			&::after {
				content: "";
				display: block;
				block-size: 100%;
				inline-size: props.get(iro.$core--border-width--thick);
				border-radius: 10em;
				background-color: currentColor;
			}
		}

		&:visited {
			@include bem.elem("indicator") {
				color: props.get(iro.$core--theme, --border-mute);
			}
		}
	}
}