/* Typography */
h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	line-height: var(--line-height-s);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-s);
}

h3,
.h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	line-height: var(--line-height-s);
}

h4,
.h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-h4);
	line-height: var(--line-height-s);
}

p {
	font-size: var(--font-size-p);
	line-height: var(--line-height-m);
}

main li {
	line-height: var(--line-height-l);
	list-style-position: inside;
}

.p-italic {
	font-style: italic;
}

/* Logo */
.logo-container {
	.logo-small {
		width: 64px;
	}

	.logo-medium {
		width: 80px;
	}

	.logo-large {
		width: 150px;
	}

	.logo-extra-large {
		width: 300px;
	}

	.logo-card {
		display: flex;
		align-items: center;
		column-gap: var(--space-xl);

		h1 {
			margin-bottom: 0;
		}

		.logo-text-teal {
			color: var(--color-main);
		}

		.logo-text-dark {
			color: var(--color-text-dark);
		}

		.logo-text-light {
			color: var(--color-text-light);
		}
	}
}

/* Links */
.link {
	width: fit-content;
	color: var(--color-teal-80);
	line-height: var(--line-height-l);

	&.link-regular {
		font-size: var(--font-size-p);
		text-decoration-thickness: var(--link-thickness-s);
		text-underline-offset: var(--link-underline-offset-s);
	}

	&.link-medium {
		font-size: var(--font-size-h4);
		text-decoration-thickness: var(--link-thickness-m);
		text-underline-offset: var(--link-underline-offset-m);
	}

	&.link-big {
		font-size: var(--font-size-h2);
		text-decoration-thickness: var(--link-thickness-l);
		text-underline-offset: var(--link-underline-offset-l);
	}
}

.breadcrumb {
	display: flex;
	display: inline-flex;
	font-weight: var(--font-weight-semibold);
	color: var(--color-teal-80);

	&.breadcrumb-small {
		font-size: var(--font-size-h4);
		column-gap: var(--space-s);
	}

	&.breadcrumb-big {
		font-size: var(--font-size-h2);
		column-gap: var(--space-m);
	}

	a {
		font-weight: var(--font-weight-regular);
		text-decoration-thickness: var(--link-thickness-l);
		text-underline-offset: var(--link-underline-offset-l);
	}
}

.link:hover,
.link-breadcrumbs a:hover {
	color: var(--color-teal-50);
	transition: var(--transition-medium);
}

/* Buttons */
a.button {
	text-decoration: none;
}

.button {
	display: inline-block;
	width: fit-content;
	height: fit-content;
	padding: var(--space-s) var(--space-l);
	font-size: var(--font-size-button-small);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-dark);
	background-color: var(--color-main);
	border: none;
	border-radius: var(--radius-s);
	cursor: pointer;
	line-height: var(--line-height-l);

	&:hover {
		background-color: var(--color-teal-60);
		transition: var(--transition-medium);
	}

	&:disabled {
		background-color: var(--color-neutral-30);

		/* pointer-events: none; */
		cursor: not-allowed;
	}
}

.button-big {
	padding: var(--space-m) var(--space-xl);
	font-size: var(--font-size-button-big);
	border-radius: var(--radius-m);
	line-height: var(--line-height-s);
}

.button-secondary {
	color: var(--color-text-dark);
	background-color: var(--color-text-light);
	border-color: var(--color-teal-80);
	border-style: solid;
	border-width: var(--border-width-m);

	&:hover {
		background-color: var(--color-teal-20);
	}

	&:disabled {
		background-color: var(--color-neutral-30);
		border-color: var(--color-neutral-80);
		border-style: solid;
		border-width: var(--border-width-m);
	}
}

.button-delete {
	background-color: var(--color-error);

	&:hover {
		background-color: var(--color-error-dark);
	}

	&:disabled {
		background-color: var(--color-error-light);
	}
}

.button-approve {
	background-color: var(--color-approved);

	&:hover {
		background-color: var(--color-approved-dark);
	}

	&:disabled {
		background-color: var(--color-approved-light);
	}
}

