/*
    Theme Name:  Flat
    Author:      Robert Zollner (@Lupul)
    Website:     www.hestiacp.com
*/

@import url("../media_queries");

:root {
	/* Alerts */
	--alert-box-shadow: none;
	--alert-text-shadow: none;
}

/* Top bar
   ========================================================================== */

.top-bar {
	box-shadow: none;
	background: #5070a6;
}

.top-bar-usage-inner {
	text-shadow: none;
}

.top-bar-notifications-panel {
	@media (--viewport-small) {
		box-shadow: none;
		border-color: #ccc;
	}
}

.top-bar-menu-link {
	text-shadow: none;

	&:hover,
	&:active {
		background: #fff;
		box-shadow: none;
	}

	&.active {
		background: #fff;
	}
}

/* Toolbar
   ========================================================================== */

.toolbar-sorting-menu {
	box-shadow: none;
	border-color: #ccc;
	background-color: #fff;
}

/* Units table
   ========================================================================== */

.units-table-row {
	@media (--viewport-large) {
		&:hover {
			box-shadow: none;
		}
	}
}

.units-table-cell {
	& a {
		color: #5f7eb3;

		&:hover {
			color: #5f7eb3;
		}
	}
}

.units-table-badge {
	@media (--viewport-large) {
		box-shadow: none;
	}
}

/* Statistics
   ========================================================================== */

.stats-item {
	@media (--viewport-large) {
		&:hover {
			box-shadow: none;
		}
	}
}

/* Spinner
   ========================================================================== */

.spinner-overlay {
	& .fas {
		box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
	}
}

/* Collapse component
   ========================================================================== */

.collapse-header {
	background: #fafafa;
	box-shadow: none;
}

/* Forms
   ========================================================================== */

.form-control,
.form-select {
	box-shadow: none;
}

/* Buttons
   ========================================================================== */

.button {
	box-shadow: none;
	background: linear-gradient(to bottom, rgb(235 243 249 / 100%) 0%, rgb(223 235 245 / 100%) 100%);

	&:hover {
		color: #6986b7;
		box-shadow: none;
		background: linear-gradient(
			to bottom,
			rgb(241 248 253 / 100%) 0%,
			rgb(227 240 251 / 100%) 100%
		);
	}

	&:active {
		box-shadow: none;
		background: linear-gradient(
			to bottom,
			rgb(210 232 250 / 100%) 0%,
			rgb(194 224 248 / 100%) 100%
		);
	}
}

.button-secondary {
	box-shadow: none;
	background: linear-gradient(to bottom, rgb(250 250 250 / 100%) 0%, rgb(241 241 241 / 100%) 100%);
}

.button-danger {
	&:hover {
		background: #fcd3cf;
		color: #f4301a;
		border-color: #f27e71;
	}

	&:active {
		background: #a91200;
		color: #fff;
		border-color: #f4301a;
	}
}

/* Modals
   ========================================================================== */

.modal {
	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
}

/* Login
   ========================================================================== */

.body-login,
.body-reset {
	background: #5f7eb3;
}

.login {
	@media (--viewport-small) {
		background-color: rgb(255 255 255 / 80%);
		box-shadow: 0 2px 10px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255 / 100%);
	}
}