// import external dependencies
@import url('https://fonts.googleapis.com/css?family=Fira+Mono');
@import url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css');

$primary-color: #88b544;
$primary-color-dark: darken($primary-color, 3%);
$primary-color-light: lighten($primary-color, 3%);
$secondary-color: lighten($primary-color, 37.5%);
$secondary-color-dark: darken($secondary-color, 3%);
$secondary-color-light: lighten($secondary-color, 3%);
// Gray colors
$dark-color: #010101;
$light-color: #fff;
$black-color: #000;
$gray-color: #5e6769;
$gray-color-dark: #4a5052;
$gray-color-600: lighten($gray-color, 10%);
$gray-color-700: lighten($gray-color, 20%);
$gray-color-800: lighten($gray-color, 40%);
$border-color: #222627;
$border-color-dark: darken($border-color, 10%);
$border-color-light: lighten($border-color, 8%);
$bg-color: #131516;
$bg-color-dark: #222627;
$bg-color-medium: #181a1b;
$bg-color-light: #1b1e1f;
// Control colors
$success-color: #88b544;
$warning-color: #ffb700;
$error-color: #ed2f47;
// Other colors
$code-color: #ed2f47;
$highlight-color: #ffe9b3;
$body-bg: $bg-color-light;
$body-font-color: #c1ced1;
$link-color: $primary-color;
$link-color-dark: darken($link-color, 10%);
$link-color-light: lighten($link-color, 10%);

$mono-font-family: "Fira Mono", monospace;
$code-font-family: "Fira Code", monospace;
$size-2x: 1440px;
$border-radius: 0;

$html-font-size: 20px;
$unit-2: .4rem;
$layout-spacing: $unit-2;
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;

// import spectre
@import "~spectre.css/src/spectre";
@import "~spectre.css/src/spectre-exp";

// general
html, body {
	padding: 0;
	margin: 0;
	height: 100vh;
}
a, a:visited {
	color: $link-color;
	cursor: pointer;
}
a:focus, a:hover, a:active, a.active {
	text-decoration: none;
}
hr {
	border: 0;
	height: 1px;
	background: $border-color-dark;
	margin: $unit-4 auto;
}

// icons
.icon {
	font-size: 1em;
}
.icon-1-5x {
	font-size: 24px;
}
.icon-2x {
	font-size: 32px;
}
.icon-3x {
	font-size: 48px;
}
.icon-4x {
	font-size: 64px;
}
.icon-sm {
	font-size: 16px;
}
.icon-right {
	float: right;
	margin-top: 3px;
	margin-right: 3px;
}
.icon-left {
	float: left;
	margin-top: 3px;
	margin-left: 3px;
}
.icon-thin {
	--ionicon-stroke-width: 20px;
}
ion-icon {
	font-size: 19px;
	vertical-align: middle;
	margin-bottom: 2px;
}

// positions and spacing
.m-0   { margin: 0; }
.p-0   { padding: 0; }

.m-3   { margin: .6rem !important; }
.mt-3  { margin-top: .6rem !important; }
.mr-3  { margin-right: .6rem !important; }
.mb-3  { margin-bottom: .6rem !important; }
.ml-3  { margin-left: .6rem !important; }
.mx-3  { margin-right: .6rem !important; margin-left: .6rem !important; }
.my-3  { margin-top: .6rem !important; margin-bottom: .6rem !important; }
.p-3   { padding: .6rem !important; }
.pt-3  { padding-top: .6rem !important; }
.pr-3  { padding-right: .6rem !important; }
.pb-3  { padding-bottom: .6rem !important; }
.pl-3  { padding-left: .6rem !important; }
.px-3  { padding-right: .6rem !important; padding-left: .6rem !important; }
.py-3  { padding-top: .6rem !important; padding-bottom: .6rem !important; }

.m-4   { margin: .8rem !important; }
.mt-4  { margin-top: .8rem !important; }
.mr-4  { margin-right: .8rem !important; }
.mb-4  { margin-bottom: .8rem !important; }
.ml-4  { margin-left: .8rem !important; }
.mx-4  { margin-right: .8rem !important; margin-left: .8rem !important; }
.my-4  { margin-top: .8rem !important; margin-bottom: .8rem !important; }
.p-4   { padding: .8rem !important; }
.pt-4  { padding-top: .8rem !important; }
.pr-4  { padding-right: .8rem !important; }
.pb-4  { padding-bottom: .8rem !important; }
.pl-4  { padding-left: .8rem !important; }
.px-4  { padding-right: .8rem !important; padding-left: .8rem !important; }
.py-4  { padding-top: .8rem !important; padding-bottom: .8rem !important; }

