// --------------------------------------------------
// Base styling
// --------------------------------------------------

html {
	font-family: Rubik, ui-sans-serif, system-ui;
}

body {
	overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
}

code, kbd, samp, pre {
	font-family: $font-monospace;
	font-size: 1em;
}

label:not(.w-checkbox__label) {
	display: block;
	font-weight: 500;
	opacity: 0.9;
}

small {
	opacity: 0.7;
	font-weight: 400;
	font-size: 0.85rem;
}

label small {
	opacity: 0.5;
}

label + small {
	display: block;
	margin-top: -2px;
	margin-bottom: 2px;
}

a {
	color: var(--color-accent-1);
}

// --------------------------------------------------
// WaveUI overrides
// --------------------------------------------------

.w-app {
	line-height: 1.35rem;

	&--light {
		color: #1f1f1f;
	}

	&--dark {
		color: white;
		caret-color: #a1a1a1;

		.w-overlay {
			background-color: rgba(0, 0, 0, 0.55);
		}
	}
}

.w-app .headline, .w-app .title1 {
	letter-spacing: initial;
}


/* Notification center */
.w-notification-manager {
	@include padding(4);
	@include padding(16, t);

	overflow-x: hidden;
	width: 24rem;

	.w-alert {
		@include padding(3);
		@include rounded(md);

		border: 0;
		border-left-width: 4px;
		background-color: white;
		box-shadow: 0 2px 18px rgba(64, 64, 64, 0.3);

		&__icon {
			@include font-size('2xl');
		}

		&__content {
			color: #404040;
		}

		&__dismiss {
			color: #404040;

			.w-icon {
				@include font-size('2xl');
			}
		}

		& > * {
			align-self: initial;
		}
	
		&::after {
			background-color: transparent;
		}
	}
}

/* Top level inputs */
.w-input, .w-select, .w-textarea {
	@include transition(shadow);

	&:not(&--outline) {
		border: none;
	}

	// TODO Verify if this works
	@include dark {
		input, .w-input__icon, .w-select__icon {
			color: white;
		}
	}

	input, textarea, select {
		@include font-size(sm);

		color: #424242;

		@include dark {
			color: white;
		}
	}

	&--no-padding &__icon--inner-left {
		font-size: 1.4em;
		left: 9px;
	}

	&--no-padding &__icon--inner-right {
		font-size: 1.4em;
		right: 9px;
	}
}

.w-switch--readonly {
	cursor: inherit;
}

/* Input wrappers */
.w-input__input-wrap,
.w-textarea__textarea-wrap,
.w-select__selection-wrap {
	@include rounded(md);
	@include padding(2, x);
	@include padding(1, y);

	background-color: var(--color-shade-3);
	border: none;

	&--round {
		@include rounded(full);

		input {
			@include padding(1, l);
		}
	}

	&::after {
		display: none;
	}

}

/* Input specific */
.w-input {
	&__input-wrap {
		height: 2rem;
	}
}

/* Select specific */
.w-select {
	@include dark {
		color: white;
	}

	&__selection-wrap {
		height: 2rem;
	}

	&__selection, &__label {
		@include dark {
			color: white;
		}
	}

	&__menu {
		@include dark {
			color: #b1b1b1;
		}
	}

	> .w-menu-wrap {
		display: inline-flex;
    	flex: 1 1 auto;
	}

	.w-select__selection-wrap + .w-menu-wrap {
		flex: 0;
	}
}

/* Add padding for inner icons */
.w-select--inner-icon-left input {
	@include padding(8, l);
}

/* Input focusing */
.w-input--focused .w-input__input-wrap,
.w-textarea--focused .w-textarea__textarea-wrap,
.w-select--focused .w-select__select-wrap {
	@include transition(shadow);
	@include ring(var(--color-accent-2), 2);
	
	outline: none;
}

/* Checkboxes */
.w-checkbox__input {
	color: #ef4444;

	&::after {
		border-color: white;
	}
}

/* Buttons */
.w-button {
	@include font-weight(medium);
	@include margin(2, l);
	@include padding(4);
	@include rounded(lg);

	line-height: 1;

	&__loader {
		@include rounded(lg);
	}

	&:not(&--outline) {
		border: none;
	}

	&--round .w-button__loader {
		@include rounded(full);
	}

	&--icon:not(.bg) {
		background-color: transparent;
		border: none;
	}

	/* Slightly nudges button icons down by one pixel */
	& > .w-icon {
		line-height: 1.5;
	}
}

