/** ----------------------------------------------------------------------------
 * Derivative colours (fixed variants of inherited variables)
 */
@default-action-color: darken(@secondary-background-color, 15%);
@default-action-contrast: contrast(@default-action-color, #444444);
@primary-background-contrast: contrast(@primary-background-color, #444444);
@primary-action-contrast: contrast(@primary-action-color, #444444);
@secondary-background-contrast: contrast(@secondary-background-color, #444444);
@secondary-action-contrast: contrast(@secondary-action-color, #444444);
@selection-background: lighten(@selection-color, 30%);
@success-background: lighten(@success-color, 45%);
@success-border: lighten(@success-color, 30%);
@error-background: lighten(@error-color, 45%);
@error-border: lighten(@error-color, 30%);
@error-contrast: contrast(@error-color);
@pending-background: lighten(@pending-color, 45%);
@pending-border: lighten(@pending-color, 30%);
@window-border-color: @component-color;
@code-background-color: #f8f8f8;
@code-border-color: #cccccc;
@code-font-color: #333333;

/** ----------------------------------------------------------------------------
 * Document components
 */
html {
	.custom-scroll(@transparent-dark, @custom-scrollbar-color, 0);
}

* {
	.custom-scroll(@transparent-dark, @custom-scrollbar-color);
}

body {
	color: @primary-font-color;

	* {
		border-color: @component-color;
	}
}

code {
	background-color: @code-background-color;
	border-color: @code-border-color;
	color: @code-font-color;
}

blockquote::before {
	background-color: @transparent-darker;
}

.main-content,
.cms-page,
.page-container {
	background-color: @content-background-color;

	header {
		background-color: @content-background-color;
		border-color: @component-color;
	}
}

.page-container table {
	overflow: hidden;
	background-color: @secondary-background-color;

	th,
	td {
		border-color: @component-color;
	}

	th {
		background-color: @content-background-color;
	}

	tr {
		background-color: @transparent-light;

		&:nth-of-type(even) {
			background-color: @transparent-lightest;
		}
	}

	tr:hover td {
		background-color: @content-background-color;
	}
}

.burger i {
	background-color: @primary-font-color;
}

/** ----------------------------------------------------------------------------
 * Forms
 */

.input-shade(@primary-font-color, @content-background-color);

.flex-nav {
	.input-shade(@primary-background-contrast, @primary-background-color);

	label,
	legend {
		color: @tertiary-font-color;
	}

	input {
		&:focus {
			border-color: fade(@primary-background-contrast, 50%);
		}
	}

	.input.checkbox.toggle {
		input:checked + label::before {
			background-color: @primary-action-color;
		}
	}
}

.input-line {
	&.setting-changed > label {
		color: @selection-color;
	}

	i,
	.settings-description {
		color: @secondary-font-color;
	}

	.settings-alert {
		background-color: @pending-background;
		border-color: @pending-border;
		color: @pending-color;
	}
}

.emoji-filter {
	input {
		background-color: @content-background-color;
	}
}

input:-webkit-autofill {
	color: @primary-font-color !important;
	background-color: transparent !important;
}

.input {
	&.radio {
		label {
			&::before {
				background-color: @content-background-color;
				border-color: lighten(@secondary-background-contrast, 30%);
			}

			&::after {
				background-color: @secondary-background-contrast;
			}
		}
	}

	&.checkbox.toggle {
		input:checked + label::before {
			background-color: @secondary-background-contrast;
		}

		input:disabled + label::before {
			background-color: lighten(@secondary-background-contrast, 50%) !important;
		}

		label {
			&::before {
				background-color: lighten(@secondary-background-contrast, 30%);
			}

			&::after {
				background-color: @content-background-color;
			}

			&:hover {
				&::before {
					background-color: lighten(@secondary-background-contrast, 20%);
				}
			}
		}
	}
}

/** ----------------------------------------------------------------------------
 * Misc typography variants
 */
a {
	color: @primary-font-color;
}

a:active,
a:hover {
	color: @primary-action-color;
}

.message,
.flex-tab {
	a i,
	a[class^="icon-"] {
		color: @primary-font-color;

		&:hover {
			color: darken(@primary-font-color, 10%);
		}
	}
}

.load-more .load-more-loading,
.secondary-text {
	color: @secondary-font-color;
}

.alert-icon {
	color: @success-color;
}

.error {
	background-color: @error-background;
	border-color: @error-color;
	color: @error-color;
}

/** ----------------------------------------------------------------------------
 * Admin and settings styles
 */
.page-settings {
	.content {
		background-color: @transparent-dark;
	}

	.section {
		background-color: @content-background-color;
	}

	.terminal {
		background-color: #444444;
		color: white;

		.time {
			color: @secondary-font-color;
		}
	}
}

.page-list,
.page-settings {
	a {
		color: @primary-font-color;

		&:hover {
			color: @primary-action-color;
		}
	}
}

.settings-file-preview .preview.no-file {
	background-color: @transparent-light;
	color: @secondary-font-color;
}

.new-logs {
	background: @primary-action-contrast;
	color: @primary-action-color;
}

.code-error-box {
	.title {
		background-color: @error-color;
		color: white;
	}

	pre {
		color: @error-color;
		border-color: @error-border;
		background-color: @transparent-lightest;
	}
}

.code-mirror-box {
	.buttons {
		background-color: #f7f7f7;
		// matches plugin styles
	}

	&.code-mirror-box-fullscreen {
		background-color: @content-background-color;
	}
}

.avatar-suggestion-item {
	background-color: @tertiary-background-color;

	.avatar {
		background-size: cover;
		background-color: @tertiary-background-color;
	}

	.question-mark::before {
		color: @secondary-font-color;
	}
}

/** ----------------------------------------------------------------------------
 * Asides (external to main application views)
 */
.spotlight {
	background-color: @transparent-darker;

	> .spotlight-input {
		background-color: @secondary-background-color;
		color: @secondary-font-color;

		> i {
			color: @secondary-font-color;
		}
	}
}

.mobile-message-menu {
	background-color: @transparent-dark;
}

.full-page,
.page-loading {
	.gradient(shade(@primary-background-color), @primary-background-color);
	color: @tertiary-font-color;

	a {
		color: @tertiary-font-color;
	}

	a:hover {
		color: @primary-background-contrast;
	}

	.spinner > div {
		background-color: @primary-background-contrast;
	}
}

#login-card {
	color: @primary-font-color;
	background-color: @content-background-color;
	.input-shade(@primary-font-color, @content-background-color);

	.input-text {
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0 20px @content-background-color inset;
		}
	}
}

.dropzone.over .dropzone-overlay {
	background-color: @transparent-darkest;
	color: @content-background-color;

	> div {
		background-color: @transparent-darkest;
	}
}

/** ----------------------------------------------------------------------------
 * Room components
 */
.new-message {
	color: @primary-action-contrast;
	background-color: @primary-action-color;
}

.ticks-bar {
	.tick {
		background-color: @primary-action-color;
	}

	.tick-all {
		background-color: @selection-color;
	}
}

.room-not-found {
	color: @error-color;
}

.favorite-room {
	color: @pending-color;
}

.toggle-favorite {
	color: @component-color;
}

.container-bars {
	.upload-progress {
		background-color: @component-color;
		color: @primary-action-color;

		&.upload-error {
			background-color: @error-background;
			border-color: @error-border;
		}

		.upload-progress-progress {
			background-color: @success-background;
		}
	}

	.unread-bar {
		background-color: @component-color;
		color: @primary-action-color;
	}
}

.messages-container {
	.edit-room-title {
		.linkColors(@secondary-font-color, @primary-font-color);
	}

	.footer {
		background: @content-background-color;
	}

	.message-form {
		color: @secondary-font-color;

		.input-message-container {
			background-color: @content-background-color;
		}

		.message-buttons {
			.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);

			&:hover {
				background-color: mix(@secondary-background-color, contrast(@primary-font-color), 20%);
			}
		}

		textarea {
			&.editing {
				background-color: lighten(@pending-color, 40%);
			}
		}
	}

	.new-message {
		color: @primary-action-contrast;
		background-color: @primary-action-color;
	}

	.messages-box {
		.jump-recent {
			background-color: @component-color;
		}

		&.selectable .selected {
			background-color: @selection-background;
		}

		.load-more span {
			background-color: @secondary-background-color;
		}
	}
}

.message-popup {
	background: @content-background-color;
}

.message-popup-title {
	background-color: @secondary-background-color;
	// border-bottom-color: #E7E7E7;
}

.popup-item {
	// color: @secondary-font-color;

	&.selected {
		color: @primary-action-contrast;
		background-color: @primary-action-color;
	}

	span {
		color: @secondary-font-color;
	}
}

.messages-box {
	.start {
		color: @info-font-color;
	}

	.editing .body,
	textarea.editing {
		background-color: lighten(@pending-color, 40%);
	}
}

/** ----------------------------------------------------------------------------
 * Message content
 */
.first-unread {
	.body {
		&::before {
			background: @transparent-darker;
		}

		&::after {
			color: @primary-font-color;
		}
	}
}

.first-unread-opaque {
	.body {
		&::before {
			background: @transparent-dark;
		}
	}
}

.message {
	.body {
		color: @primary-font-color;
	}

	&.system .body {
		color: @info-font-color;
	}

	&:hover {
		background-color: @transparent-dark;
	}

	.toggle-options {
		color: @secondary-font-color;
	}

	.message-dropdown,
	.options-menu {
		color: lighten(@primary-font-color, 13%);
		background-color: @content-background-color;

		ul li:hover {
			background-color: @tertiary-background-color;
		}

		.message-dropdown-close {
			background-color: @secondary-background-color;
		}
	}

	&.new-day::before {
		background-color: @content-background-color;
	}

	&.new-day::after,
	.info,
	.user-view,
	.message-alias {
		color: @info-font-color;
		border-color: @component-color;
	}

	.user {
		color: @primary-font-color;
	}

	.is-bot,
	.role-tag {
		background-color: @info-font-color;
		color: contrast(@info-font-color);
	}

	a {
		.linkColors(@link-font-color, darken(@link-font-color, 10%));
	}

	a.mention-link {
		color: @primary-action-color;

		&.mention-link-me {
			color: @primary-action-contrast;
			background-color: @primary-action-color;
		}

		&.mention-link-all {
			color: @primary-action-contrast;
			background-color: @attention-color;
		}
	}

	.highlight-text {
		background-color: @selection-background;
	}

	.attachment {
		.attachment-block-border {
			background-color: @info-font-color;
		}
	}
}

/** ----------------------------------------------------------------------------
 * Side nav
 */
.side-nav {
	color: @tertiary-font-color;
	background-color: @primary-background-color;

	* {
		border-color: @transparent-darker;
	}

	a,
	.info {
		.linkColors(@tertiary-font-color, @tertiary-font-color);
	}

	.arrow::before,
	.arrow::after {
		background-color: @tertiary-font-color;
	}

	.info,
	.options,
	.content,
	footer,
	header {
		background-color: @primary-background-color;
	}

	.rooms-list {
		background-color: lighten(@primary-background-color, 2.5%);
	}

	h3:hover,
	li:hover,
	.more:hover,
	.selected-users li {
		background-color: @transparent-darker;
	}

	li.active {
		background-color: @transparent-light !important;
	}

	i {
		color: @transparent-lighter;
	}

	i.status-offline {
		color: @transparent-lighter !important;
	}

	.opt i:hover {
		color: @transparent-lightest;
	}

	.has-alert .name {
		color: @primary-background-contrast;
	}

	.unread {
		background-color: @success-color;
	}

	.unread-rooms {
		background-color: @primary-action-color;
		color: @primary-action-contrast;
	}

	.button {
		.buttonColors(@tertiary-font-color, mix(@primary-action-color, @primary-background-color));
	}

	.options button {
		.buttonColors(@tertiary-font-color, @primary-background-color);
	}
}

/** ----------------------------------------------------------------------------
 * Flex tabs / admin fly-out panels
 */
.flex-tab {
	background-color: @secondary-background-color;

	input,
	select,
	textarea {
		background-color: @content-background-color;

		&:focus {
			border-color: lighten(@secondary-background-contrast, 30%);
		}
	}

	.content,
	.user-view,
	.list-view {
		background-color: @secondary-background-color;
	}

	.message {
		&.new-day::before {
			background-color: @secondary-background-color;
		}
	}

	.channel-settings {
		.buttons {
			background-color: @secondary-background-color;

			.button {
				.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
			}
		}

		.button.edit {
			.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
		}

		.icon-ok {
			color: inherit;
		}

		.input.checkbox.toggle {
			input:checked + label::before {
				background-color: @primary-background-color;
			}
		}
	}
}

.flex-tab-bar {
	background-color: @content-background-color;
	border-color: @component-color;

	.tab-button {
		&:hover {
			background-color: @secondary-background-color;
		}

		&.active {
			background-color: @secondary-background-color;
			border-right-color: @selection-color;
		}

		&.attention {
			.blink(@selection-color);
		}
	}

	.counter {
		background: @secondary-font-color;
		color: white;
	}
}

.webrtc-video {
	&.webrtc-video-overlay,
	.main-video,
	.state-overlay::before,
	.videos .video-item {
		background-color: @transparent-darker;
		color: white;
	}

	.main-video > div,
	.video-muted-overlay,
	.videos .video-item > div {
		background-color: @transparent-darker;
	}

	video {
		background-color: black;
	}
}

/** ----------------------------------------------------------------------------
 * User status / user meta
 */
i.status-online {
	color: @status-online;
}

.account-box .status-online .thumb::after,
.account-box .status.online::after,
.popup-user-status-online,
.status-online::after,
.user-image.status-online .avatar::after {
	background-color: @status-online;
	border-color: darken(@status-online, 10%);
}

i.status-away {
	color: @status-away;
}

.account-box .status-away .thumb::after,
.account-box .status.away::after,
.popup-user-status-away,
.status-pending::after,
.user-image.status-away .avatar::after {
	background-color: @status-away;
	border-color: darken(@status-away, 10%);
}

i.status-busy {
	color: @status-busy;
}

.account-box .status-busy .thumb::after,
.account-box .status.busy::after,
.popup-user-status-busy,
.status-busy::after,
.user-image.status-busy .avatar::after {
	background-color: @status-busy;
	border-color: darken(@status-busy, 10%);
}

i.status-offline {
	color: @status-offline;
}

.popup-user-status-offline,
.status-offline::after,
.user-image.status-offline .avatar::after {
	background-color: @status-offline;
	border-color: darken(@status-offline, 10%);
}

.account-box .status-offline .thumb::after,
.account-box .status.offline::after {
	background-color: @transparent-lighter;
}

.popup-user-status {
	border-color: @transparent-dark;
}

.popup-user-status-system {
	border-color: transparent;
}

.user-view {
	p {
		color: @secondary-font-color;
	}

	.box::after,
	.stats li,
	.tags li {
		background-color: @component-color;
	}
}

/** ----------------------------------------------------------------------------
 * Buttons!
 */
.actionLinks li .action-link {
	.buttonColors(@primary-action-contrast, @primary-action-color);
}

// new layout buttons

.button {
	.buttonColors(@default-action-contrast, @default-action-color);

	&.primary {
		.buttonColors(@primary-action-contrast, @primary-action-color);
	}

	&.secondary {
		.buttonColors(@secondary-action-contrast, @secondary-action-color);
	}

	&.tertiary {
		.buttonColors(@primary-action-contrast, @selection-color);
	}

	&.danger {
		.buttonColors(@error-contrast, @error-color);
	}

	&.external-login {
		color: white;

		&.facebook {
			background-color: #325c99;
		}

		&.twitter {
			background-color: #02acec;
		}

		&.google {
			background-color: #dd4b39;
		}

		&.github {
			background-color: #4c4c4c;
		}

		&.gitlab {
			background-color: #373d47;
		}

		&.trello {
			background-color: #026aa7;
		}

		&.meteor-developer {
			background-color: #de4f4f;
		}

		&.wordpress {
			background-color: #1e8cbe;
		}

		&.linkedin {
			background-color: #1b86bc;
		}
	}
}

/** ----------------------------------------------------------------------------
 * Feedback and overlay content
 */
.icon-ok,
.feedback-success {
	color: @success-color;
}

.feedback-warning {
	color: @pending-color;
}

.feedback-error {
	color: @error-color;
}

.livechat-form .error,
.offline .error {
	background-color: @error-background;
}

.alert-warning {
	color: darken(@pending-color, 25%);
	background-color: @pending-background;
	border-color: @pending-border;
}

.alert-link {
	.linkColors(@link-font-color, darken(@link-font-color, 10%));
}

.alert-danger {
	color: @error-color;
	background-color: @error-background;
	border-color: @error-border;
}

.side-nav .input-error,
label.required::after {
	color: @error-color;
}

.burger .unread-burger-alert {
	background-color: @error-color;
	color: @error-contrast;
}

.loading-animation.dark > div {
	background-color: @transparent-darkest;
}
