/* mod_my_ribbon - แถบสี และริบบิ้นมุมจอ */

/* ------------------------------------------------------------ แถบสี */
.my-ribbon-bar {
	display: flex; align-items: center;
	justify-content: var(--rb-bar-align, center);
	min-height: var(--rb-bar-h, 36px);
	padding: 4px 16px;
	background: var(--rb-bar-bg, #000);
	color: var(--rb-bar-fg, #fff);
	box-sizing: border-box;
	width: 100%;
}
.my-ribbon-bar__text {
	font-family: var(--rb-bar-font, inherit), var(--my-font, inherit), sans-serif;
	font-size: var(--rb-bar-size, 18px);
	font-weight: var(--rb-bar-weight, 700);
	font-style: var(--rb-bar-style, normal);
	line-height: 1.4;
	text-align: var(--rb-bar-align, center);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------- ริบบิ้นมุมจอ */
.my-ribbon {
	position: fixed; z-index: 2147483000;
	width: var(--rb-size, 130px); height: var(--rb-size, 130px);
	pointer-events: none;          /* never in the way of a click */
}
.my-ribbon--tl { top: 0; left: 0; }
.my-ribbon--tr { top: 0; right: 0; }
.my-ribbon--bl { bottom: 0; left: 0; }
.my-ribbon--br { bottom: 0; right: 0; }

.my-ribbon__band { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The drawing is made for the top-left corner; the others mirror it. */
.my-ribbon--tr .my-ribbon__band { transform: scaleX(-1); }
.my-ribbon--bl .my-ribbon__band { transform: scaleY(-1); }
.my-ribbon--br .my-ribbon__band { transform: scale(-1, -1); }

/* The loop sits in the circle and always stands upright. */
.my-ribbon__loop { position: absolute; width: 25%; height: 25%; display: block; }
.my-ribbon--tl .my-ribbon__loop { left: 23%; top: 23%; }
.my-ribbon--tr .my-ribbon__loop { right: 23%; top: 23%; }
.my-ribbon--bl .my-ribbon__loop { left: 23%; bottom: 23%; }
.my-ribbon--br .my-ribbon__loop { right: 23%; bottom: 23%; }

/* Smaller on a phone, where a corner is a larger share of the screen. */
@media (max-width: 640px) {
	.my-ribbon { width: calc(var(--rb-size, 130px) * .65); height: calc(var(--rb-size, 130px) * .65); }
	.my-ribbon--no-phone { display: none; }
	.my-ribbon-bar { padding: 4px 10px; }
	.my-ribbon-bar__text { font-size: calc(var(--rb-bar-size, 18px) * .85); }
}

@media print {
	.my-ribbon { display: none; }
}