@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;

.brandui-ribbon {
	z-index: 100;
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	width: 9.375rem;
	height: 9.375rem;

	&::before,
	&::after {
		z-index: -1;
		border-style: solid;
		border-width: 0.315rem;
		position: absolute;
		display: block;
		content: '';
		border-color: var(--ui-soft);
	}

	span {
		display: block;
		position: absolute;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: var(--padding-extra-small) var(--padding-extra-large)
			var(--padding-extra-small) 1.875rem;
		width: 14.063rem;

		@include font.get-typography(mini-header-small);
	}

	&.top-left,
	&.bottom-right {
		span {
			transform: rotate(-45deg);
		}
	}

	&.top-right,
	&.bottom-left {
		span {
			transform: rotate(45deg);
		}
	}

	&.top-left {
		top: -0.625rem;
		left: -0.625rem;

		&::before,
		&::after {
			border-top-color: transparent;
			border-left-color: transparent;
		}

		&::before {
			top: 0;
			right: 0;
		}

		&::after {
			bottom: 0;
			left: 0;
		}

		span {
			right: -1.813rem;
			top: 2.25rem;
		}
	}

	&.top-right {
		top: -0.625rem;
		right: -0.625rem;

		&::before,
		&::after {
			border-top-color: transparent;
			border-right-color: transparent;
		}

		&::before {
			top: 0;
			left: 0;
		}

		&::after {
			bottom: 0;
			right: 0;
		}

		span {
			padding-left: 3.75rem;
			left: -1.813rem;
			top: 2.25rem;
		}
	}

	&.bottom-left {
		bottom: -0.625rem;
		left: -0.625rem;

		&::before,
		&::after {
			border-bottom-color: transparent;
			border-left-color: transparent;
		}

		&::before {
			bottom: 0;
			right: 0;
		}

		&::after {
			top: 0;
			left: 0;
		}

		span {
			right: -1.813rem;
			bottom: 2.25rem;
		}
	}

	&.bottom-right {
		bottom: -0.625rem;
		right: -0.625rem;

		&::before,
		&::after {
			border-bottom-color: transparent;
			border-right-color: transparent;
		}

		&::before {
			bottom: 0;
			left: 0;
		}

		&::after {
			top: 0;
			right: 0;
		}

		span {
			padding-left: 3.75rem;
			left: -1.813rem;
			bottom: 2.25rem;
		}
	}
}