@use "../../themes/ametrine/sass/abstracts/functions" as *;

.window {
	& > div {
		display: block;
		position: relative;
		margin: 0 auto;
		border: 4rem solid;
		border-image: url("border.gif") 32 repeat;
		image-rendering: pixelated;
		width: min(rpx(300), 100%);
		height: rpx(171);

		#window-contents {
			position: absolute;
			// Get around bulky empty space caused by the image border
			inset: rpx(-32) rpx(-58) rpx(-54) rpx(-58);
			background-color: #faf4f2;
			padding: 1rem;
			overflow: auto;

			@media (prefers-color-scheme: dark) {
				& {
					background-color: #2d2a2e;
				}
			}

			#rainbow-text span {
				display: block;
				animation: rainbow 1.2s steps(1, end) infinite;
				font-weight: var(--font-weight-semi-bold);
				line-height: 0.75rem;
				letter-spacing: -0.05em;

				&:nth-child(1) {
					color: var(--red-fg);
				}

				&:nth-child(2) {
					animation-delay: 0.2s;
					color: var(--orange-fg);
				}

				&:nth-child(3) {
					animation-delay: 0.4s;
					color: var(--yellow-fg);
				}

				&:nth-child(4) {
					animation-delay: 0.6s;
					color: var(--green-fg);
				}

				&:nth-child(5) {
					animation-delay: 0.8s;
					color: var(--blue-fg);
				}

				&:nth-child(6) {
					animation-delay: 1s;
					color: var(--purple-fg);
				}

				@keyframes rainbow {
					from {
						color: var(--red-fg);
					}

					16.66% {
						color: var(--orange-fg);
					}

					33.33% {
						color: var(--yellow-fg);
					}

					50% {
						color: var(--green-fg);
					}

					66.66% {
						color: var(--blue-fg);
					}

					83.33% {
						color: var(--purple-fg);
					}

					// The last step is skipped, which is why it's not set
				}
			}

			small {
				color: var(--fg-color);

				a {
					color: var(--yellow-fg);
					line-height: 1;
					text-decoration-color: hsl(
						var(--yellow-h) var(--yellow-s) var(--yellow-l) /
							var(--disabled-opacity)
					);
				}
			}
		}
	}
}
