/* ==================================================================== */
/* ============================== BUTTONS ============================= */
/* ==================================================================== */

.btn {
	position: relative;
	border-radius: var(--radius-s);
	outline: none;
	box-shadow: none;
}

a.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--size-s);

	font-weight: 500;
}

a.btn.disabled {
	pointer-events: none;
	filter: grayscale(1);
	cursor: not-allowed;
}

.btn.btn-xs {
	height: 32px;
	width: 32px;
	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;
}
.btn.btn-xs > i {
	font-size: .9rem;
	line-height: .9rem;
}

.btn.btn-square {
	aspect-ratio: 1/1;
}

.btn.btn-primary {
	background-color: var(--clr-primary-a0);
	border-color: var(--clr-primary-a0);
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:focus-visible,
.btn.btn-primary:focus-within {
	background-color: var(--clr-primary-a10);
	border-color: var(--clr-primary-a10);

	transition: all .15s;
}

.btn.btn-secondary {
	background-color: var(--clr-secondary);
	border-color: var(--clr-secondary);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:active,
.btn.btn-secondary:focus,
.btn.btn-secondary:focus-visible,
.btn.btn-secondary:focus-within {
	background-color: var(--clr-secondary-dark);
	border-color: var(--clr-secondary-dark);

	transition: all .15s;
}

.btn.btn-tertiary {
	background: var(--clr-surface-a20);
	border: 1px solid var(--clr-surface-a50);
	color: white;
	transition: color .15s, background .15s;
}
.btn.btn-tertiary:hover,
.btn.btn-tertiary:active,
.btn.btn-tertiary:focus,
.btn.btn-tertiary:focus-visible,
.btn.btn-tertiary:focus-within {
	background-color: var(--clr-surface-a40);

	transition: all .15s;
}

.btn.btn-alert {
	background-color: var(--clr-red);
	border-color: var(--clr-red);
	color: white;
}

.btn.btn-alert:hover,
.btn.btn-alert:active,
.btn.btn-alert:focus,
.btn.btn-alert:focus-visible,
.btn.btn-alert:focus-within {
	background-color: var(--clr-red-dark);
	border-color: var(--clr-red-dark);

	transition: all .15s;
}

.clickable {
	cursor: pointer;
}

.btn-tags {
	position: absolute;
	height: 16px;
	min-width: 16px;
	padding: 0 4px;
	top: 0;
	right: 0;
	border-radius: var(--radius-s);
	font-size: .8rem;
	transform: translateX(33%) translateY(-33%);
	background: var(--clr-red);
}

/* ==================================================================== */
/* ============================== HEADERS ============================= */
/* ==================================================================== */

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

/* ==================================================================== */
/* ============================== INPUTS ============================== */
/* ==================================================================== */

.form-control {
	background: var(--clr-surface-a20);
	border-radius: var(--radius-s);
	border: 1px solid var(--clr-surface-a30);
	color: white !important;
}
.form-control:focus {
	background: var(--clr-surface-a30);
}
.form-control::placeholder {
	color: var(--clr-surface-a50);
}
.form-control:disabled {
	background: rgba(0,0,0,0.4) !important;
	cursor: not-allowed;
}

.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
	background: var(--clr-surface-a20);
}

.form-floating > label,
label {
	color: var(--clr-surface-a50);
	background: transparent;
}
.form-floating > .form-control-plaintext~label,
.form-floating > .form-control:focus~label,
.form-floating > .form-control:not(:placeholder-shown)~label,
.form-floating > .form-select~label {
	color: var(--clr-surface-a50);
}
.form-floating > .form-control-plaintext~label::after,
.form-floating > .form-control:focus~label::after,
.form-floating > .form-control:not(:placeholder-shown)~label::after,
.form-floating > .form-select~label::after {
	background: transparent !important;
}


/* ==================================================================== */
/* =============================== TEXT =============================== */
/* ==================================================================== */

.text-white {
	color: #FFFFFF;
}
.text-black {
	color: #000000;
}

.text-primary {
	color: var(--clr-primary) !important;
}
.text-secondary {
	color: var(--clr-secondary) !important;
}

.text-no-wrap {
	text-wrap: nowrap;
}

.fw-100 {
	font-weight: 100;
}
.fw-200 {
	font-weight: 200;
}
.fw-300 {
	font-weight: 300;
}
.fw-400 {
	font-weight: 400;
}
.fw-500 {
	font-weight: 500;
}
.fw-600 {
	font-weight: 600;
}
.fw-700 {
	font-weight: 700;
}
.fw-800 {
	font-weight: 800;
}
.fw-900 {
	font-weight: 900;
}

.text-detail {
	font-size: .8rem;
	font-weight: 100;
	font-style: italic;
}

/* ==================================================================== */
/* =============================== LAYOUT ============================= */
/* ==================================================================== */

/* =============================== FLEX ============================= */

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-0 {
	flex: 0 !important;
}
.flex-05 {
	flex: 0.5 !important;
}
.flex-1 {
	flex: 1 !important;
}
.flex-2 {
	flex: 2 !important;
}
.flex-3 {
	flex: 3 !important;
}
.flex-4 {
	flex: 4 !important;
}

.justify-flex-space-between {
	justify-content: space-between;
}
.justify-flex-end {
	justify-content: flex-end;
}
.justify-flex-center {
	justify-content: center;
}

.align-flex-start {
	align-items: flex-start;
}
.align-flex-center {
	align-items: center;
}

.row-gap-xs {
	row-gap: var(--size-xs);
}
.row-gap-s {
	row-gap: var(--size-s);
}
.row-gap-m {
	row-gap: var(--size-m);
}
.row-gap-l {
	row-gap: var(--size-l);
}

.col-gap-xs {
	column-gap: var(--size-xs);
}
.col-gap-s {
	column-gap: var(--size-s);
}
.col-gap-m {
	column-gap: var(--size-m);
}
.col-gap-l {
	column-gap: var(--size-l);
}

/* =============================== SIZE ============================= */

.h-full {
	height: 100%;
}

.w-full {
	width: 100%;
}

.w-10 {
	width: 10% !important;
}
.w-20 {
	width: 20% !important;
}
.w-30 {
	width: 30% !important;
}
.w-40 {
	width: 40% !important;
}
.w-50 {
	width: 50% !important;
}
.w-60 {
	width: 60% !important;
}
.w-70 {
	width: 70% !important;
}
.w-80 {
	width: 80% !important;
}
.w-90 {
	width: 90% !important;
}

.w-h-full {
	height: 100%;
	width: 100%;
}

.w-fit {
	width: fit-content !important;
}

.w-min-fit-content {
	min-width: fit-content !important;
}

.spacer-h {
	height: 100%;
}

.spacer-w {
	width: 100%;
}

/* =============================== POSITIONS ============================= */

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.absolute-right {
	right: 0px !important;
}

.absolute-left {
	left: 0px !important;
}

.absolute-center {
	left: 50% !important;
	transform: translateX(-50%);
}

/* =============================== PADDING / MARGIN ============================= */

.no-padding {
	padding: 0 !important;
}

.no-margin {
	margin: 0 !important;
}

.padding-xs {
	padding: 4px;
}
.padding-s {
	padding: 8px;
}
.padding-m {
	padding: 16px;
}
.padding-l {
	padding: 16px;
}

.padding-w-xs {
	padding: 4px 0;
}
.padding-w-s {
	padding: 8px 0;
}
.padding-w-m {
	padding: 16px 0;
}
.padding-w-l {
	padding: 16px 0;
}

.padding-h-xs {
	padding: 0 4px;
}

.padding-h-s {
	padding: 0 8px;
}
.padding-h-m {
	padding: 0 16px;
}
.padding-h-l {
	padding: 0 16px;
}

.margin-center {
	margin: auto;
}

.margin-l-auto {
	margin-left: auto;
}
.margin-l-xs {
	margin-left: 4px;
}
.margin-l-s {
	margin-left: 8px;
}
.margin-l-m {
	margin-left: 16px;
}
.margin-l-l {
	margin-left: 32px;
}

.margin-t-xs {
	margin-top: 4px;
}
.margin-t-s {
	margin-top: 8px;
}
.margin-t-m {
	margin-top: 16px;
}
.margin-t-l {
	margin-top: 32px;
}

.margin-b-xs {
	margin-bottom: 4px;
}
.margin-b-s {
	margin-bottom: 8px;
}
.margin-b-m {
	margin-bottom: 16px;
}
.margin-b-l {
	margin-bottom: 32px;
}

/* ==================================================================== */
/* =============================== COLORS ============================= */
/* ==================================================================== */

.no-bg {
	background: none;
}

/* ==================================================================== */
/* ============================== ALERTIFY ============================ */
/* ==================================================================== */

.alertify .ajs-dialog {
	border-radius: var(--radius-m);
	overflow: hidden;

	box-shadow: rgba(0,0,0,.24) 0 3px 8px;
	background-color: var(--clr-surface-a30) !important;
}

.alertify .ajs-header {
	color: white !important;
	background-color: var(--clr-surface-a30) !important;
}

.alertify .ajs-body {
	color: white;
}

.alertify .ajs-footer {
	background-color: var(--clr-surface-a30) !important;
}

.ajs-message {
	border-radius: var(--radius-m);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.ajs-success {
	background: var(--clr-green) !important;
	color: #FFFFFF;
	font-weight: 500;
}

.ajs-success::before {
	font: var(--fa-font-solid);
	content: '\f164';
	margin-right: var(--size-m);
	color: #FFFFFF;
}

.ajs-warning {
	background: var(--clr-orange) !important;
	color: #FFFFFF;
	font-weight: 500;
}

.ajs-warning::before {
	font: var(--fa-font-solid);
	content: '\f071';
	margin-right: var(--size-m);
	color: #FFFFFF;
}

.ajs-error {
	background: var(--clr-red) !important;
	color: #FFFFFF;
	font-weight: 500;
}

.ajs-error::before {
	font: var(--fa-font-solid);
	content: '\f00d';
	margin-right: var(--size-m);
	color: #FFFFFF;
}

.ajs-button {
	border-radius: var(--radius-s);
}

.ajs-button.ajs-ok {
	background: var(--clr-primary-a0);
	color: #FFFFFF;
	border: none;

	transition: all .15s;
}
.ajs-button.ajs-ok:hover {
	background: var(--clr-primary-a10);

	transition: all .15s;
}

.ajs-button.ajs-cancel {
	background: var(--clr-red);
	color: #FFFFFF;
	border: none;

	transition: all .15s;
}
.ajs-button.ajs-cancel:hover {
	background: var(--clr-red-dark);

	transition: all .15s;
}

/* ==================================================================== */
/* ================================ MODAL ============================= */
/* ==================================================================== */

.modal {
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(4px);
}

.modal-content {
	background: var(--clr-surface-a10);
	border-radius: var(--radius-m);
}

.modal-header {
	border-bottom: 1px solid var(--clr-surface-a20);
	border-top-left-radius: var(--radius-m);
	border-top-right-radius: var(--radius-m);
}

.modal-title {
	color: var(--clr-surface-a50)
}

.modal-footer {
	border-top: 1px solid var(--clr-surface-a20);
	border-bottom-left-radius: var(--radius-m);
	border-bottom-right-radius: var(--radius-m);
}

/* ==================================================================== */
/* ============================== BOOTSTRAP =========================== */
/* ==================================================================== */

.dropdown-menu {
	background: var(--clr-surface-a30);
}

.dropdown-item {
	color: white;
}
.dropdown-item:focus, .dropdown-item:hover {
	background: var(--clr-surface-a40);
	color: white;
}

.dropdown-toggle.no-arrow::after {
	display: none;
}

/* ==================================================================== */
/* ================================ UTILS ============================= */
/* ==================================================================== */

.separator {
	border-color: var(--clr-surface-a50);
}