.m-5   { margin: 1rem !important; }
.mt-5  { margin-top: 1rem !important; }
.mr-5  { margin-right: 1rem !important; }
.mb-5  { margin-bottom: 1rem !important; }
.ml-5  { margin-left: 1rem !important; }
.mx-5  { margin-right: 1rem !important; margin-left: 1rem !important; }
.my-5  { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.p-5   { padding: 1rem !important; }
.pt-5  { padding-top: 1rem !important; }
.pr-5  { padding-right: 1rem !important; }
.pb-5  { padding-bottom: 1rem !important; }
.pl-5  { padding-left: 1rem !important; }
.px-5  { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-5  { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.mb-15 { margin-bottom: 3rem; }

.ls-1  { letter-spacing: 1px; }
.ls-2  { letter-spacing: 2px; }
 
.gx-5  { column-gap: 1rem; }
.gy-2  { row-gap: .4rem; }
.g-2   { gap: .4rem; }
.g-4   { gap: .8rem; }

.pos-relative {
	position: relative;
}
.pos-absolute-tr {
	position: absolute;
	top: 0;
	right: 0;
}

.o-hidden {
	overflow: hidden;
}

// colors and text
.bg-primary-dark {
	background-color: $bg-color-dark;
}
.text-dark {
	color: $gray-color-dark !important;
}
.text-gray {
	color: $gray-color-600 !important;
}
.text-primary {
	color: $primary-color !important;
}
.text-warning {
	color: $warning-color !important;
}
.text-danger {
	color: $error-color !important;
}
.weight-normal {
	font-weight: 400;
}

// responsive grid
.container {
	&.grid-2x {
		max-width: $grid-spacing * 2 + $size-2x;
	}
}
.show-2x {
	display: none !important;
}
@media (max-width: $size-2x) {
	.col-2x-12,
	.col-2x-11,
	.col-2x-10,
	.col-2x-9,
	.col-2x-8,
	.col-2x-7,
	.col-2x-6,
	.col-2x-5,
	.col-2x-4,
	.col-2x-3,
	.col-2x-2,
	.col-2x-1,
	.col-2x-auto {
		flex: none;
	}
	.col-2x-12 {
		width: 100%;
	}
	.col-2x-11 {
		width: 91.66666667%;
	}
	.col-2x-10 {
		width: 83.33333333%;
	}
	.col-2x-9 {
		width: 75%;
	}
	.col-2x-8 {
		width: 66.66666667%;
	}
	.col-2x-7 {
		width: 58.33333333%;
	}
	.col-2x-6 {
		width: 50%;
	}
	.col-2x-5 {
		width: 41.66666667%;
	}
	.col-2x-4 {
		width: 33.33333333%;
	}
	.col-2x-3 {
		width: 25%;
	}
	.col-2x-2 {
		width: 16.66666667%;
	}
	.col-2x-1 {
		width: 8.33333333%;
	}
	.col-2x-auto {
		width: auto;
	}
	.hide-2x {
		display: none !important;
	}
	.show-2x {
		display: block !important;
	}
}

// typography
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	text-transform: uppercase;
	font-weight: 400;
}
h1, .h1, h2, .h2 {
	font-weight: 300;
}
h2, .h2 {
	font-size: 1.8em;
	letter-spacing: 3px;
	margin-bottom: .2em;

	&.view-title {
		font-size: 2.5em;
	}

	.loading {
		vertical-align: text-bottom;
	}
}
h3, .h3 {
	font-size: 1.2em;
	letter-spacing: 2px;
	padding-bottom: 1em;
}
h4, .h4 {
	font-size: 1em;
	letter-spacing: 2px;
}
h5, .h5 {
	letter-spacing: 2px;
}
h6, .h6 {
	letter-spacing: 1px;
}
@media (max-width: $size-xl) {
	h2, h3,
	.h2, .h3 {
		text-align: center;
	}
}
code {
	font-family: $mono-font-family;
	background: $bg-color-dark;
	color: $body-font-color;
}
.text-normalcase {
	text-transform: initial;
}
.text-pre {
	font-family: $mono-font-family;
}
.text-breaks {
	white-space: pre;
}
.text-small {
	font-size: .8em;
	line-height: 1.1em;
}
.text-big {
	font-size: 1.5em;
	line-height: 1.2em;
}
.text-huge {
	font-size: 4em;
	line-height: 1.5em;
	font-weight: 300;
}
.text-transparent {
	color: transparent;
}
.featured {
	.featured-number {
		font-size: 4em;
		line-height: 1.5em;
		font-weight: 300;

		@media (max-width: $size-lg) {
			font-size: 3em;
			line-height: 1.25em;
		}
	}
	.featured-description {
		@media (max-width: $size-lg) {
			font-size: .75rem;
		}
	}
}

// display
.flex {
	display: flex;
}
.d-flex > * {
	flex: auto;
	flex-basis: 0;
}
.d-flex > * + * {
	margin-left: .2rem;
}
@media (max-width: $size-lg) {
	.d-flex {
		flex-direction: column;
	}
	.d-flex > * {
		margin-left: 0;
	}
}
::selection {
	background: $primary-color;
}
::-moz-selection {
	background: $primary-color;
}
.d-invisible {
	height: 0px;
}
.full-viewport {
	height: 100vh;
	width: 100vw;
}
.justify-center {
	justify-content: center;
}
.align-center {
	align-items: center;
}
.flex-center {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.flex-grow {
	flex-grow: 10;
}
.flex-wrap {
	flex-wrap: wrap;
}

// loading
.loading {
	&.loading-xl {
		min-height: $unit-12;
		&::after {
			height: $unit-12;
			margin-left: -$unit-6;
			margin-top: -$unit-6;
			width: $unit-12;
		}
	}
}

// toast
.vue-notification-group {
	padding-right: .8em;
}
.toast {
	margin-bottom: .8em;
	padding: .6rem;

	h5 {
		text-transform: none;
		letter-spacing: normal;
		font-weight: 500;
	}
}

// form and buttons
a:focus,
a:active,
.btn:focus {
  box-shadow: 0 0 0 .2rem rgba($bg-color-dark, .2);
}
.btn {
	&.btn-primary {
		&:focus,
		&:active, &.active {
			border-color: $primary-color;
			box-shadow: 0 0 0 .2rem rgba($primary-color, .2);
		}
	}
	&.btn-secondary {
		background: $bg-color-dark;
		border-color: $bg-color-medium;
		color: $gray-color-700;
		
		&:hover {
			background: darken($primary-color-dark, 5%);
			color: $light-color;
		}
		&:focus,
		&:active, &.active {
			border-color: darken($primary-color-dark, 7%);
			box-shadow: 0 0 0 .2rem rgba($primary-color-dark, .2);
		}
	}
	&.btn-warning {
		background: $warning-color;
		border-color: $warning-color;
		color: #fff;
		&:hover, &.btn-secondary:hover {
			background: darken($warning-color, 5%);
			color: #fff;
		}
		&:focus,
		&:active, &.active {
			border-color: $warning-color;
			box-shadow: 0 0 0 .2rem rgba($warning-color, .2);
		}
	}
	&.btn-warning-secondary {
		background: $bg-color-dark;
		border-color: $bg-color-medium;
		color: $warning-color;
		&:hover, &.btn-secondary:hover {
			background: darken($warning-color, 5%);
			color: #fff;
		}
		&:focus,
		&:active, &.active {
			border-color: $warning-color;
			box-shadow: 0 0 0 .2rem rgba($warning-color, .2);
		}
	}
	&.btn-error {
		background: $error-color;
		border-color: $error-color;
		color: #fff;
		&:hover, &.btn-secondary:hover {
			background: darken($error-color, 5%);
			color: #fff;
		}
		&:focus,
		&:active, &.active {
			border-color: $error-color;
			box-shadow: 0 0 0 .2rem rgba($error-color, .2);
		}
	}
	&.btn-error-secondary {
		background: $bg-color-dark;
		border-color: $bg-color-medium;
		color: $error-color;
		&:hover, &.btn-secondary:hover {
			background: darken($error-color, 5%);
			color: #fff;
		}
		&:focus,
		&:active, &.active {
			border-color: $error-color;
			box-shadow: 0 0 0 .2rem rgba($error-color, .2);
		}
	}

	&.btn-sm {
		&.btn-fw {
			width: 1.4rem;
		}
	}
	&.btn-xl {
		&.btn-fw {
			width: 2.5rem;
		}
		min-width: 2.5rem;
		height: 2.5rem;
		line-height: 1.8rem;
		font-size: 1.5em;
	}
	&.btn-toggle.btn-primary:focus {
		background: $primary-color;
	}
	&.btn-toggle.btn-secondary:focus {
		background: $bg-color-dark;
	}
	&.stretch {
		width: 100%;
	}
	&.btn-link {
		&.btn-gray {
			color: $gray-color-600;
		}
	}
	&:not(.d-block) .icon-left {
		margin-right: .5rem;
	}
}
.switch-lg {
	padding-left: 2.4rem;
	line-height: 1.4rem;

	.form-icon {
		border-radius: 0.55rem;
		height: 1.1rem;
		width: 2rem;

		&::before {
			display: block;
			height: 1rem;
			width: 1rem;
		}
	}
	input:checked + .form-icon::before {
		left: 18px;
	}
}
.form-checkbox,
.form-radio,
.form-switch {
	margin: 0.2rem;
}
.slider:focus,
.form-input:focus,
.form-input:focus-within,
.form-checkbox input:focus + .form-icon,
.form-radio input:focus + .form-icon,
.form-switch input:focus + .form-icon,
.form-select:focus,
.form-select:not([multiple]):not([size]):focus,
.form-autocomplete .form-autocomplete-input.is-focused {
	border-color: $primary-color;
  box-shadow: 0 0 0 .2rem rgba($primary-color, .2);
}
.form-input,
.form-checkbox .form-icon,
.form-radio .form-icon,
.form-select,
.form-select:not([multiple]):not([size]) {
	background-color: $bg-color-medium;
	border-color: $black-color;
}
.form-switch .form-icon {
	background-color: $bg-color-dark;
	border-color: $black-color;
	&:before {
		background-color: $bg-color;
	}
}
.form-input,
.form-input:not(:placeholder-shown),
.form-select,
.form-select:not([multiple]):not([size]) {
	width: 100%;

  .has-error &,
  &.is-error,
	&:invalid {
    background-color: darken($error-color, 40%);
    border-color: $error-color;
    &:focus {
			background: darken($error-color, 40%);
      box-shadow: 0 0 0 .2rem rgba($error-color, .2);
    }
  }
}
.input-group {
	.input-group-addon {
		text-align: center;
		min-width: 35px;
		padding: 0.2rem 0;

		&.addon-lg {
			font-size: 0.9rem;
			padding: 0.3rem 0;
		}
	}

	.form-input,
	.form-select {
		width: auto;
	}
}
::placeholder {
  color: $gray-color-600 !important;
  opacity: 1;
}

// filter select field
.filter {
	option[value=""][disabled] {
		display: none;
	}
	option {
		color: $body-font-color;
	}
}

// label
a {
	.label {
		&:hover {
			background: darken($primary-color-dark, 2%);
		}
	}
}

// table
.table {
	td, th {
		border: none;
	}
	&.table-striped tbody tr:nth-of-type(odd) {
		background: $bg-color-medium;
		&:hover {
			background: $bg-color-dark;
		}
	}
}

// chip
.chip {
	height: 1.3rem;

	figure {
		&::before {
			text-transform: uppercase;
		}
	}
}

// tile
.tile {
	figure {
		&::before {
			text-transform: uppercase;
			font-weight: 400;
		}
	}
	& .tile-title {
		margin: -.1rem 0 -.1rem 0 !important;
		line-height: 1rem;
	}
	& .tile-subtitle {
		margin: 0 0 -.2rem 0 !important;
		line-height: 1rem;
	}
	&.tile-hover:hover {
		background: $bg-color-dark;
	}

	.tile-icon {
		.avatar-secondary {
			background: $bg-color-dark;
			&::before {
				text-transform: unset;
			}
		}
	}
}

// panel
.panel {
	border: 2px solid $border-color;
	border-radius: 2px;
	box-shadow: 0 5px 20px -10px $black-color;
	height: 100%;

	.panel-link {

		.btn {
			text-transform: uppercase;
			color: $gray-color-600;
			display: flex;
			justify-content: center;
			align-items: center;

			ion-icon {
				margin-bottom: 0;
			}

			&:hover {
			background: $border-color;
				color: $body-font-color;
			}
		}
	}

	.panel-body {
		overflow: visible;
	}
}

// tooltip
.tooltip::after {
	line-height: 1.1rem;
	text-transform: none;
}

// empty
.empty {
	background: none;
	.empty-title {
		color: $gray-color-800;
	}
	.empty-subtitle {
		color: $gray-color-600;
	}
}

// modal
.modal {
	.modal-container {
		.modal-header {
			color: $light-color;

			.modal-subtitle {
				font-weight: 400;
			}
		}
	}
	&.active .modal-overlay {
		background: rgba($dark-color, .75);
	}
	&.modal-lg {

		.modal-container {
			max-height: 100vh;
		}
		&.modal-wide .modal-container {
			max-width: 100vw;
		}
		&.modal-full {
			padding: 0;

			> .modal-overlay {
				background: $black-color;
			}
			> .modal-container {
				background: $black-color;
				height: 100vh;
				max-width: 100vw;

				.modal-footer {
					position: absolute;
					bottom: 0;
					right: 0;

					.remote-control {
						opacity: 0;
						position: absolute;
						top: -1rem;
						right: 3.5rem;
						transition: top .2s, opacity .2s;
					}
					&:hover .remote-control {
						top: -2rem;
						opacity: 1;
					}
				}
			}
		}
	}

	&.modal-secondary {
		.modal-body {
			height: 50vh;
		}
	}

	&.modal-presentation {
		&.modal-lg.modal-full {
			.verse::before {
				background: $black-color;
			}
		}
		.modal-container .modal-header {
			padding-bottom: 0;
		}
		.modal-container .modal-body {
			overflow: visible;
		}
	}

	&.modal-setlist-presentation {
		&.modal-lg.modal-full {
			.verse::before {
				background: $black-color;
			}
		}

		.modal-container {
			.modal-header,
			.modal-body {
				padding-bottom: 0;
				padding-left: 0;
				padding-right: 0;
				overflow: visible;
			}

			.modal-footer {
				width: 100%;

				.navigation-prev {
					position: absolute;
					bottom: .8rem;
					right: 50%;
				}
				.navigation-next {
					position: absolute;
					bottom: .8rem;
					left: 50%;
				}
				.chords {
					font-weight: bold;
					color: $primary-color;
				}

				.clock {
					font-family: $code-font-family;
					font-size: 1.5em;
					vertical-align: middle;
				}

				&.hidden {
					opacity: 0;
					transition: opacity .5s ease;

					&:hover {
						opacity: 1;
					}
				}
			}
		}

		.hide {
			background: $black-color;
			position: absolute;
			top: 0;
			width: 100vw;
			height: calc(100vh - 90px);
			z-index: 100;
		}

	}
	
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s;
	}
	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
	
	&.modal-sm .modal-container {
		max-width: 420px;
	}
}
@media (min-width: $size-sm) {
	.modal-lg {
		.max-column {
			height: 60vh;
			overflow-y: scroll;
		}
	}
}
@media (max-width: $size-sm) {
	.modal-lg {
		.max-column {
			height: 30vh;
			overflow-y: scroll;
		}
	}
}
@media (max-width: $size-md) {
	.modal-lg {
		padding: 0;
	}
}
// off-canvas
.off-canvas {
	z-index: 0;
	.off-canvas-toggle {
		z-index: 10;
		width: 2.2rem;
		padding: 1px 0;
	}

	.off-canvas-sidebar {
		width: 12rem;
		overflow: visible;

		.sidebar-wrapper {
			position: fixed;
			width: inherit;
			min-height: 100vh;
			padding-bottom: 5rem;

			footer {
				position: absolute;
				bottom: 1rem;
				width: 100%;

				a {
					text-decoration: none;
					color: inherit;

					&:hover {
						color: $primary-color;
					}
				}

				.logo-devmount {
					width: 25px;
					vertical-align: middle;
					padding-bottom: 5px;
					
					path {
						fill: none;
						stroke: currentColor;
						stroke-width: 9;
						stroke-linecap: round;
					}
				}
				.legal {
					fill: currentColor;
					width: 18px;
					vertical-align: middle;
					padding: 0 2px 5px 2px;
				}
			}
		}
	}
	.off-canvas-content {
		min-height: 100vh;
		padding: 0 !important;
	}
}
@media (max-width: $size-xl) {
	.off-canvas {
		.off-canvas-content {
			padding: .5rem;
		}
	}
}
@media (min-width: $size-lg) {
	.off-canvas {
		.off-canvas-sidebar {
			z-index: 0;

			.sidebar-wrapper .tooltip-lg::after {
				display: none;
			}
		}
	}
}
.off-canvas-secondary {
	.off-canvas-sidebar {
		background: $bg-color-medium;
		padding: 1rem;
		width: 8.5rem;
		flex: 0 0 auto;
		position: relative;
		transform: none;

		.divider:not(:first-child) {
			margin-top: 2em;
		}
		.divider[data-content]::after {
			color: $gray-color-700;
			background: $bg-color-medium;
			text-transform: uppercase;
			letter-spacing: 2px;
		}

		.sidebar-wrapper {
			position: fixed;
			width: 8rem;
		}
	}
}
@media (max-width: $size-lg) {
	.off-canvas-secondary {
		.off-canvas-sidebar {
			padding: 3rem .4rem .4rem .4rem;
			min-width: 2.2rem;
			width: 3rem;

			.btn, .form-switch, .label, .divider {
				max-width: 2.2rem;
			}
			.btn {
				min-height: 2rem;
				line-height: 1.3rem;
			}

			.sidebar-wrapper {
				width: 2.3rem;
			}
		}
	}
}
.container.no-sidebar,
.off-canvas-secondary .off-canvas-content .container {
	padding: 1rem;
}

// branding
.brand {
	padding: 1em 1em 0 1em;
}

// sidebar menu
.menu {
	box-shadow: none;
	background: $bg-color;

	.divider {
		margin-top: 2em;
		margin-bottom: 1.2em;

		&[data-content]::after {
			color: $gray-color-700;
			background: $bg-color;
			text-transform: uppercase;
			letter-spacing: 2px;
		}
	}

	.menu-item {
		a {
			&:hover {
				background: $bg-color-dark;
			}
			&.text-error:hover {
				background: darken($error-color, 46%);
			}
			&.router-link-exact-active {
				background: $bg-color-dark;
				color: $primary-color;
			}
		}
		.loading {
			&::after {
				border-left-color: white;
				border-bottom-color: white;
			}
		}
		.menu-badge {
			.label {
				vertical-align: middle;
			}
			.btn {
				margin-top: 0;
			}
		}
	}
}

// pagination
.pagination {
	margin: 0;
	padding: 0;
	justify-content: space-between;
}

// shapes
.s-circle {
	&.s-circle-state {
		width: 1rem;
		height: 1rem;
		border: 2px solid $gray-color;

		&.active {
			background: $primary-color;
			border-color: $primary-color;
		}
	}
}

// avatar
.avatar {
	&.avatar-xxl {
		font-size: 2rem;
		height: 4rem;
		width: 4rem;
	}

	.icon {
		line-height: 1.8;
	}
}

// calendar
.calendar-wrapper {
	.calendar {
		width: 100%;
		background: transparent;
		border: none;

		header {
			.prev:after {
				border-right-color: $body-font-color;
			}
			.next:after {
				border-left-color: $body-font-color;
			}

			.prev:not(.disabled):hover, 
			.next:not(.disabled):hover, 
			.up:not(.disabled):hover {
				background: $bg-color-dark;
				color: $primary-color;
			}

			.prev:not(.disabled):hover:after {
				border-right-color: $primary-color;
			}
			.next:not(.disabled):hover:after {
				border-left-color: $primary-color;
			}
		}

		.cell {
			height: 60px;
			line-height: 60px;
			border-radius: 0.1rem;

			&:not(.blank):not(.disabled).day:hover,
			&:not(.blank):not(.disabled).month:hover,
			&:not(.blank):not(.disabled).year:hover {
				border: 1px solid $primary-color;
			}

			&.selected,
			&.selected:hover {
				background: $primary-color;
				font-weight: 900;
			}
		}
	}
}

// timeline
.timeline {
	.timeline-item:last-child::before {
		display: none;
	}
}

// zone
.zone {
	padding: 1rem .75rem .5rem .75rem;
	border-radius: 2px;
	position: relative;
	margin-top: 1.5rem;

	&::before {
		content: attr(data-title);
		position: absolute;
		top: 0;
		left: .5rem;
		transform: translateY(-60%);
		text-transform: uppercase;
		background-color: $bg-color-light;
		padding: 0 .25rem;
	}
	&.zone-warning {
		border: 2px solid darken($warning-color, 30%);
		&::before {
			color: $warning-color;
		}
	}
	&.zone-danger {
		border: 2px solid darken($error-color, 30%);
		&::before {
			color: $error-color;
		}
	}
}

// song content
.song-content {
	& > .column {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	pre {
		position: relative;
		overflow: visible;
		margin-top: 30px;
		margin-bottom: 0;

		.present > & {
			font-size: 25px;
		}

		&>span {
			display: block;

			&.chords {
				color: $primary-color;
			}
		}
		// prevent short song parts being displayed next to each other
		&::after {
			content: '';
			height: 1px;
			width: 40vw;
			display: block;
		}
	}
	.present > pre {
		display: inline-block;

		&:first-child {
			margin-top: 10px;
		}
	}
	.verse {
		position: relative;
		padding-left: 1em;
		margin-left: .6em;
	}
	.verse::before {
		display: inline-block;
		position: absolute;
		background: $bg-color-light;
		left: -.45em;
		top: .31em;
		width: .8em;
		line-height: 1.3em;
		height: 1.15em;
		text-align: center;
		font-size: 2em;
		font-family: "Fira Sans";
		font-weight: 300;
	}
	.verse.part1::before {
		content: '1';
	}
	.verse.part2::before {
		content: '2';
	}
	.verse.part3::before {
		content: '3';
	}
	.verse.part4::before {
		content: '4';
	}
	.verse.part5::before {
		content: '5';
	}
	.verse.part6::before {
		content: '6';
	}
	.verse.part7::before {
		content: '7';
	}
	.verse.part8::before {
		content: '8';
	}
	.verse.part9::before {
		content: '9';
	}

	.text > pre {
		font-family: "Fira Sans";
		font-size: 1.5em;
		margin-bottom: .2em;

		&.verse::before {
			top: -.1em;
		}
	}
}

// slide presentation
.hooper.presentation {
	width: 100%;
	height: 98vh;

	&:focus {
		outline: none;
	}

	.hooper-slide,
	.hooper-slide:focus,
	.hooper-slide:active {
		outline: none;
	}
	
	.hooper-pagination {
		padding: .8rem;
		left: 0;
		right: initial;
		transform: none;
		z-index: 20;

		.hooper-indicator {
			margin: 0 7px;
			width: 1.7em;
			height: 1.7em;
			border-radius: 50%;
			padding: 0;
			background-color: $gray-color-dark;

			&.is-active {
				background-color: $primary-color;
			}

			&:focus {
				outline: none;
			}
		}
	}
}

// light mode
.light {
	&.modal {
		&.modal-presentation,
		&.modal-setlist-presentation {
			&.modal-lg.modal-full {
				color: $dark-color;
				.verse::before {
					background: $light-color;
				}
				.modal-container {
					background: $light-color;
					.modal-header {
						color: $black-color;
					}
				}
			}
			.hooper.presentation {
				.hooper-pagination {
					.hooper-indicator:not(.is-active) {
						background-color: $gray-color-800;
					}
				}
			}
			.hide {
				background: $light-color;
			}
		}
		.song-content .verse {
			border-left-color: $gray-color-800;
		}
	}
	.text-gray {
		color: $gray-color-800;
	}
	.btn {
		&.btn-secondary {
			background: $gray-color-800;
			border-color: darken($gray-color-800, 10%);
			color: $bg-color-dark;
			&:focus:not(.btn-error) {
				background: $gray-color-800;
				border-color: darken($gray-color-800, 10%);
				color: $bg-color-dark;
			}
		}
		&.btn-link {
			&.btn-gray {
				color: $gray-color-600;
			}
		}
	}
}