/* From https://developer.apple.com/design/human-interface-guidelines/color */
/* From https://www.figma.com/community/file/1527721578857867021/ios-and-ipados-26 */

@media (prefers-color-scheme: light) {
	:root {
		--apple-system-red: rgb(255, 56, 60);
		--apple-system-red-marker: rgba(255, 56, 60, 0.5);
		--apple-system-red-highlighter: rgba(255, 56, 60, 0.25);
		--apple-system-orange: rgb(255, 141, 40);
		--apple-system-orange-marker: rgba(255, 141, 40, 0.5);
		--apple-system-orange-highlighter: rgba(255, 141, 40, 0.25);
		--apple-system-yellow: rgb(255, 204, 0);
		--apple-system-yellow-marker: rgba(255, 204, 0, 0.5);
		--apple-system-yellow-highlighter: rgba(255, 204, 0, 0.25);
		--apple-system-green: rgb(52, 199, 89);
		--apple-system-green-marker: rgba(52, 199, 89, 0.5);
		--apple-system-green-highlighter: rgba(52, 199, 89, 0.25);
		--apple-system-mint: rgb(0, 200, 179);
		--apple-system-mint-marker: rgba(0, 200, 179, 0.5);
		--apple-system-mint-highlighter: rgba(0, 200, 179, 0.25);
		--apple-system-teal: rgb(0, 195, 209);
		--apple-system-teal-marker: rgba(0, 195, 209, 0.5);
		--apple-system-teal-highlighter: rgba(0, 195, 209, 0.25);
		--apple-system-cyan: rgb(0, 192, 232);
		--apple-system-cyan-marker: rgba(0, 192, 232, 0.5);
		--apple-system-cyan-highlighter: rgba(0, 192, 232, 0.25);
		--apple-system-blue: rgb(0, 136, 255);
		--apple-system-blue-marker: rgba(0, 136, 255, 0.5);
		--apple-system-blue-highlighter: rgba(0, 136, 255, 0.25);
		--apple-system-indigo: rgb(97, 85, 245);
		--apple-system-indigo-marker: rgba(97, 85, 245, 0.5);
		--apple-system-indigo-highlighter: rgba(97, 85, 245, 0.25);
		--apple-system-purple: rgb(203, 48, 224);
		--apple-system-purple-marker: rgba(203, 48, 224, 0.5);
		--apple-system-purple-highlighter: rgba(203, 48, 224, 0.25);
		--apple-system-pink: rgb(255, 45, 85);
		--apple-system-pink-marker: rgba(255, 45, 85, 0.5);
		--apple-system-pink-highlighter: rgba(255, 45, 85, 0.25);
		--apple-system-brown: rgb(172, 127, 94);
		--apple-system-brown-marker: rgba(172, 127, 94, 0.5);
		--apple-system-brown-highlighter: rgba(172, 127, 94, 0.25);
		--apple-system-systemGray: rgb(142, 142, 147);
		--apple-system-systemGray-marker: rgba(142, 142, 147, 0.5);
		--apple-system-systemGray-highlighter: rgba(142, 142, 147, 0.25);
		--apple-system-systemGray2: rgb(174, 174, 178);
		--apple-system-systemGray3: rgb(199, 199, 204);
		--apple-system-systemGray4: rgb(209, 209, 214);
		--apple-system-systemGray5: rgb(229, 229, 234);
		--apple-system-systemGray6: rgb(242, 242, 247);
		--apple-background-primary-base: rgba(255,255, 255);
		--apple-background-primary-base-glass: rgba(242,242,247,0.1);
		--apple-background-primary-elevated: #F2F2F7;
		--apple-background-primary-elevated-glass: rgba(242,242,247,0.05);
		--apple-background-primary-elevated-mid: rgb(248.5, 248.5, 251); /* Mid-point of primary-base and primary-elevated */
		--apple-background-primary-elevated-more: #F2F2F7;
		--apple-text-primary: #000000;
		--apple-text-primary-inverted: #FFFFFF;
		--apple-text-seconday: #8A8A8E;
		--apple-text-tertiary: #C4C4C7;
		--apple-text-quaternary: #DCDCDD;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--apple-system-red: rgb(255, 66, 69);
		--apple-system-red-marker: rgba(255, 66, 69, 0.5);
		--apple-system-red-highlighter: rgba(255, 66, 69, 0.25);
		--apple-system-orange: rgb(255, 146, 48);
		--apple-system-orange-marker: rgba(255, 146, 48, 0.5);
		--apple-system-orange-highlighter: rgba(255, 146, 48, 0.25);
		--apple-system-yellow: rgb(255, 214, 0);
		--apple-system-yellow-marker: rgba(255, 214, 0, 0.5);
		--apple-system-yellow-highlighter: rgba(255, 214, 0, 0.25);
		--apple-system-green: rgb(48, 209, 88);
		--apple-system-green-marker: rgba(48, 209, 88, 0.5);
		--apple-system-green-highlighter: rgba(48, 209, 88, 0.25);
		--apple-system-mint: rgb(0, 218, 195);
		--apple-system-mint-marker: rgba(0, 218, 195, 0.5);
		--apple-system-mint-highlighter: rgba(0, 218, 195, 0.25);
		--apple-system-teal: rgb(0, 210, 224);
		--apple-system-teal-marker: rgba(0, 210, 224, 0.5);
		--apple-system-teal-highlighter: rgba(0, 210, 224, 0.25);
		--apple-system-cyan: rgb(60, 211, 224);
		--apple-system-cyan-marker: rgba(60, 211, 224, 0.5);
		--apple-system-cyan-highlighter: rgba(60, 211, 224, 0.25);
		--apple-system-blue: rgb(0, 145, 255);
		--apple-system-blue-marker: rgba(0, 145, 255, 0.5);
		--apple-system-blue-highlighter: rgba(0, 145, 255, 0.25);
		--apple-system-indigo: rgb(107, 93, 255);
		--apple-system-indigo-marker: rgba(107, 93, 255, 0.5);
		--apple-system-indigo-highlighter: rgba(107, 93, 255, 0.25);
		--apple-system-purple: rgb(219, 52, 242);
		--apple-system-purple-marker: rgba(219, 52, 242, 0.5);
		--apple-system-purple-highlighter: rgba(219, 52, 242, 0.25);
		--apple-system-pink: rgb(255, 55, 95);
		--apple-system-pink-marker: rgba(255, 55, 95, 0.5);
		--apple-system-pink-highlighter: rgba(255, 55, 95, 0.25);
		--apple-system-brown: rgb(183, 138, 102);
		--apple-system-brown-marker: rgb(183, 138, 102, 0.5);
		--apple-system-brown-highlighter: rgb(183, 138, 102, 0.25);
		--apple-system-systemGray: rgb(142, 142, 147);
		--apple-system-systemGray-marker: rgba(142, 142, 147, 0.5);
		--apple-system-systemGray-highlighter: rgba(142, 142, 147, 0.25);
		--apple-system-systemGray2: rgb(99, 99, 102);
		--apple-system-systemGray3: rgb(72, 72, 74);
		--apple-system-systemGray3-glass: rgb(72, 72, 74, 0.1);
		--apple-system-systemGray4: rgb(58, 58, 60);
		--apple-system-systemGray5: rgb(44, 44, 46);
		--apple-system-systemGray6: rgb(28, 28, 30);
		--apple-background-primary-base: rgb(0,0,0);
		--apple-background-primary-elevated: #1C1C1E;
		--apple-background-primary-elevated-mid: #171717; /* Mid-point of primary-base and primary-elevated */
		--apple-background-primary-elevated-glass: rgba(156, 156, 158, 0.1);
		--apple-background-primary-elevated-more: #2C2C2E;
		--apple-text-primary: #FFFFFF;
		--apple-text-primary-inverted: #000000;
		--apple-text-seconday: #8D8D93;
		--apple-text-tertiary: #47474A;
		--apple-text-quaternary: #262627;
	}
}

