/* stylelint-disable no-descending-specificity */
@use "../common/variables" as *;
@use "../common/mixins" as *;

.urlslab-overview {
	max-width: 57.5em;
	margin: 3em auto 1.5em;

	.urlslab-panel {
		padding: 1.5em;
		min-height: calc(100vh - var(--headerTopHeight) - var(--headerMenuHeight) - 8.5em);
	}


	&-menu[class] {
		margin-top: 0;
		font-size: 0.8125rem;
		font-weight: 600;

		.urlslab-overview {

			&-menuItem {
				display: block;
				border-radius: $br-10;
				padding: 0.5em;

				&.active {
					background-color: $grey-lightest;
				}

				button {
					display: flex;
					align-items: center;
					text-align: left;
					width: 100%;
				}
			}

			&-menuIcon {

				@include square(2.77em);
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 0 0 auto;
				margin-right: 0.5em;
				border-radius: 50%;
				background-color: $grey-light;

				img {
					display: block;
					width: 1.26em;
				}
			}
		}
	}

	&-content[class] {

		p {
			font-size: 0.875em;
		}

		h4 {
			font-size: 1em;
			margin-top: 1em;
		}

		img,
		picture,
		video {
			max-width: 100%;
			margin: 1.5em auto;
		}

		ul {
			font-size: 0.825rem;

			li {
				position: relative;
				padding-left: 2em;

				&::before {

					@include square(1.385em);
					position: absolute;
					top: -0.125em;
					left: 0;
					background: url(../../images/list-checkbox.svg) center center no-repeat;
					background-size: contain;
					content: "";
				}
			}
		}

		table {
			border-collapse: collapse;
			border: none;
			border-radius: $br-10 $br-10 0 0;
			overflow: hidden;
			width: 100%;
			margin-bottom: 1.5em;

			th,
			td {
				padding: 0.5em;
				border: none;
				text-align: center !important;
				white-space: normal;
			}

			tr {

				&:nth-of-type(even) {
					background-color: $grey-lightest;
				}
			}

			th {
				background-color: $grey-light;
				font-weight: 600;
				font-size: 0.875rem;
				height: auto !important;

				+th {
					border-left: 1px solid $grey-medium;
				}
			}

			td {
				font-size: 0.8125rem;

				+td {
					border-left: 1px dashed $grey-light;
				}
			}

		}
	}

	@media (min-width: $breakpoint-tablet) {

		&-menu {
			width: 25%;
			margin-right: 1.5rem;
		}

		&-content {
			width: calc(75% - 1.5rem);
		}
	}

	@media (min-width: $breakpoint-desktop-box) {

		&-content {
			padding-right: 4rem;
		}
	}
}