@import "../node_modules/delite/css/mixins";
@import "../node_modules/delite/css/variables";

@import "../Button/Button";

.d-toggle-button-styles () {
	.d-button ();
}
.d-toggle-button-checked-styles () {
	.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
	background-color: #ebebeb;
}

// High-contrast mode support: These borders are not visible by default but are visible in high-contrast mode.
.d-toggle-button-a11y () {
	border: dotted 2px transparent; // Normal state (dotted border on icon and label)
}
.d-toggle-button-checked-a11y () {
	border-style: solid; // Toggled state (solid border on icon and label)
}

.d-toggle-button {
	.d-toggle-button-styles ();
	& span {
		.d-toggle-button-a11y ();
	}
	&.d-checked {
		.d-toggle-button-checked-styles ();
		& span {
			.d-toggle-button-checked-a11y ();
		}
	}
}