:root {
	--surrealist-divider-size: 0.75rem;
	--surrealist-gradient: linear-gradient(135deg, var(--mantine-color-surreal-filled) 0%, #9600FF 100%);
}

:root[data-mantine-color-scheme="light"] {
	--mantine-color-body: var(--mantine-color-white);
	--mantine-color-error: var(--mantine-color-red-7);

	--surrealist-glow: 0 3px 15px rgba(186, 0, 171, 0.5);
	--surrealist-indent-color: var(--mantine-color-slate-1);
	--surrealist-indent-active-color: var(--mantine-color-slate-2);
	--surrealist-kind-color: #8d6bff;
	--surrealist-divider-color: var(--mantine-color-slate-1);
	--surrealist-faint-body: hsla(0, 0%, 100%, 0.5);
}

:root[data-mantine-color-scheme="dark"] {
	--mantine-color-body: var(--mantine-color-slate-8);
	--mantine-color-error: var(--mantine-color-red-5);

	--surrealist-glow: 0 3px 20px -4px rgba(186, 0, 171, 1), 0 3px 15px rgba(186, 0, 171, 0.5);
	--surrealist-indent-color: var(--mantine-color-slate-7);
	--surrealist-indent-active-color: var(--mantine-color-slate-6);
	--surrealist-kind-color: #a79fff;
	--surrealist-divider-color: var(--mantine-color-slate-6);
	--surrealist-faint-body: hsla(253, 21%, 13%, 0.6);
}

.__dbk__container {
	overflow: visible;
}

body.mod .cm-record-link:hover {
	text-decoration: underline;
	text-decoration-color: #00d1ff;
	cursor: pointer;

	@include light {
		text-decoration-color: #0095ff;
	}
}

.mantine-contextmenu-item-button>div:not(.mantine-contextmenu-item-button-title) {
	font-size: 0.65rem !important;
}

.mantine-contextmenu {
	padding: var(--mantine-spacing-xs);
}

.mantine-contextmenu-item-button {
	border-radius: var(--mantine-radius-xs);
}

.mantine-contextmenu-divider {
	margin-block: var(--mantine-spacing-xs);
	background-color: var(--surrealist-divider-color);
}

.mantine-contextmenu,
.mantine-Popover-dropdown,
.mantine-Menu-dropdown,
.mantine-HoverCard-dropdown,
.mantine-Dialog-root,
.mantine-Notification-root {
	background-color: hsla(253, 21%, 15%, 0.9);
	border-color: hsla(253, 21%, 40%, 0.5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);

	@include light {
		background-color: hsla(0, 0%, 100%, 0.9);
		border-color: var(--mantine-color-slate-2);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}
}

.mantine-Menu-divider {
	border-color: hsla(253, 21%, 40%, 0.5);

	@include light {
		border-color: var(--mantine-color-slate-2);
	}
}

.mantine-Dialog-root,
.mantine-Notification-root {
	border-width: 1px;
	border-style: solid;

	&::before {
		left: 9px;
		width: 4px;
		top: var(--mantine-spacing-xs);
		bottom: var(--mantine-spacing-xs);
	}
}

.mantine-Notification-root[data-variant="spaced"] {
	padding: var(--mantine-spacing-md);

	&::before {
		display: none;
	}
}

.mantine-Notification-title {
	font-size: var(--mantine-font-size-md);
	font-weight: 600;
}

.mantine-Notification-description {
	color: var(--mantine-color-text);
}

.mantine-Button-root:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])),
.mantine-ActionIcon-root:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
	background-color: var(--mantine-color-slate-9);

	@include light {
		background-color: var(--mantine-color-slate-0);
	}
}

.mantine-ActionIcon-root {
	box-sizing: border-box;
	background-origin: border-box;

	&[data-variant="gradient"]:not(:disabled) {
		border: 1px solid rgba(255, 255, 255, 0.3) !important;
	}
}

.mantine-Button-root {
	box-sizing: border-box;
	background-origin: border-box;

	&[data-variant="gradient"]:not(:disabled) {
		border: 1px solid rgba(255, 255, 255, 0.3) !important;
	}

	@include light {
		border: unset !important;
	}
}

