@use "../common/mixins" as *;
@use "../common/variables" as *;

.urlslab-dashboardmodule {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 1.5em;
	background-color: $white;
	border-radius: $br-10;
	filter: $box-shadow-small;
	transition: all $transitionTime;
	overflow: hidden;

	@media (hover: hover) {

		&:hover {
			filter: none;
			box-shadow: 0 0 0 2px $primary-color;
		}
	}

	&-activating {

		@include posZero;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: $font-weight-semi;
		z-index: 2;
		background-color: rgba($white, 0.7);
		color: $black;
		animation: fadeIn $transitionTime;

		~ * {
			opacity: 0.5;
		}
	}

	&-top {
		border-bottom: 1px solid $grey-light;
		margin: 0 -2.25em 1.5em;
		padding: 0 2.25em 1.5em;
	}

	&-tags {
		margin: 1.5em 0 0;
	}

	&-switch {
		display: flex;
		justify-content: flex-end;
	}

	&-title[class] {
		font-size: 1.15rem;
		font-weight: $font-weight-semi;
		cursor: default;

		a {
			text-decoration: none;

			&:not(.active):hover {
				color: inherit;
			}
		}

	}

	&-content {
		display: flex;
		flex-direction: column;
		font-size: 0.75rem;
		height: 100%;

		p {
			font-size: 14px;
			margin: 0;
		}
	}


	&-icon {

		@include square(2.125em);
		filter: saturate(0);
	}

	&.active &-icon {
		filter: saturate(1);
	}

	@media (min-width: $breakpoint-tablet) {
		padding: 2.25em;
		margin: 0.4em;
		width: calc(50% - 0.8em);

		&-icon {
			margin-right: 1em;
		}

		&-top {

			.urlslab-tag {
				margin-left: 0.75em;
			}
		}

	}

	@media (min-width: 1680px) {
		width: calc(33.3% - 0.8em);
		max-width: 31.25em;
	}
}