@use 'vars' as *;

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: border-box; }

body {
	font-family: $f-main;
	font-size: $f-size;
	background: rgb(243,200,255);
	background: linear-gradient(320deg, rgba(243,200,255,1) 0%, rgba(191,191,255,1) 100%);
}

a {
	color: $c-main;
	transition: color 0.2s;

	&:hover {
		color: $c-accent;
		transition: color 0.2s;
	}
}

h1 {
	font-family: $f-title;
	font-size: $f-size + 30px;
	font-weight: normal;
	margin-left: 40px;
	margin-bottom: 10px;
	margin-top: 0;
	display: inline-block;
	position: relative;

	span {
		background: linear-gradient($c-main-light, $c-main-light) 0 80% / 100% 20px no-repeat;
		height: 15px;
	}
}

/* ---------------------------------------------------------------------------------- &FORMS ---- */

.form__fieldset {
	width: 60%;
	margin: 30px auto;
	border: 1px solid $c-main;
	padding: 20px 40px;
	text-align: center;
}

.form__label {
	display: block;
	margin-top: 20px;
	margin-bottom: 5px;

	&:first-child, .form__legend + .form__label { margin-top: 0; }
}

.form__input {
	border: 1px solid $c-main;
	background-color: $c-main-lightest;
    width: 50%;

	@include hover;
}

.form__select {
	@extend .form__input;
}

.form__input--file {
	border: 1px solid $c-main;
	@include hover($bg: false);
	padding: 5px;
    width: 50%;

	&::file-selector-button {
		@extend %btn;
	}
}

.form__input--search {
    @extend .form__input;
    width: 60%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.form__checkbox {
	@extend .form__label;
}

.form__input--checkbox {
	appearance: none;
	background-color: $c-main-lightest;
	margin: 0;
	margin-top: 5px;
	margin-right: 5px;
	font: inherit;
	color: $c-main;
	width: 15px !important;
	height: 15px;
	border: 1px solid $c-main;
	display: inline-grid;
	place-content: center;

	&::before {
		content: '';
		width: 9px;
		height: 9px;
		transform: scale(0);
		transition: transform 120ms ease-in-out;
		box-shadow: inset 9px 9px $c-main;
		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	}

	&:checked::before {
		transform: scale(1);
	}

	@include hover;
}

.form__btns {
	@extend .form__label;

	&:first-of-type { margin-top: 20px; }
}

.input--btn {
	@extend %btn;
}

.form__error {
	color: $c-red;
}

/* --------------------------------------------------------------------------------- &TABLES ---- */

.table {
	margin: 0 auto;
	border-collapse: collapse;
}

.table tr, .table td, .table th {
	border: 1px solid $c-main;
}

.table td {
	min-width: 30px;
}

.table__thead {
	font-weight: normal;
	background-color: $c-main-light;
	border-color: $c-main;
	color: $c-main;
}

.table__thead th {
	@extend .table__thead;
	padding: 5px;
}

.table__tbody td {
	text-align: center;
	padding: 5px 10px;
}

.table__tbody img {
	max-height: 50px;
	margin: auto;
}