/** Divider */
.w-divider {
	@include margin(3, y);

	border-top: 1px solid var(--color-shade-2);

	@include dark {
		border-color: #404040;
	}
}

/** List */
.w-list {
	&__item-label.primary {
		@include dark {
			background-color: white;
		}
	}
}

/** Tooltips */
.w-tooltip {
	@include padding(0.5, y);

	background-color: rgba(51, 51, 51, 0.7);
	border-color: rgba(51, 51, 51, 0.7) !important;
	display: block;
	color: white;
	border: none;

	&::after {
		display: none;
	}
}

.w-dialog > .w-card {
	@include rounded(xl);

	background-color: var(--color-shade-0);
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;

	@include dark {
		background-color: var(--color-shade-2);
	}
}

.w-card {
	background-color: unset;
	border: none;
}

.w-menu-wrap {
	display: block;
}

.w-notification--right {
	padding-right: 12px;
}

// --------------------------------------------------
// Webkit scrollbar
// --------------------------------------------------

::-webkit-scrollbar {
	width: 11px;
	height: 11px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.13);

	@include dark {
		background-color: rgba(255, 255, 255, 0.065);
	}
}

::-webkit-scrollbar-thumb {
	background-color: #b3beca;
	overflow: hidden;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #92a6b8;
}

::-webkit-scrollbar-thumb:active {
	background-color: #8399ad;
}

// --------------------------------------------------
// General color theme
// --------------------------------------------------

@each $name, $color in $theme-general {
	.w-app .#{$name} {
		color: $color !important;
	}
	.w-app .#{$name}--bg, .w-app.#{$name}--bg {
		background-color: $color !important;
	}
}

.w-app {
	@each $name, $color in $theme-general {
		--color-#{$name}: #{$color};
	}
}

// --------------------------------------------------
// Light color theme
// --------------------------------------------------

@each $name, $color in $theme-light {
	.w-app--light .#{$name} {
		color: $color !important;
	}
	.w-app--light .#{$name}--bg, .w-app--light.#{$name}--bg {
		background-color: $color !important;
	}
}

.w-app--light {
	@each $name, $color in $theme-light {
		--color-#{$name}: #{$color};
	}
}

// --------------------------------------------------
// Dark color theme
// --------------------------------------------------

@each $name, $color in $theme-dark {
	.w-app--dark .#{$name} {
		color: $color !important;
	}
	.w-app--dark .#{$name}--bg, .w-app--dark.#{$name}--bg  {
		background-color: $color !important;
	}
}

.w-app--dark {
	@each $name, $color in $theme-dark {
		--color-#{$name}: #{$color};
	}
}

// --------------------------------------------------
// CodeMirror overrides
// --------------------------------------------------

.CodeMirror-scroll {
	overflow-x: auto !important;
}

// --------------------------------------------------
// miscellaneous styling
// --------------------------------------------------

.sortable-drag {
	opacity: 0;
}

.list-menu {
	@include glow(rgba(185, 185, 185, 0.8));
	@include padding(3, t);
	@include rounded(xl);

	background-color: var(--color-shade-0);
	overflow: hidden;
	width: 15rem;

	@include dark {
		@include glow(rgb(23 23 23 / 85%));
		
		background-color: var(--color-shade-2);
	}

	&__title {
		@include margin(3, b);
		@include font-weight(semibold);

		text-align: center;
		color: #202020;

		@include dark {
			color: white;
		}
	}

	&__list {
		@include padding(1, b);

		overflow: hidden;
	}

	&__item {
		@include transition(colors);
		@include padding(3, x);
		@include padding(2, y);

		cursor: pointer;
		display: block;
		color: #363636;

		&:hover {
			background-color: var(--color-misc-2);
		}

		@include dark {
			color: white;
		}

		.w-icon {
			@include margin(1, r);
		}

		p {
			@include font-size(xs);
		}
	}

	.w-divider {
		margin-top: 2px;
		margin-bottom: 2px;
	}
}

.simple-dialog {
	> div > label {
		@include margin(5, t);
	}

	&__options {
		display: flex;
	}

	.w-button {
		@include margin(5, t);
	}
}

.container {
	width: 100%;
	padding-left: 2rem;
	padding-right: 2rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;

	@include breakpoint(md) {
		max-width: 901px;
	}

	@include breakpoint(lg) {
		max-width: 1201px;
	}

	@include breakpoint(xl) {
		max-width: 1400px;
	}

	&--thin {
		max-width: 1000px;
	}
}

.w-icon {
	&.right {
		margin-left: 0.6rem;
	}
	&.left {
		margin-right: 0.6rem;
	}
}