@mixin card($gap: 1) {
	display: flex;
	flex-direction: column;
	gap: calc(var(--base-gap) * $gap);
	background-color: var(--widgets-background-color);
	min-width: var(--min-width);
	max-width: var(--max-width);
	padding: var(--base-padding);
	border-radius: var(--widgets-border-base-radius);
	border: var(--widgets-border-width) solid var(--widgets-border-color);
	box-shadow: var(--widgets-box-shadow-x) var(--widgets-box-shadow-y) var(--widgets-box-shadow-blur)
		var(--widgets-box-shadow-color);
	backdrop-filter: blur(var(--widgets-background-blur));
}

@mixin fancy-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	background-color: var(--widgets-background-color-dim);
	border-radius: calc(var(--widgets-border-base-radius) * 0.5);
	width: 100%;

	:global(> li) {
		border-bottom: var(--inputs-border-width) solid var(--widgets-border-color);
		&:last-child {
			border-bottom: none;
		}
	}
}

@mixin fancy-table {
	text-align: left;
	padding: 0;
	width: 100%;

	background-color: var(--inputs-background-color);
	color: var(--inputs-on-background-color);
	border: var(--inputs-border-width) solid var(--inputs-border-color);
	border-radius: var(--inputs-border-base-radius);

	border-spacing: 0;
	border-collapse: separate;

	text-decoration: inherit;
	margin-top: 0;
	overflow-x: scroll;

	tr {
		text-decoration: inherit;
		border-radius: var(--inputs-border-base-radius);

		td,
		th {
			padding: calc(var(--inputs-border-base-radius) * 1.25) var(--inputs-border-base-radius);
			// padding: 0.75rem 1rem;
		}

		&:not(:last-child) {
			td,
			th {
				border-bottom: var(--inputs-border-width) solid var(--inputs-border-color);
			}
		}

		th {
			text-align: left;
			font-weight: 600;
			padding-bottom: 0.75rem;
			background-color: var(--widgets-background-color-dim);
		}
	}
}
