@use '../../../../shared/utils/token/css/semantic-color';
@use '../../../../shared/utils/token/css/semantic-dimension';

.a-box {
	position: relative;
	margin: 2rem 0 2rem 2rem;
	padding: 2rem 2rem 1.5rem;
	color: semantic-color.$color-area-foreground;
	background-color: semantic-color.$color-area-background;
	min-height: 5em;

	&::after {
		content: '';
		display: block;
		position: absolute;
		left: -4rem;
		top: 0;
		width: 0;
		height: 0;

		border-bottom: 2rem solid transparent;
		border-left: 2rem solid transparent;
		border-right: 2rem solid semantic-color.$color-area-background;
	}

	a {
		padding: 0.5em 0;
		color: inherit;
	}
}

// inline mixin examples
@mixin box-mixin() {
	display: block;
}
/* stylelint-disable-next-line no-duplicate-selectors */
.a-box {
	@include box-mixin();
}
@mixin box-mixin-alternative($display: block) {
	display: $display;
}
/* stylelint-disable-next-line no-duplicate-selectors */
.a-box {
	@include box-mixin-alternative();
	@include box-mixin-alternative(block);
}