@import './base.css';

html {
	background-image: var(--bg-splash);
	/* background-image: url(../img/glitter.webp); */
	background-position: center;
	background-size: calc(50% - 2rem) auto;
	background-repeat: no-repeat;
	transition: background .1s;
}

body {
	transition: all .2s;
}
body.is-blurred {
	background-color: rgba(0, 0, 0, .5);
	backdrop-filter: blur(6px);
}

#app {
	position: relative;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	/* max-width: 1024px; */
	height: 100%;
	margin: 0 auto;
}
#app > div {
	/* margin-bottom: auto; */
	padding: 1rem 2rem;
	overflow: auto;
}
#app > div:first-child { /* keep centered in window */
	margin: auto;
	padding-block: 2rem;
}
#app > header + div, #top-banner + div { /* TODO: Figure out a better rule for here */
	padding-bottom: calc(2rem + 55px); /* needs to cover the <footer> height */
}

a,
.green {
	/* text-decoration: none; */
	color: #00bd7e;
	color: white;
	font-size: .875rem;
	cursor: pointer;
	transition: .2s;
}

h1, h2 {
	margin-bottom: 0.25rem;
	text-align: center;
}

/* # INPUTS # */
label.file-input, input, select, textarea, button {
	border: none;
	border-radius: 30px;
	padding: .5rem .75rem;
	font-size: .85rem;
	color: white;
}
label.file-input:not(.small), input:not(.small), select:not(.small), textarea:not(.small), button:not(.small) {
	width: 100%;
	padding: .75rem 1rem;
	font-size: 1rem;
}

input, select, textarea {
	background: rgba(97, 97, 97, .8);
}

select, input[type="date"] {
	border-left: .75rem solid transparent;
}
select:not(.small), input[type="date"]:not(.small) {
	border-left: 1rem solid transparent;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}


input[type="color"]::-webkit-color-swatch {
	border-radius: 30px;
}

/* label {
	display: block;
} */

label.checkbox {
	display: flex;
	align-items: center;
	padding: 0;
	padding-right: .5rem;
	font-size: .85rem;
}
label.checkbox input {
	display: none;
}
label.checkbox > span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	margin-left: .5rem;
	border: 3px solid var(--main-color);
	border-radius: 50%;
}
label.checkbox input:checked + span {
	border: unset;
	background-color: var(--main-color);
}
label.checkbox input:checked + span > span {
	width: 60%;
	height: 8px;
	border-left: 3px solid white;
	border-bottom: 3px solid white;
	transform: rotate(-45deg) translate(1px, -1px);
}

/* prevent birthday field from changing its size when we change the input field type to "date" */
input::-webkit-datetime-edit-fields-wrapper {
	padding-block: 0;
}

/* # BUTTONS */
button {
	background-color: #515151;
}
button:not(.small) {
	font-size: 1.25rem;
}

button.blue {
	background-color: var(--main-color);
}
button.red {
	background-color: var(--secondary-color);
}
button.green {
	background-color: #00bd7e;
}

button[disabled] {
	background-color: #2d2d2f;
	color: #8D8282;
}
button:not([disabled]) {
	cursor: pointer;
}

/* # MEDIA QUERIES # */
@media (hover: hover) {
	a:hover {
		/* background-color: var(--main-color); */
	}
}

@media screen and (min-width: 769px) {
	#app > div {
		padding-bottom: 2rem;
	}
}

@media (min-width: 1024px) {
	body {
		/* display: flex;
		place-items: center; */
	}

	#app {
		/* display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 0 2rem; */
	}
}