@import "../fonts/Inter/inter.css";
@import "./reset.css";
@import "./utilities.css";
@import "./variables.css";

:root {
	font-size: var(--bs-root-font-size);
	--bs-modal-zindex: 1100;
	--bs-cupertino-zindex: var(--bs-modal-zindex);
	--bs-border-color: var(--theme-divider);
	--bs-backdrop-bg: rgba(26, 26, 26, 0.75);
	--bs-modal-bg: linear-gradient(
			0deg,
			var(--secondary-opacity-lighter, rgba(128, 128, 128, 0.08)),
			var(--secondary-opacity-lighter, rgba(128, 128, 128, 0.08))
		),
		linear-gradient(0deg, var(--misc-paper, #1c1c1c), var(--misc-paper, #1c1c1c));
	--bs-body-color: #c7c7c7;
}

html,
body {
	width: 100%;
	overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

* {
	letter-spacing: 0.44px;
	font-family: var(--bs-body-font-family);
}

body {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
	color: var(--text-primary);
	background-color: var(--bs-body-bg);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
	color: rgba(235, 235, 235, 0.2196078431);
	border: 0;
	border-top: 1px solid #363636;
	opacity: 1;
	margin: 0;
}

img {
	pointer-events: none;
}

#modal-root,
#cupertino-root {
	position: fixed;
	left: 0;
	top: 0;

	width: unset;
	height: unset;

	z-index: 9999999;
}

.skeleton {
	animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
	0% {
		background-color: rgba(128, 128, 128, 0.08);
	}
	100% {
		background-color: rgba(128, 128, 128, 0.16);
	}
}

.btn {
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-padding-y: 0.5rem;
	--bs-btn-font-family: ;
	--bs-btn-font-size: 0.9375rem;
	--bs-btn-font-weight: 500;
	--bs-btn-line-height: 1.4666666667;
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-bg: transparent;
	--bs-btn-border-width: var(--bs-border-width);
	--bs-btn-border-color: transparent;
	--bs-btn-border-radius: var(--bs-border-radius);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-box-shadow: 0px 2px 4px rgba(15, 20, 34, 0.4);
	--bs-btn-disabled-opacity: 0.45;
	--bs-btn-focus-box-shadow: 0 0 0 0.05rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
	display: inline-block;
	padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
	font-family: var(--bs-btn-font-family);
	font-size: var(--bs-btn-font-size);
	font-weight: var(--bs-btn-font-weight);
	line-height: var(--bs-btn-line-height);
	color: var(--bs-btn-color);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
	border-radius: var(--bs-btn-border-radius);
	background-color: var(--bs-btn-bg);
	transition: all 0.2s ease-in-out;
}

.btn-sm {
	--bs-btn-padding-y: 0.375rem;
	--bs-btn-padding-x: 0.875rem;
	--bs-btn-font-size: #{toRem(13)};
	--bs-btn-line-height: #{toRem(18)};
	--bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-primary {
	color: #fff;
	--bs-border-width: 0px;
	background-color: #1db042;
	border-color: #1db042;

	@include hover-no-touch {
		color: #fff !important;
		background-color: var(--primary-400) !important;
		border-color: var(--primary-400) !important;
	}

	&:active,
	&.active {
		color: #fff !important;
		background-color: var(--primary-600) !important;
		border-color: var(--primary-600) !important;
	}

	&.disabled,
	&:disabled {
		color: #fff !important;
		background-color: #1db042 !important;
		border-color: #1db042 !important;
		box-shadow: none !important;
	}
}

.btn-text:hover {
	color: var(--primary-main);
}

.btn-text-primary,
.btn-text-secondary {
	--bs-border-width: 0px;
	--bs-btn-padding-x: 0;
	--bs-btn-padding-y: 0;
	color: var(--text-primary);
	border-color: transparent;
	background: transparent;

	@include hover-no-touch {
		color: #1db042;
		border-color: transparent !important;
	}

	&:active,
	&.active {
		color: #1db042;
		border-color: transparent !important;
	}

	&:active:focus,
	&.active:focus {
		box-shadow: none;
	}

	&.disabled,
	&:disabled {
		color: var(--text-desabled) !important;
	}
}

.btn-text-secondary {
	color: var(--text-secondary);
}

.btn-label-success {
	--bs-border-width: 0px;

	color: var(--success-500);
	border-color: transparent;
	background: var(--success-opacity-light);

	@include hover-no-touch {
		border-color: transparent !important;
		background: var(--success-opacity-main) !important;
		color: var(--success-500);
	}

	&:active,
	&.active {
		color: var(--success-500);
		background: var(--success-opacity-main) !important;
		border-color: transparent !important;
	}

	&.disabled,
	&:disabled {
		color: var(--success-500);
		border-color: transparent !important;
		background: var(--success-opacity-light) !important;
		opacity: 0.45;
		box-shadow: none;
	}
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: rgba(235, 235, 235, 0.12);
}

.modal {
	display: block;
	--bs-modal-bg: linear-gradient(
			0deg,
			var(--secondary-opacity-lighter, rgba(128, 128, 128, 0.08)),
			var(--secondary-opacity-lighter, rgba(128, 128, 128, 0.08))
		),
		linear-gradient(0deg, var(--misc-paper, #1c1c1c), var(--misc-paper, #1c1c1c));
}

.dropdown-menu {
	--bs-dropdown-bg: linear-gradient(
			0deg,
			var(--secondary-opacity-lighter, rgba(128, 128, 128, 0.08)),
			var(--secondary-opacity-lighter, rgba(128, 128, 128, 0.08))
		),
		linear-gradient(0deg, var(--misc-paper, #1c1c1c), var(--misc-paper, #1c1c1c));
	--bs-dropdown-border-color: var(--theme-divider);
	box-shadow: 0px 8px 48px 0px #0000004d !important;
	background-clip: border-box;
	background: var(--bs-dropdown-bg);
}

.modal-content {
	background: var(--bs-modal-bg);
}

.modal-dialog-scrollable .modal-content {
	overflow: visible;
}

.pane {
	--cupertino-pane-background: var(--bs-modal-bg);
	--cupertino-pane-color: var(--text-primary);
	--cupertino-pane-border-radius: var(--bs-cupertino-border-radius);
	--cupertino-pane-shadow: var(--bs-modal-shadow);
	border: 1px solid var(--bs-modal-border-color);
	border-bottom: none;
	padding-top: 0 !important;
}

.cupertino-pane-wrapper .pane {
	max-width: 100%;
}