/* Gomuks-css specific theming */
/* Refer to https://github.com/gomuks/gomuks/blob/main/web/src/index.css */
:root {
	--primary-color: var(--apple-system-green) !important;
	--primary-color-dark: color-mix(in srgb, var(--apple-system-green), var(--apple-text-primary) 10%)!important;
	
	--sender-color-0: var(--apple-system-red) !important;
	--sender-color-1: var(--apple-system-orange) !important;
	--sender-color-2: var(--apple-system-yellow) !important;
	--sender-color-3: var(--apple-system-green) !important;
	--sender-color-4: var(--apple-system-mint) !important;
	--sender-color-5: var(--apple-system-cyan) !important;
	--sender-color-6: var(--apple-system-blue) !important;
	--sender-color-7: var(--apple-system-indigo) !important;
	--sender-color-8: var(--apple-system-purple) !important;
	--sender-color-9: var(--apple-system-pink) !important;
	
	--border-color: var(--apple-system-systemGray) !important;
	
	--background-color: var(--apple-background-primary-base) !important;
	--login-background-color: var(--apple-background-primary-elevated) !important;
	--code-background-color: var(--apple-background-primary-elevated) !important;
	--url-preview-background-color: var(--apple-background-primary-elevated) !important;
	--media-placeholder-default-background: var(--apple-background-primary-elevated) !important;
	--media-placeholder-button-background: var(--apple-system-systemGray4) !important;
	
	--timeline-hover-bg-color: color-mix(in srgb, var(--apple-background-primary-elevated-mid), var(--apple-text-primary) 5%) !important;
	--timeline-highlight-bg-color: var(--apple-system-yellow-highlighter);
	--timeline-highlight-hover-bg-color: var(--apple-system-yellow-marker);
	--timeline-jump-bg-color: var(--apple-system-green-highlighter);
	--timeline-jump-hover-bg-color: var(--apple-system-green-marker);
	--timeline-soft-failed-bg-color: var(--apple-system-red-marker);
	--timeline-policy-server-spammy-bg-color: var(--apple-system-red-highlighter);
	
	--composer-background-color: var(--apple-background-primary-base-glass) !important;
	--room-list-background: var(--apple-background-primary-elevated-more) !important;
	
	--pill-background-color: var(--apple-system-systemGray3) !important;
	--highlight-pill-background-color: var(--primary-color) !important;
	--highlight-pill-text-color: var(--apple-text-primary-inverted) !important;
	
	--text-color: var(--apple-text-primary) !important;
	--inverted-text-color: var(--apple-text-primary-inverted) !important;
	--secondary-text-color: var(--apple-text-seconday) !important;
	--semisecondary-text-color: var(--apple-text-seconday) !important;
	
	--error-color: var(--apple-system-red) !important;
	
	--link-text-color: var(--apple-system-blue) !important;
	--visited-link-text-color: var(--apple-system-blue) !important;
	
	--button-hover-color: var(--apple-system-systemGray5) !important;
	/* Used in autocompletion */
	--light-hover-color: var(--apple-system-systemGray6) !important;
	
}

