// --------------------------------------------------
// 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-primary);
}

// --------------------------------------------------
// 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;
}

/* Dialog overlays */
.w-overlay {
	background-color: rgba(19, 21, 31, 0.55);
}

/* Alerts */
.w-alert {
	@include padding(3);
	@include rounded(xl);

	border: 0;

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

	& > * {
		align-self: initial;
	}
}

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

	overflow-x: hidden;
	width: 24rem;

	.w-alert {
		border-left-width: 4px;
		background-color: var(--color-misc-1);
		box-shadow: 0 2px 18px rgba(64, 64, 64, 0.3);

		&__icon {
			align-self: unset;
		}

		&__content {
			align-self: unset;
			color: white;
		}

		&__dismiss {
			color: white;

			.w-icon {
				@include font-size('xl');
			}
		}
	
		&::after {
			background-color: transparent;
		}
	}
}

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

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

	&__icon--inner-left {
		left: 10px;
	}

	// 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 rounded(md);

		background-color: var(--color-shade-0);
		border: 1px solid var(--color-shade-3);
		
		@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-primary), 2);
	
	outline: none;
}

/* Checkboxes */
.w-checkbox {
	
	&__input::after {
		@include rounded(md);

		border-color: #808080;
	}

	&__label.pl2 {
		@include padding(3, l);
	}
}

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

	line-height: 1;

	&__loader {
		@include rounded(lg);
	}

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

	&--loading {
		pointer-events: 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-color: var(--color-shade-2);

	&--vertical {
		@include margin(0, y);
		@include margin(3, x);
	}

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

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

/** Tooltips */
.w-tooltip {
	@include padding(1.5, y);
	@include padding(2, x);
	@include font-size(sm);
	@include rounded(lg);

	background-color: rgba(51, 51, 51, 0.7);
	border-color: rgba(51, 51, 51, 0.7) !important;
	backdrop-filter: blur(3px);
	display: block;
	color: white;
	border: none;

	&::after {
		display: none;
	}
}

/** Tables **/
.w-table-wrap {
	border: none;
	border-radius: 0;
}

.w-table {

	thead {
		@include font-weight(semibold);
		@include font-size(xs);
		
		text-transform: uppercase;
		background-color: var(--color-shade-4);
		color: var(--color-negative-4);

		tr {
			height: 3rem;
		}
	}

	tbody {
		tr {
			border: none;
			background-color: var(--color-shade-0) !important;

			&.w-table__row:not(.no-data):not([class*="--bg"]):nth-child(odd) {
				background-color: #f7f8fc !important;

				@include dark {
					background-color: var(--color-shade-1) !important;
				}
			}
		}
	}

	&__header:first-child, &__cell:first-child {
		@include padding(5, l);
	}

	&__header:last-child, &__cell:last-child {
		@include padding(5, r);
	}

	&__cell {
		@include padding(2, y);
	}
}

/** Dialogs */
.w-dialog > .w-card {
	@include shadow;
	@include rounded(xl);

	background-color: var(--color-shade-0);

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

.w-dialog > .w-card > .w-card__content {
	@include padding(5);
}

.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;
		color: white;
	}
}

.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;
}

.simple-list {
	@include glow(rgba(36, 36, 36, 0.3));
	@include rounded(xl);

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

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

	&__title {
		@include margin(3, y);
		@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);
			
			color: gray;
		}
	}
	
	> .w-divider, &__list > .w-divider {
		margin-top: 2px;
		margin-bottom: 2px;
	}
}

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

	&--flat.w-card > .w-card__content {
		padding: 0;
	}

	&__content {
		@include padding(5);
	}

	/* TODO deprecated, should be removed in favor of <w-flex> */
	&__options {
		display: flex;
		gap: 0.75rem;
	}

	// What even was this here for?
	// .w-button {
	// 	@include margin(5, t);
	// }
}

.simple-subtitle {
	@include padding(2, b);
	@include font-weight(semibold);
	@include font-size(xs);

	display: flex;
	align-items: center;
	text-transform: uppercase;
	color: var(--color-negative-4);
}

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

// --------------------------------------------------
// Margin and padding helpers
// --------------------------------------------------

$directions: (
	't': 'top',
	'b': 'bottom',
	'r': 'right',
	'l': 'left'
);

.nm {
	margin: 0;
}

.np {
	padding: 0;
}

@each $char, $dir in $directions {
	.nm#{$char} {
		margin-#{$dir}: 0;
	}
	
	.np#{$char} {
		padding-#{$dir}: 0;
	}
}