.icon {
	display: inline-flex;
	background-color: transparent;
	cursor: pointer;

	img {
		height: 2rem;
	}

	&:hover {
		img {
			scale: 1.1;
			transition: var(--transition-short);
		}
	}
}

.icon-big {
	img {
		scale: 2;
	}

	&:hover {
		img {
			scale: 2.2;
		}
	}
}

/* Inputs */
input,
textarea,
select {
	padding: var(--space-s);
	color: var(--color-text-dark);
	background-color: var(--color-surface);
	border-color: var(--color-border-neutral);
	border-radius: var(--radius-s);
	border-style: solid;
	border-width: var(--border-width-s);
	min-width: var(--input-width);
	outline: none;

	&:focus {
		border-color: var(--color-border-teal);
		transition: var(--transition-short);
	}

	&::placeholder {
		color: var(--color-neutral-50);
	}
}

/* bei eigenem pfeil ist das field nicht so hoch wie normalerweise, also doch standard pfeil da lassen */

/* select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../images/chevron-down-sm.svg");
    background-repeat: no-repeat;
    background-position: right var(--space-s) center;
    background-size: 25px;
    padding-right: var(--space-xl);
} */

input[type='checkbox'] {
	accent-color: var(--color-main);
	cursor: pointer;
	min-width: 0;

	&:not(.checkbox-big) {
		width: var(--space-m);
		height: var(--space-m);
	}
}

.checkbox-big {
	width: var(--space-l);
	height: var(--space-l);
}

input[type='radio'] {
	accent-color: var(--color-main);
	appearance: none;
	background-clip: content-box;
	border: 1px solid var(--color-text-dark);
	border-radius: 50%;
	cursor: pointer;
	min-width: 0;
	outline: none;

	&:checked {
		background-color: var(--color-main);
	}

	&:not(.radio-big) {
		width: var(--space-m);
		height: var(--space-m);
		padding: 2px;
	}
}

.radio-big {
	width: var(--space-l);
	height: var(--space-l);
	padding: 3px;
}

.input-success {
	background-color: var(--color-green-10);
	border-color: var(--color-approved);

	&:focus {
		border-color: var(--color-approved-dark);
		transition: var(--transition-short);
	}
}

.field_with_errors {
	input,
	textarea,
	select {
		background-color: var(--color-red-20);

		&:focus {
			border-color: var(--color-error);
		}
	}
}

.input-container {
	.error-text {
		display: none;
		color: var(--color-error-dark);
	}

	&:has(.field_with_errors) {
		.error-text {
			display: unset;
		}
	}
}

.input-column {
	display: flex;
	width: fit-content;
	flex-direction: column;
	row-gap: var(--space-s);

	label {
		width: 100%;
	}
}

.input-row {
	display: flex;
	width: fit-content;
	align-items: center;
	column-gap: var(--space-s);
}

.hidden {
	display: none;
}

.search-input {
	position: relative;

	input {
		background-image: url("../images/search.svg");
		background-position: 0.5rem;
		background-repeat: no-repeat;
		padding-left: var(--space-2xl);
	}

	&.search-without-button {
		input {
			padding-right: var(--space-2xl);
		}

		img {
			height: 1.5rem;
		}

		button {
			position: absolute;
			right: var(--space-s);
		}
	}
}

/* File-Upload */
.dropzone {
	display: flex;
	padding: var(--space-xl);
	align-items: center;
	background-color: var(--color-surface);
	border-color: var(--color-border-teal);
	border-radius: var(--radius-m);
	border-style: dotted;
	border-width: var(--border-width-l);
	cursor: pointer;
	gap: var(--space-m);
	justify-content: center;
	max-width: 40rem;

	p {
		font-size: var(--font-size-h4);
		text-align: center;

		span {
			font-weight: var(--font-weight-bold);
			color: var(--color-teal-80);
		}
	}

	img {
		height: 3rem;
	}
}

.dropzone-invalid {
	border-color: var(--color-error);
}

.dropzone-valid {
	border-color: var(--color-approved);
}

/* Friend Request */
.avatar-container {
	display: flex;
	width: fit-content;
	height: fit-content;
	align-items: center;
	clip-path: circle();

	img {
		width: 3.5rem;
		height: 3.5rem;
		object-fit: cover;
	}
}

