// Let's first take care of having the customized colors ready.
@import './_bulma_colors_extender.scss';
@import './_colors.scss';

// Bulma/Buefy customization
@import '../../../node_modules/bulma/sass/utilities/_all.sass';

$body-size: 14px !default;
$family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
	'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
$size-normal: 1rem;

/* @import '../../../node_modules/bulma/bulma.sass';
@import '../../../node_modules/buefy/src/scss/buefy.scss'; */

@import "~bulma";
@import "~buefy/src/scss/buefy";

@import '@mdi/font/css/materialdesignicons.css';

@import './bulma-divider.scss';

html, body, #__nuxt, #__layout, .default-body, #app {
	// height: 100% !important;
}

html {
	// font-size: 100%;
	font-size: 14px;
	background-color: $base-1;
}

a {
	color: #5e81ac;
	&:hover {
		color: #81a1c1;
		text-decoration: underline;
	}
}
body,
p,
h1,
h1.title,
h2.subtitle,
label.label,
strong {
	color: $textColor;
}
label.label {
	font-weight: 400;
}

h4 {
	font-size: 2em;
	font-weight: 700;
	line-height: 1.25em;
}

@for $i from 1 through 10 {
	.mt#{$i} {
		margin-top: $i + em !important;
	}
	.mb#{$i} {
		margin-bottom: $i + em !important;
	}
	.ml#{$i} {
		margin-left: $i + em !important;
	}
	.mr#{$i} {
		margin-right: $i + em !important;
	}
}

.text-center {
	text-align: center;
}

hr {
	background-color: #c7c7c757;
	height: 1px;
}
// Bulma color changes.
.tooltip.is-top.is-primary:before {
	border-top: 5px solid #20222b;
}
.tooltip.is-primary:after {
	background: #20222b;
}

div#drag-overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
	div.background {
		background: rgba(0, 0, 0, 0.9);
		position: absolute;
		top: 3%;
		left: 3%;
		width: 94%;
		height: 94%;
		border: 2px dashed #fff;
		border-radius: 10px;
		box-shadow: 0 0 0 4px #ffffff00, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
	}

	div.drop {
		width: 100%;
		color: white;
		position: absolute;
		height: 100%;
		align-items: center;
		display: flex;
		justify-content: center;
		font-size: 2em;
	}
}

section.hero {
	&.dashboard {
		// background-color: $backgroundLight1 !important;
		div.hero-body {
			align-items: baseline;
		}
	}
}

section input,
section a.button {
	font-size: 14px !important;
}
section input,
section p.control a.button {
	border-left: 0px !important;
	border-top: 0px !important;
	border-right: 0px !important;
	border-radius: 0px !important;
	box-shadow: 0 0 0 !important;
}

section p.control a.button {
	margin-left: 10px !important;
}
section p.control button {
	height: 100%;
	font-size: 12px;
}

.switch input[type='checkbox'] + .check:before {
	background: #fbfbfb;
}

/*
	Register and Login forms
*/

section.hero.is-login,
section.hero.is-register {
	a {
		font-size: 1.25em;
		line-height: 2.5em;

		&.button {
			font-size: 14px !important;
		}
	}
	input {
		background: #323846;
		border-radius: 0 !important;
	}
}
/*
section#login,
section#register { background-color: $backgroundLight1 !important; }
section#login input,
section#register input,
section#login a.button,
section#register a.button {
	font-size: 14px !important;
}
section#login input,
section#register input,
section#login p.control a.button,
section#register p.control a.button {
	border-left: 0px !important;
	border-top: 0px !important;
	border-right: 0px !important;
	border-radius: 0px !important;
	box-shadow: 0 0 0 !important;
}

section#login p.control a.button,
section#register p.control a.button { margin-left: 10px !important; }
section#login p.control a#loginBtn,
section#register p.control a#loginBtn { border-right: 0px !important; }
section#login p.control a#registerBtn,
section#register p.control a#registerBtn { border-left: 0px !important; }

section#login a.is-text,
section#register a.is-text {
	font-size: 1.25em;
	line-height: 2.5em;
}

.modal-card-head, .modal-card-foot {
	background: $backgroundLight1;
}
*/

.switch {
	margin-top: 5px;
}

/* button.button.is-primary {
	background-color: #323846;
	border: 2px solid #21252d;
	color: $textColor;
	font-size: 1rem;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	&:hover {
		background-color: $base-2;
	}
	&.big {
		font-size: 1.25rem;
	}
} */
svg.waves {
	display: block;
	bottom: -1px;
	left: 0px;
	right: 0px;
	width: 100%;
	background-color: transparent;
	pointer-events: none;
	user-select: none;
	overflow: hidden;
}
div.field-body > div.field {
	text-align: left;
}
table.table {
	background: $base-2;
	color: $textColor;
	border: 0;
	thead {
		th,
		td {
			color: $textColor;
		}
	}
	tfoot {
		background: $base-1;
		tr.table-footer {
			.wrapper {
				display: flex;
				color: $textColor;
				justify-content: space-evenly;
			}
		}
	}
	th,
	td {
		border-color: #ffffff1c;
	}
}

.chibisafe-input input,
.chibisafe-select select,
.chibisafe-textarea textarea {
	border: 2px solid #21252d;
	border-radius: 0.3em !important;
	background: rgba(0, 0, 0, 0.15);
	padding: 1rem;
	color: $textColor;
	height: 3rem;
	&:focus,
	&:hover {
		border: 2px solid #21252d;
	}
	&::placeholder {
		color: $textColor;
	}
}

.chibisafe-input .icon {
	color: #323846 !important;
}


// vue-bar
.vb > .vb-dragger {
	z-index: 5;
	width: 12px;
	right: 0;
}

.vb > .vb-dragger > .vb-dragger-styler {
	backface-visibility: hidden;
	transform: rotate3d(0, 0, 0, 0);
	transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
	background-color: $backgroundAccent;
	margin: 5px 5px 5px 0;
	border-radius: 20px;
	height: calc(100% - 10px);
	display: block;
}

.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
	background-color: $backgroundAccentLighter;
}

.vb > .vb-dragger:hover > .vb-dragger-styler {
	background-color: $backgroundAccentLighter;
	margin: 0px;
	height: 100%;
}

.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
	background-color: $backgroundAccentLighter;
	margin: 0px;
	height: 100%;
}

.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
	background-color: $backgroundAccentLighter;
}

.vb-content {
	overflow: auto !important;
}

// helpers
.has-text-default {
	color: $textColor;
}

.has-text-default-highlight {
	color: $textColorHighlight;
}

.is-height-max-content {
	height: max-content;
}

.pagination a,
.pagination a:hover {
	text-decoration: none;
}

// fix control icons
.control.has-icons-left .icon, .control.has-icons-right .icon {
	height: 3rem;
	padding-right: 1rem;
}

.is-marginless {
	margin: 0 !important;
}

.has-centered-items {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chibisafe-on-border.field.is-floating-label .label:before {
	background-color: $chibisafe;
}

.is-chibisafe.divider::after, .is-chibisafe.divider::before {
	background-color: #21252d;
}

.chibisafe.taginput {
	.taginput-container {
		background-color: #21252d;
		border: 2px solid #21252d;
		border-radius: 0.3em !important;

		input {
			background-color: #21252d;
			color: $textColor;
			&::placeholder {
				color: $textColor;
			}
		}

		.icon {
			padding-left: 15px;
		}

		&:focus,
		&:hover,
		&:active {
			border: 2px solid #21252d;
		}
	}
}

.dropdown-content a {
	text-decoration: none;
}