Price tags (scss)

by PhilQ

HTML

<div class="price-tag1">€ 58,60</div>
<br/>
<br/>
<div class="price-tag">€ 58,60</div>&nbsp;&nbsp;<div class="price-tag price-tag-left">€ 58,60</div>
<br/>
<br/>
<div class="price-tag swivel-down">€ 58,60</div>&nbsp;&nbsp;<div class="price-tag price-tag-left swivel-down">€ 58,60</div>
<br/>
<br/>
<div class="price-tag swiveled">€ 58,60</div>&nbsp;&nbsp;<div class="price-tag price-tag-left swiveled">€ 58,60</div>
<br/>
<br/>
<div class="price-tag swivel-down swiveled">€ 58,60</div>&nbsp;&nbsp;<div class="price-tag price-tag-left swivel-down swiveled">€ 58,60</div>

SCSS

*, :before, :after { margin: 0; padding: 0; box-sizing: border-box; }

body { padding: 3em; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 18px; }

.price-tag1 {
  background: #058;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875em;
	font-weight: bold;
  height: 36px;
  line-height: 35px;
  margin-right: 1em;
  padding: 0 0.666em;
  position: relative;
  text-align: center;

	&:before {
		background: inherit;
		border-radius: 6px;
		display: block;
		content: "";
		width: 28px;
		height: 28px;
		position: absolute;
		right: -9px;
		top: 4px;
		-ms-transform: rotate(45deg); /* IE 9 */
		-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
		transform: rotate(45deg);
		z-index: -1;
	}
	&:after {
		display: block;
		content: "";
		width: 6px;
		height: 6px;
		position: absolute;
		left: calc(100% - 3px);
		top: calc(50% - 3px);
		border-radius: 50%;
		background-color: #fff;
	}

	&:hover {
		background: #07b;
	}
}

.price-tag {
	$paper-light: #e7d5b1;
	$paper-dark: #cab591; // #d3c2a4;
	$padding-top: 0.7em;
	$padding-bottom: 0.8em;
	$font-size: 1em;

	--vhw-price-tag-direction: 1;
	--vhw-price-tag-swivel: 15deg;
	position: relative;
	display: inline-block;
	font-size: $font-size;
	line-height: 1;
	padding: $padding-top calc(0.6em + 8px) $padding-bottom 0.75em;
	margin-right: 0.75em;
	background-color: $paper-light;
	//border-left: 6px solid $paper-dark;
	color: #72594f; //795548;
	cursor: pointer;
	font-weight: bold;
	transform-origin: right center;
	transform: rotate(0deg);
	transition: transform 0.15s ease;
	
	&.price-tag-left {
		--vhw-price-tag-direction: -1;
		padding: $padding-top 0.75em $padding-bottom calc(0.6em + 8px);
		margin-right: 0;
		margin-left: 0.75em;
		//border-right: 6px solid $paper-dark;
		transform-origin: left...