details {
	cursor: pointer;
}

.votes-container {
	display: flex;
	align-items: center;
	column-gap: var(--space-xl);
	flex-direction: row;

	h3,
	.h3 {
		margin-bottom: 0;
	}

	.person-container {
		display: flex;
		flex-direction: column;
		row-gap: var(--space-xs);
	}
}

.row-card {
	position: relative;
	display: flex;
	padding: var(--space-l);
	align-items: center;
	background-color: var(--color-surface);
	border-radius: var(--radius-m);
	border-style: solid;
	border-width: var(--border-width-m);
	column-gap: var(--space-m);
	justify-content: space-between;

	&:not(.negative-spending),
	&:not(.positive-spending) {
		border-color: var(--color-border-teal);
	}

	&.negative-spending {
		border-color: var(--color-error);
	}

	&.positive-spending {
		border-color: var(--color-approved);
	}

	&.spending-card,
	&.voting-card {
		.text-container {
			display: flex;
			column-gap: var(--space-2xl);

			.spending-amount {
				text-wrap: nowrap;
			}
		}
	}

	&.voting-card,
	&.votes-card {
		width: 100%;
	}

	&.votes-card {
		min-height: 130px;
	}

	&.add-friend-card label,
	&.options-card label {
		cursor: pointer;
	}

	.content-container {
		display: flex;
		width: 100%;
		align-items: center;
		column-gap: var(--space-2xl);
		flex-direction: row;
	}

	h4,
	.h4,
	h3,
	.h3 {
		margin-bottom: 0;
	}

	.actions {
		display: flex;
		column-gap: var(--space-s);
		flex-direction: row;
		justify-content: center;

		.icon {
			display: none;
		}

		label {
			display: none;
		}
	}
}

/* Element Card */
.element-card {
	display: grid;
	background-color: var(--color-surface);
	border-radius: var(--radius-m);
	gap: var(--space-m) var(--space-l);
	grid-template-columns: 1fr 1fr;

	h4 {
		margin-bottom: 0;
	}

	span {
		font-weight: var(--font-weight-semibold);
	}

	/* Vacation / Group Card */
	&.with-image-element {
		width: fit-content;
		padding: var(--space-l);
		align-items: center;

		img {
			width: 100%;
			height: 100%;
			align-self: start;
			border-radius: var(--radius-s);
			grid-column: 1;
			grid-row: 1 / span 3;
			object-fit: cover;
		}

		.title {
			grid-column: 2;
			grid-row: 1;
		}

		.content-container {
			display: flex;
			flex-direction: column;
			grid-column: 2;
			grid-row: 1 / span 3;
			row-gap: var(--space-m);

			.content {
				display: flex;
				flex-direction: column;
				row-gap: var(--space-s);
			}

			button {
				align-self: end;
			}
		}
	}

	/* Todo / Booking Card */
	&.without-image-element {
		padding: var(--space-2xl);
		max-width: 35rem;
		min-height: 13rem;

		h4 {
			grid-column: 1;
			grid-row: 1;
		}

		.flag {
			font-weight: var(--font-weight-semibold);
			grid-column: 2;
			grid-row: 1;
			text-align: right;
		}

		.content-container {
			display: flex;
			flex-direction: column;
			grid-column: 1;
			grid-row: 2;
			row-gap: var(--space-s);

			p {
				width: fit-content;
			}
		}

		button {
			grid-column: 2;
			grid-row: 2;
		}
	}
}

/* Figure Component */
figure {
	display: flex;
	flex-direction: column;
	max-width: 40rem;
	row-gap: var(--space-m);

	.image-container {
		padding-inline: var(--space-l);
		padding-bottom: var(--space-m);
	}

	img {
		width: 100%;
		border-radius: var(--radius-m);
	}

	figcaption {
		font-size: var(--font-size-p);
		font-style: italic;
		text-align: center;
	}

	&:has(figcaption) {
		.image-container {
			border-bottom: var(--border-width-l) solid var(--color-border-orange);
		}
	}
}

