:root {
	--commandlinkbuttonRadius: var(--buttonRadius);
	--commandlinkbuttonBorderSize: 1px;

	--commandlinkbuttonBorderHot: color-mix(in srgb, var(--accentFirst) 50%, var(--windowBackground));
	--commandlinkbuttonHot: linear-gradient(0deg, color-mix(in srgb, var(--accentFirst) 5%, var(--windowBackground)) 0%, color-mix(in srgb, var(--accentFirst) 3%, var(--windowBackground)) 100%);
	--commandlinkbuttonBorderActive: linear-gradient(0deg, color-mix(in srgb, var(--accentFirst) 90%, black) 0%, var(--accentFirst) 100%);
	--commandlinkbuttonActive: linear-gradient(180deg, color-mix(in srgb, var(--accentFirst) 22%, var(--windowBackground)) 0%, color-mix(in srgb, var(--accentFirst) 2%, var(--windowBackground)) 100%);
	
	--commandlinkbuttonGlyph: #828689;

	--commandlinkbuttonLabelActive: color-mix(in srgb, var(--accentFirst) 75%, black);
}

commandlinkbutton {
	position: relative;
	align-items: start;
	display: flex;
	font-size: 14pt;
	color: var(--buttonLabel);
	padding: 12px 15px;
	font-weight: 600;
	width: 100%;
	border-radius: var(--commandlinkbuttonRadius);
	overflow: hidden;
	transition: color .2s, transform .2s;

	&::before {
		content: '';
		min-width: 15px;
		min-height: 14px;
		background-color: var(--commandlinkbuttonGlyph);
		mask-image: url("chrome://bfwindows/content/wizard/resources/images/commandlinkbutton-glyph.svg");
		mask-position: center;
		mask-repeat: no-repeat;
		margin-right: 11px;
		margin-top: 7px;
		transition: background-color .2s;
	}

	.description {
		font-size: 9pt;
	}

	.states,
	.hover,
	.active {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		&::before {
			content: '';
			position: absolute;
			box-sizing: border-box;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	.states {
		z-index: -1;
		opacity: 0;
		transition: opacity .2s linear;
	}

	.hover,
	.active {
		border-radius: var(--commandlinkbuttonRadius);
	}

	.hover {
		background: var(--commandlinkbuttonBorderHot);
		border: var(--commandlinkbuttonBorderSize) solid transparent;
		padding: var(--commandlinkbuttonBorderSize);

		&::before {
			background: var(--commandlinkbuttonHot);
		}
	}

	.active {
		background: var(--commandlinkbuttonBorderActive);
		border: var(--commandlinkbuttonBorderSize) solid transparent;
		padding: var(--commandlinkbuttonBorderSize);
		opacity: 0;
		transition: opacity .2s linear;

		&::before {
			background: var(--commandlinkbuttonActive);
		}
	}

	&:hover {
		color: var(--accentFirst);

		&::before {
			background-color: var(--accentFirst);
		}

		.states {
			opacity: 1;
		}
	}

	&:active {
		color: var(--commandlinkbuttonLabelActive);
		transform: scale(.98);
		transition: color 0s;

		&::before {
			background-color: var(--commandlinkbuttonLabelActive);
			transition: background-color 0s;
		}

		.states {
			opacity: 1;
		}

		.active {
			opacity: 1;
			transition: opacity 0s linear;
		}
	}
}