@import url('reset.css');
@import url('alert.css');
@import url('badge.css');
@import url('link.css');
@import url('button.css');
@import url('card.css');
@import url('input.css');
@import url('progress.css');
@import url('tab.css');
@import url('navbar.css');
@import url('heading.css');
@import url('text.css');
@import url('layout.css');
@import url('accordion.css');
@import url('nav.css');
@import url('page.css');
@import url('table.css');
@import url('modal.css');
@import url('border.css');
@import url('margin.css');
@import url('padding.css');

:root {
	--brand: #1D8571;
	--red: #A03030;
	--orange: #DC974D;
	--white: #F8FCFB;
	--gray: #a7abab;
	--light-black: #1b1c1c;
	--black: #0e1010;
}

::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5rem;
}

::-webkit-scrollbar-track {
	background-color: var(--light-black);
}

::-webkit-scrollbar-thumb {
	border-radius: 0.25rem;
	background-color: var(--brand);
}

::-webkit-scrollbar-corner {
	background-color: var(--light-black);
}

body {
	color: var(--white);
	font-size: 1rem;
	font-family: 'DM Sans', serif;
	background-color: var(--black);
}

::selection {
	color: var(--white);
	background-color: var(--brand);
}

.background--primary {
	background-color: var(--brand);
}

.background--danger {
	background-color: var(--red);
}

.background--warning {
	background-color: var(--orange);
}

.background--light {
	background-color: var(--white);
}

.background--dark {
	background-color: var(--black);
}

.background--gray {
	background-color: var(--gray);
}

.tooltip {
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 0.25rem 0.5rem;
	border: 0.075rem solid hsl(from var(--white) h s l / 0.1);
	border-radius: 0.25rem;
	font-size: 0.75rem;
	background-color: var(--light-black);
	transform: translateX(-50%);
}

.lightbox {
	display: flex;
	position: fixed;
	top: 0px;
	left: 0px;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	cursor: pointer;
	background-color: hsl(from var(--black) h s l / 0.75);
}

.lightbox__image {
	width: 90vw;
	height: 90vh;
	object-fit: contain;
}

p,
.paragraph {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

hr,
.horizontal {
	border-color: hsl(from var(--white) h s l / 0.25);
}

.collapse__content--collapsed {
	display: none;
}

.images__button {
	margin-bottom: 1rem;
}

.images__previews {
	display: flex;
	min-height: 7.15rem;
	padding: 0.5rem;
	border: 0.075rem solid hsl(from var(--white) h s l / 0.1);
	border-radius: 0.25rem;
	gap: 0.5rem;
}

.preview {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	width: 6rem;
	height: 6rem;
	border: 0.075rem solid hsl(from var(--white) h s l / 0.1);
	border-radius: 0.25rem;
}

.preview__image {
	width: 100%;
}

.preview__button {
	display: flex;
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	justify-content: center;
	align-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 0.075rem solid var(--red);
	border-radius: 0.25rem;
	color: var(--white);
	font-size: 0.7rem;
	background-color: var(--red);
	transition: all 0.2s ease;
}

.gallery__preview {
	width: 100%;
	height: -webkit-fill-available;
	border: 0.075rem solid hsl(from var(--white) h s l / 0.25);
	border-radius: 0.25rem;
	aspect-ratio: 16 / 9;
}

.gallery__image {
	width: 100%;
	height: 100%;
	border-radius: 0.25rem;
	object-fit: cover;
}

.gallery__top {
	margin-bottom: 0.5rem;
}

.gallery__bottom {
	display: flex;
	margin-bottom: 1rem;
	gap: 0.5rem;

	.gallery__preview {
		width: 6rem;
	}
}