/* Navigation Bar */
.navbar {
	display: flex;
	width: fit-content;
	padding: var(--space-s);
	align-items: center;
	background-color: var(--color-main);
	border-radius: var(--radius-l);
	flex-direction: row;

	ul {
		display: flex;
		width: 100%;
		column-gap: var(--space-m);
		list-style: none;

		a {
			color: var(--color-text-dark);
			text-decoration: none;
		}

		.nav-selected {
			background-color: var(--color-teal-60);
		}
	}
}

/* Burger Menu */
.burger {
	display: none;
	padding: var(--space-m);
	background-color: var(--color-main);
	border-radius: var(--radius-m);
	cursor: pointer;
	flex-direction: column;
	gap: var(--space-s);

	span {
		width: var(--space-xl);
		height: var(--space-xs);
		background-color: var(--color-text-dark);
		transition: var(--transition-medium);
	}
}

/* Profile Icon for Header */
.profile-image {
	background-color: var(--color-main);
	border-radius: var(--radius-l);
	cursor: pointer;
	padding-block: var(--space-m);
	padding-inline: var(--space-l);

	&:hover {
		background-color: var(--color-teal-60);
		transition: var(--transition-medium);
	}

	.avatar-container {
		/* height: 4rem; */

		.avatar {
			width: 2.5rem;
			height: 2.5rem;
		}
	}
}

/* Tabs */
.tabs-container {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);

	.tabs {
		display: flex;
		width: fit-content;
		column-gap: var(--space-m);
		flex-direction: row;

		.tab {
			display: flex;
			font-size: var(--font-size-button-big);
			font-weight: var(--font-weight-semibold);
			align-items: center;
			background-color: transparent;
			border-bottom-style: solid;
			border-bottom-width: var(--border-width-m);
			border-color: var(--color-orange-30);
			border-top-left-radius: var(--radius-m);
			border-top-right-radius: var(--radius-m);
			cursor: pointer;
			gap: var(--space-s);
			padding-block: var(--space-m);
			padding-inline: var(--space-l);

			&:hover {
				background-color: var(--color-orange-20);
				transition: var(--transition-short);
			}
		}

		.tab-active {
			background-color: var(--color-orange-20);
			border-color: var(--color-border-orange);
			transition: border var(--transition-short);
		}
	}

	.tab-content:not(:first-child) {
		display: none;
	}
}

/* Cardslider */
.card-slider {
	border-color: var(--color-border-orange);
	border-radius: var(--radius-xl);
	border-style: solid;
	border-width: var(--border-width-m);

	.scroll-container {
		display: flex;
		margin: var(--space-l);
		border-radius: var(--radius-m);
		column-gap: var(--space-l);
		flex-direction: row;
		overflow-x: scroll;
		scrollbar-color: var(--color-accent) transparent;
		scrollbar-width: thin;
	}

	&:not(.small-cards) .with-image-element {
		min-width: 85%;
	}

	&.small-cards .container {
		min-width: 30%;
	}

	/* .with-image-element {
        min-width: 85%;
    } */

	.without-image-element {
		min-width: 65%;
	}

	.container {
		padding: 0;
	}
}

/* Notification */
.notification {
	display: flex;
	width: fit-content;
	padding: var(--space-m);
	align-items: center;
	background-color: var(--color-yellow-10);
	border-color: var(--color-warning);
	border-radius: var(--radius-m);
	border-style: solid;
	border-width: var(--border-width-m);
	column-gap: var(--space-3xl);
	flex-direction: row;
	justify-content: space-between;

	.info-container {
		display: flex;
		width: fit-content;
		align-items: center;
		column-gap: var(--space-m);

		img {
			height: 2rem;
		}
	}

	.close-notification {
		height: 1.5rem;
	}
}

.notification-success {
	background-color: var(--color-green-10);
	border-color: var(--color-approved);
}

.notification-error {
	background-color: var(--color-red-10);
	border-color: var(--color-error);
}

@container container (width > 400px) {
	.element-card {
		&.without-image-element {
			.title {
				align-self: start;
			}

			.flag {
				align-self: start;
			}

			.content-container {
				align-self: end;
				justify-content: center;
			}

			button {
				place-self: end end;
			}
		}
	}
}

