.module.tabs {
	--border-thickness: 2px;
	--border-color: #444;
	--tab-inactive: #eee;
	width: 100%;

	&>.tabs {
		display: grid;
		grid-template-columns: repeat(3, min-content) 1fr;
		grid-template-rows: min-content 1fr;

		.tab {
			padding: 12px 16px;
			border-top: var(--border-thickness) solid var(--border-color);
			border-right: var(--border-thickness) solid var(--border-color);
			border-bottom: var(--border-thickness) solid var(--border-color);
			cursor: pointer;
			user-select: none;
			display: grid;
			justify-items: center;
			white-space: nowrap;
			background-color: var(--tab-inactive);

			&.selected {
				background-color: #fff;
				border-bottom: none;
			}

			&:nth-child(1) {
				border-top-left-radius: 8px;
				border-left: var(--border-thickness) solid var(--border-color);
			}

			&:nth-child(3) {
				border-top-right-radius: 8px;
			}

			&.empty {
				padding: 0px;
				background-color: unset;
				border: none;
				border-bottom: var(--border-thickness) solid var(--border-color);
			}

		}

	}

	.tab-content {
		border-left: var(--border-thickness) solid var(--border-color);
		border-right: var(--border-thickness) solid var(--border-color);
		border-bottom: var(--border-thickness) solid var(--border-color);
		grid-column: 1 / -1;
		overflow-y: scroll;
		scrollbar-width: none;
		padding: 16px;

		&>div {
			display: none;

			&.selected {
				display: block;
			}

		}

	}
}