// Variables.
@import "variables";

.customize-control-login-designer-gallery {
	margin-bottom: 17px !important;
	margin-top: 15px;

	.login-designer-gallery {
		margin-left: -3px;
		margin-top: 13px;
		max-height: 165px;
		overflow-x: hidden;
		overflow-y: scroll;
		padding-right: 20px;
		padding-top: 4px;
		width: calc(100% + 6px);
		zoom: 1;

		@media screen and (min-width: 1667px) {
			max-height: 10.1vw;
		}

		@media screen and (min-width: 1900px) {
			max-height: 10.3vw;
		}

		&:after,
		&:before {
			content: "";
			display: table;
		}

		&:after {
			clear: both;
		}

		&__item {
			float: left;
			width: 20%;
		}

		&__intrinsic {
			border-radius: 2px;
			border: 2px solid #eee;
			box-shadow: 0 0 0 0 #5b9dd9, 0 0 0 0 rgba(30, 140, 190, 0);
			display: block;
			line-height: 0;
			margin-bottom: 4px;
			margin-left: 2px;
			margin-right: 2px;
			overflow: hidden;
			position: relative;
			transition: box-shadow 100ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1);

			@media screen and (min-width: 1667px) {
				margin-bottom: 6px;
				margin-right: 3px;
			}

			&:after {
				content: "";
				display: block;
				padding-top: 100%;
			}

			&:active {
				transform: scale(0.97);
			}
		}

		&__img {
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 2px;
			bottom: 0;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
		}

		&__checkbox {
			display: none !important;

			&:checked + label .login-designer-gallery__intrinsic {
				box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.7);
			}
		}
	}
}