/* ======================================================
   <!-- Ribbon -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

$ribbon-bg: var(--uix-highlight-color1);
$ribbon-w: 40px;


.uix-ribbon--triangle {
	right: auto;
	left: 0;

	&.uix-ribbon--triangle--style-1 {
		> div {

			&::after {

				left: auto;
				right: 0;
			}

		}
	}


	&.uix-ribbon--triangle--style-2 {

		&::after {
			border-left: inherit;
			border-right: $ribbon-w solid $ribbon-bg;
			left: auto;
			right: 0.25rem;
			transform: rotate(-315deg);
		}

		> div {
			padding: 0 0.5rem 0.25rem 0;
		}

	}



	&.uix-ribbon--triangle--left {
		right: 0;
		left: auto;


		&.uix-ribbon--triangle--style-2 {

			&::after {
				transform: rotate(135deg);
				left: auto;
				right: -0.25rem;
			}

		}



	}


}