/***** Global - Modals ******/
/* Make everything in the foreground of the modal blured and grayscaled*/
div.overlay.modal.dimmed {
	backdrop-filter: blur(4px) grayscale(45%) saturate(170%);
}
/* Make the modal a different colour than the background (Better contrast in dark mode) */
div.overlay.modal.dimmed > div.modal-box {
	background-color: var(--apple-system-systemGray6);
}
/* Accent colour highlight "Report/Delete" Message, Share message, (etc.?) */
div.overlay.modal.dimmed > div.modal-box > div.modal-box-inner > form.confirm-message-modal > div.confirm-buttons > button:nth-of-type(2) {
	background-color: var(--primary-color);
	color: var(--inverted-text-color);
}
/* Rounded confirmation buttons */
div.confirm-buttons > button {
	border-radius: 32px;
}
/* Make the toggles match liquid glass look */
input.toggle {
	width: 3.75em !important;
}
input.toggle {
	&:checked {
		&::after {
			margin-left: 1em !important;
		}
	}
}
input.toggle {
	&::after {
		border-radius: 32px !important;
		width: 2.25em !important;
	}
}
/* State explorer, make it more clear that it's a selection thing */
div.room-state-explorer-box > div.state-explorer > div.title-bar {
	background-color: var(--apple-system-systemGray5) !important;
	border-radius: 24px;
	padding: 6px;
}
div.room-state-explorer-box > div.state-explorer > div.title-bar > button:disabled {
	background-color: var(--pill-background-color) !important;
	border-radius: 24px;
	font-weight: inherit !important;
}
/****** Room list ******/

/* Remove useless search icon*/
div.room-search-wrapper > button:nth-of-type(2) {
	visibility: collapse;
}

