:root {
	@each $name,
	$color in $colors-theme {
		@include color-variants($name, $color);
	}

	@each $name,
	$color in $colors-system {
		@include color-variants($name, $color);
	}

	--background-body: #{$color-body};
	--background-modal: #{$color-modal};
	--font-family-main: #{$font-family-main};
}

html {
	font-family: $font-family-main;
	font-size: 16px;
	scroll-behavior: smooth;

	&.is-dark-mode {
		background-color: var(--color-body-dark) !important;

		body{
			background-color: var(--color-body-dark) !important;
		}
	}

	@each $name,
	$color in $colors-theme {
		@include colors-classes($name);
	}

	@each $name,
	$color in $colors-system {
		@include colors-classes($name);
	}
}

body {
	color: var(--color-text);
	background-color: var(--color-body-light);

	&.is-dark-mode {
		background-color: var(--color-body-dark) !important;
		color: var(--color-text-light);
	}

	&.modal-open {
		overflow: hidden !important;
	}
}

hr {
	border: none;
	border-top: 1px solid var(--color-border-tinted);
	margin: 1.25rem 0px;
	padding: 0px;

	&.dotted {
		border-top-style: dotted !important;
	}

	&.dashed {
		border-top-style: dashed !important;
	}

	.is-dark-mode & {
		border-top-color: var(--color-dark-tint);
	}
}

a.link {
	color: var(--color-link);
	border: none;
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 1px dashed var(--color-link);
	background-color: transparent;

	i {
		color: var(--color-link-tint) !important;
	}

	.is-dark-mode & {
		color: var(--color-link-tint);
		border-bottom: 1px dashed var(--color-link-tint);

		i {
			color: var(--color-link-tint) !important;
		}
	}
}

.text-muted {
	color: var(--color-muted) !important;
}

.is-noscroll {
    position: fixed;
    overflow-y: hidden;
    width: 100%;
    bottom: 0;
}

/* total width */
html[custom-scroll] ::-webkit-scrollbar {
	background-color: transparent;
	width: 8px;
}

/* background of the scrollbar except button or resizer */
html[custom-scroll] ::-webkit-scrollbar-track {
	background-color: transparent
}
html[custom-scroll] ::-webkit-scrollbar-track:hover {
	background-color: transparent
}

/* scrollbar itself */
html[custom-scroll] ::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,0.2);
	border-radius: 4px;
}
html[custom-scroll] ::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0,0,0,0.3);
}

/* set button(top and bottom of the scrollbar) */
html[custom-scroll] ::-webkit-scrollbar-button {
	display:none
}

/* Icons aligment */
i[class*=icon-] {
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	line-height: 1em;
	vertical-align: middle;
}

i[class*=logo-] {
	display: inline-flex;
	line-height: 1em;
	vertical-align: middle;
}

.clockwork-toolbar {
	transition: 0.3s;
	transform: translateY(22px);
	opacity: 0;

	&:hover {
		transform: translateY(0);
		opacity: 1;
	}
}

.text-ellipsis{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 30px var(--color-yellow-lucid) inset !important;

	.is-dark-mode & {
		-webkit-box-shadow: 0 0 0 30px var(--color-dark-shade) inset !important;
	}
}

input[data-com-onepassword-filled],
select[data-com-onepassword-filled],
textarea[data-com-onepassword-filled] {
	background-color: var(--color-yellow-lucid) !important;

	.is-dark-mode & {
		background-color: var(--color-dark-shade) !important;
	}
}