.mantine-Tooltip-tooltip {
	color: var(--tooltip-color, var(--mantine-color-text));
	background-color: var(--tooltip-bg, var(--mantine-color-violet-8));
	border: 1px solid var(--tooltip-bg, var(--mantine-color-violet-8));
	box-shadow: var(--mantine-shadow-md);
	padding-block: var(--mantine-spacing-xs);
	padding-inline: var(--mantine-spacing-md);
	color: white;

	@include light {
		background-color: var(--tooltip-bg, var(--mantine-color-violet-4));
		border-color: var(--tooltip-bg, var(--mantine-color-violet-4));
	}
}

.mantine-Menu-itemSection {
	color: var(--mantine-color-slate-2);

	@include light {
		color: var(--mantine-color-slate-5);
	}
}

.mantine-Menu-item {
	border-radius: var(--mantine-radius-xs);
	transition: all 0.05s;

	&:hover {
		background-color: var(--mantine-color-slate-6);
		color: var(--mantine-color-bright);

		.mantine-Menu-itemSection {
			color: var(--mantine-color-bright);
		}

		@include light {
			background-color: var(--mantine-color-slate-1);
		}
	}
}

.mantine-Tabs-tab {
	border: 1px solid transparent;
	justify-content: center;

	&:hover {
		background-color: var(--mantine-color-slate-7);
		color: var(--mantine-color-bright);

		@include light {
			background-color: var(--mantine-color-slate-0);
		}
	}

	&[data-active] {
		background: var(--surrealist-gradient);
		background-origin: border-box;
		border-color: rgba(255, 255, 255, 0.3);
		border-radius: var(--mantine-radius-xs);

		&:hover {
			color: white;
		}

		@include light {
			border-color: none;
		}
	}
}

.mantine-Checkbox-root {

	.mantine-Checkbox-input {
		background-color: var(--mantine-color-body);
	}

	&[data-checked] .mantine-Checkbox-input {
		background: var(--surrealist-gradient);
		background-origin: border-box;
		border-color: rgba(255, 255, 255, 0.3);
	}

	&[data-checked] .mantine-Checkbox-icon {
		color: white !important;
	}
}

.mantine-Radio-root {

	&[data-checked] .mantine-Radio-radio {
		background: var(--surrealist-gradient);
		background-origin: border-box;
		border-color: rgba(255, 255, 255, 0.3);
	}

	.mantine-Radio-label[data-disabled] {
		color: unset;
		opacity: 0.5;
	}
}

.mantine-Input-input {
	background-color: var(--mantine-color-body);

	&:not(:focus-within):not([data-variant="unstyled"]) {
		border-color: var(--mantine-color-slate-6);

		@include light {
			border-color: var(--mantine-color-slate-1);
		}
	}
}

.mantine-TagsInput-option,
.mantine-Combobox-option,
.mantine-Select-option,
.mantine-MultiSelect-option {
	border-radius: var(--mantine-radius-xs);

	&:hover {
		background-color: rgba(255, 255, 255, 0.075);

		@include light {
			background-color: rgba(0, 0, 0, 0.075);
		}
	}
}

.mantine-Select-group {
	&:not(:first-child) {
		margin-top: var(--mantine-spacing-sm);
	}

	.mantine-Select-option {
		padding-block: 5px;
	}
}

.mantine-Select-groupLabel {
	color: var(--mantine-color-dimmed);
	font-size: var(--mantine-font-size-xs);
	padding: 3px 9px;

	&::after {
		display: none;
	}

	@include light {
		color: var(--mantine-color-slate-5);
	}
}

.mantine-MultiSelect-pill {
	background-color: var(--mantine-color-slate-6);

	@include light {
		background-color: var(--mantine-color-slate-1);
	}
}

.mantine-Slider-bar {
	background: var(--surrealist-gradient);
}

.mantine-Slider-mark {
	background-color: rgba(255, 255, 255, 0.3);
	border-color: transparent;
}

.mantine-InputWrapper-required {
	color: var(--mantine-color-surreal-6);
	color: var(--mantine-color-surreal-6);
}

.mantine-InputWrapper-description {
	font-size: var(--mantine-font-size-sm);
	color: var(--mantine-color-text);
	margin-bottom: 6px;
}

.mantine-InputWrapper-label {
	font-size: var(--mantine-font-size-md);
	color: var(--mantine-color-slate-1);
	font-weight: 600;
	margin-bottom: 2px;

	@include light {
		color: var(--mantine-color-slate-7);
	}
}