.room-search-wrapper,
.space-bar,
.room-list {
	background-color: var(--apple-background-primary-elevated-more) !important;
}

.room-list-wrapper {
	background-color: var(--apple-background-primary-elevated-glass) !important;
}

/* Desktop Only */
@media screen and (min-width: 30rem) {
	.room-list-wrapper {
		/* Add margins for "floating" effect; So room-list-resizer is on the edge instead of floating somewhere */
		margin: 8px 0px 8px 8px !important;
		/* Roundy */
		border-radius: 24px;
	}
}

/* [!!] Temporary - Make stuff rounded */
div.room-list {
	padding-left: 8px;
	padding-right: 8px;
}
div.room-entry {
	border-radius: 8px;
	margin: 0.5rem 0;
}


/****** Room view ******/

/*** Room header ***/

/** Right buttons on desktop **/
div.right-buttons.big-screen {
	background-color: var(--apple-background-primary-elevated) !important;
	border-radius: 32px;
}
/* Adjust border radius of the ends */
div.big-screen.right-buttons > button:nth-of-type(1) {
	border-radius: 32px 0px 0px 32px;
}
div.big-screen.right-buttons > button:nth-of-type(5) {
	border-radius: 0px 32px 32px 0px;
}

div.room-header {
	/* Remove border between timeline view and room header*/
	border-bottom: none !important;
}

/*** Messsage Composer ***/
/** We apply "twice" so it floats above url/media preview **/
div.message-composer, div.input-area {
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px) saturate(200%);
	border: none !important;
}
/** Round input buttons **/
div.message-composer > div.input-area > button {
	border-radius: 32px;
}

/** Send button **/
div.message-composer > div.input-area {
	button[title="Send message"] {
		margin-right: 0.3em;
	}
	/** Make send button green when active **/
	button[title="Send message"]:enabled {
		background-color: var(--primary-color) !important;
		color: var(--inverted-text-color) !important;
	}
}

/*** Handling content ***/
div.location-container > div.leaflet-container, /* location widget */
div.media-container /* unpreviewed/previewed media (images/videos) */ {
	border-radius: 8px;
}
/** Theme location widget **/
/* Theme '+' and '-' buttons */
div.location-container > div.leaflet-container > div > div {
	div.leaflet-bar {
		border: none
	}
	div.leaflet-bar > a {
		background-color: var(--apple-background-primary-elevated-glass);
		backdrop-filter: blur(32px) brightness(1.15);
		color: var(--text-color) !important;
		text-decoration: none;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	}
	div.leaflet-bar > a:hover {
		backdrop-filter: blur(16px) grayscale(0.3) !important;
	}
	div.leaflet-bar > a.leaflet-control-zoom-in {
		border-radius: 32px 32px 0px 0px;
	}
	div.leaflet-bar > a.leaflet-control-zoom-out {
		border-radius: 0px 0px 32px 32px;
	}
}
/* Make attribution text actually readable */
div.leaflet-control-attribution {
	background-color: var(--apple-background-primary-base-glass) !important;
	color: var(--text-color);
	backdrop-filter: blur(64px);
	a {
		color: var(--link-text-color);
	}
}
/* Dark mode maps */
:root {
	/* from https://gist.github.com/BrendonKoz/b1df234fe3ee388b402cd8e98f7eedbd */
	--map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}
@media (prefers-color-scheme: dark) {
	.leaflet-container > .leaflet-map-pane {
		filter: var(--map-tiles-filter, none);
	}
	.leaflet-control-attribution {
		filter: none !important;
	}
	.leaflet-popup-content-wrapper, .leaflet-popup-tip {
		box-shadow: none !important;
	}
}
/** Highlight system messages from gomuks itself in the accent/primary colour **/
div.timeline-event[data-event-id*="$gomuks-internal"] {
	background-color: var(--apple-system-green-highlighter) !important;
	div.event-sender-and-time > span.event-sender {
		color: var(--sender-color-3);
	}
}

/****** Sidebar / Right Panel ******/
/*** User Info ***/
/** Make @gomuks user special **/
div.right-panel > div.right-panel-content.user {
	div[title="gomuks"] {
		background-color: var(--apple-system-green-highlighter) !important;
	}
	div[title="@gomuks"] {
		background-color: var(--apple-system-green-highlighter) !important;
	}
}