/* Containerqueries */
@container container (width < 750px) {
	.row-card {
		.request-date {
			display: none;
		}
	}

	/* BurgerMenu */
	.navbar {
		height: fit-content;
		padding: 0;
		background-color: transparent;

		ul {
			display: none;
		}
	}

	.burger {
		display: flex;
	}

	.menu-open {
		display: flex;
		align-items: end;
		background-color: var(--color-main);
		border-radius: var(--radius-m);
		flex-direction: column;
		gap: var(--space-m);
		padding-block: var(--space-m);
		padding-left: var(--space-3xl);
		padding-right: var(--space-m);

		.burger {
			padding: 0;
		}

		.line-1 {
			transform: translateY(12px) rotate(45deg);
		}

		.line-2 {
			opacity: 0;
		}

		.line-3 {
			transform: translateY(-12px) rotate(-45deg);
		}

		ul {
			display: flex;
			align-items: end;
			flex-direction: column;
			gap: var(--space-s);
		}
	}
}

@container container (width < 650px) {
	.row-card {
		&.creator-group-member.group-member-card .member-date {
			display: none;
		}

		&.votes-card {
			min-height: auto;

			&.creator-votes .person-container {
				display: none;
			}
		}
	}
}

@container container (width < 550px) {
	.row-card {
		padding: var(--space-m);

		&.user-group-member.group-member-card .member-date {
			display: none;
		}

		&.member-votes.votes-card .person-container {
			display: none;
		}

		.content-container {
			column-gap: var(--space-l);
		}

		&.spending-card .content-container,
		&.spending-card .text-container {
			column-gap: var(--space-m);
		}

		&.friend-request-card,
		&.group-member-card {
			.actions {
				.button {
					display: none;
				}

				.icon {
					display: inline-flex;
				}
			}
		}
	}

	.card-slider {
		&.small-cards .container {
			min-width: 85%;
		}

		&:not(.small-cards) .scroll-container {
			height: 30rem;
			flex-direction: column;
			overflow: hidden scroll;
			row-gap: var(--space-l);
		}
	}

	.dropzone {
		padding: var(--space-m);
		flex-direction: column;
	}
}

@container container (width < 401px) {
	.logo-card h1 {
		display: none;
	}

	.element-card {
		display: flex;
		flex-direction: column;
		row-gap: var(--space-l);

		h4 {
			text-align: center;
		}

		&.without-image-element {
			padding: var(--space-xl);
			min-height: 0;

			& > * {
				align-self: center;
			}

			.flag {
				display: none;
			}

			.content-container {
				align-items: center;
			}
		}

		&.with-image-element {
			.content-container {
				button {
					align-self: center;
				}

				.content {
					p:first-child {
						text-align: center;
					}

					p:not(:first-child) {
						display: none;
					}
				}
			}

			/* .description {
                display: none;
            } */
		}
	}

	.dropzone .info-message {
		font-size: var(--font-size-p);
	}

	.card-slider {
		.with-image-element {
			min-width: 0;
		}

		.without-image-element {
			min-height: auto;
		}
	}

	.input-row {
		align-items: flex-end;
		flex-direction: column;
		row-gap: var(--space-s);
	}

	.votes-container {
		column-gap: var(--space-m);

		.actions {
			.button {
				display: none;
			}

			.icon {
				display: inline-flex;
			}
		}
	}

	.row-card,
	.votes-container {
		h3 {
			font-size: var(--font-size-h4);
		}
	}

	.row-card {
		&.spending-card,
		&.voting-card {
			display: flex;
			flex-direction: column;
			row-gap: var(--space-m);

			.content-container {
				flex-direction: column;
				row-gap: var(--space-m);

				.text-container {
					align-items: center;
					flex-direction: column;
					row-gap: var(--space-s);
				}
			}
		}

		.content-container {
			column-gap: var(--space-m);

			.avatar-container img {
				width: 3rem;
				height: 3rem;
			}

			h4 {
				font-size: var(--font-size-p);
			}
		}
	}
}