.mantine-Divider-root {
	--divider-color: var(--surrealist-divider-color);
}

.mantine-Paper-root[data-with-border],
.mantine-HoverCard-arrow {
	border-color: var(--mantine-color-slate-6);

	@include light {
		border-color: var(--mantine-color-slate-2);
	}
}

.mantine-Accordion-control {
	border-radius: var(--mantine-radius-md);

	&:hover {
		background-color: var(--mantine-color-slate-7);

		@include light {
			background-color: var(--mantine-color-slate-0);
		}
	}
}

.mantine-Accordion-item {
	border-color: var(--surrealist-divider-color);
}

.mantine-Skeleton-root[data-visible]::after {
	background-color: var(--mantine-color-slate-6);

	@include light {
		background-color: var(--mantine-color-slate-1);
	}
}

.mantine-ThemeIcon-root[data-variant="gradient"] {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-origin: border-box;

	@include light {
		border: unset;
	}
}

.mantine-TagsInput-pill {
	background-color: var(--mantine-color-slate-6);
	border-radius: var(--mantine-radius-xs);

	@include light {
		background-color: var(--mantine-color-slate-1);
	}
}

.mantine-TagsInput-pillsList {
	margin-left: -4px;
}

.mantine-Kbd-root {
	background-color: var(--mantine-color-slate-6);
	border-width: 1px;
	border: none;

	@include light {
		background-color: var(--mantine-color-slate-1);
	}
}

.mantine-Switch-root[data-variant="gradient"] {
	.mantine-Switch-track {
		background-color: var(--mantine-color-slate-6);
		border-color: rgba(255, 255, 255, 0.1);

		@include light {
			background-color: var(--mantine-color-slate-2);
			border-color: transparent !important;
		}
	}

	&[data-checked] .mantine-Switch-track {
		background: var(--surrealist-gradient);
		background-origin: border-box;
		border-color: rgba(255, 255, 255, 0.3);

		@include light {
			border-color: unset;
		}
	}
}

.mantine-Progress-root {
	background-color: var(--mantine-color-slate-6);

	@include light {
		background-color: var(--mantine-color-slate-1);
	}
}

.mantine-Slider-label {
	background-color: var(--mantine-color-slate-5);
	color: var(--mantine-color-bright);

	@include light {
		background-color: var(--mantine-color-slate-2);
	}
}

.mantine-SegmentedControl-root {
	background-color: unset;
	border: 1px solid var(--mantine-color-slate-6);
	padding: 0;

	@include light {
		border-color: var(--mantine-color-slate-2);
	}

	.mantine-SegmentedControl-indicator {
		background-color: var(--mantine-color-slate-5);
		border-radius: var(--mantine-radius-xs);
		box-shadow: none;

		@include light {
			background-color: var(--mantine-color-slate-2);
		}
	}

	.mantine-SegmentedControl-innerLabel {
		transition: color .15s;
		padding-block: 4px;
	}

	.mantine-SegmentedControl-label {
		padding-block: 6px;
	}

	.mantine-SegmentedControl-control[data-active] .mantine-SegmentedControl-innerLabel {
		color: var(--mantine-color-bright);
	}

	.mantine-SegmentedControl-control {
		padding: 2px;

		--separator-color: var(--mantine-color-slate-6);

		@include light {
			--separator-color: var(--mantine-color-slate-2);
		}
	}

	&[data-variant="gradient"] {
		.mantine-SegmentedControl-indicator {
			background: var(--surrealist-gradient);
			background-origin: border-box;
			border: 1px solid rgba(255, 255, 255, 0.3);
		}

		.mantine-SegmentedControl-control[data-active] .mantine-SegmentedControl-innerLabel {
			color: white;
		}
	}
}

.mantine-Drawer-content {
	margin-top: calc(var(--drawer-offset) + var(--titlebar-offset, 0px));
	height: var(--drawer-height, calc(100% - var(--drawer-offset) * 2 - var(--titlebar-offset, 0px)));
}

:where([data-mantine-color-scheme="dark"]) :where(table) {
	--table-border-color: var(--mantine-color-slate-6);
}

:where([data-mantine-color-scheme="light"]) :where(table) {
	--table-border-color: var(--mantine-color-slate-2);
}