// out: false

// Debugger
pre {
    background-color: #f3f3f3b8;
	border-radius: 5px;
    overflow: hidden;
    padding: @big-gap;
    text-overflow: ellipsis;
}

// Center absolute
.center-absolute {
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.grey {
	filter: grayscale(1);
	opacity: 0.2;
}

.not-found,
.not-gifted,
.not-talked,
.isnt_birthday,
.isnt_festival,
.topic_not_selected,
.not-petted,
.not-met,
.incomplete,
.donated {
	.grey;
}

.unused {
	filter: grayscale(1);
	opacity: 1;
}

.not-hide {
	display: block !important;
}

.no-spoil-title {
	.data-info;
	display: none;
	font-size: @small-fs;
}

// Basic classes
.data {
	color: @primary-fc;
	font-family: @primary-ff;
	font-size: @big-fs;
}

.buttons {
	transform: scale(1);
	transition: transform .2s ease-in-out;

	&:hover {
		cursor: @pointer;
		transform: scale(1.1);
	}
}

.cant_select {
	user-select: none;
}

.modal-window, .modal-opener, .socials, img, .tooltip {
	.cant_select;
}

// Data classes
.data-info {
	color: @primary-fc;
	font-family: @primary-ff;
	font-size: @md-fs;
}

.data-label {
	color: @secondary-fc;
	font-family: @secondary-ff;
	font-size: @xsmall-fs;
	font-weight: 200;
	text-transform: lowercase;
}

.filled-element {	
	background-color: @stardew-bg;
	background-clip: padding-box;
	border: solid 2px @filled-element-bc;
	border-image: url("../../assets/images/content/border_image.png") 15 stretch;
	border-image-outset: 2px;
	border-image-width: 5px;
}

.button-elements {
	.buttons;
	.cant_select;
	.data;
}

.checkbox-elements {
	display: none;

	& ~ .checkmark {
		aspect-ratio: 1/1;
		background-color: @stardew-bg;
		border: solid 3px @checkboxes-bc;
		width: @small-icon;

		img {
			display: none;
			width: 100%;
		}
	}

	&:checked {
		& ~ .checkmark {
			img {
				display: block;
			}
		}
	}
}

.exit {
	cursor: @pointer;
	width: @big-icon;
}

.wiki_link {
	text-decoration: none;
}

// Easter eggs
.fullscreen-image {
	height: 100vh;
    left: -40vw;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
	position: fixed;
    top: 0;
    transition: opacity 1s ease;
    width: 180vw;
    z-index: 2;

	&.show {
		opacity: 1;
	}
}

@keyframes rainbow {
	0% { color: red; }
	16% { color: orange; }
	32% { color: yellow; }
	49% { color: lime; }
	66% { color: cyan; }
	82% { color: violet; }
	90% { color: purple; }
	100% { color: red; }
}