// Variables.
@import "variables";

.customize-control-login-designer-templates {
	margin-bottom: 0;
	margin-top: -6px;
	position: relative;

	.login-designer-templates {
		margin-left: -3px;
		overflow-y: scroll;
		padding-left: 3px;
		padding-right: 3px;
		padding-top: 3px;
		width: calc(100% + 1px);

		&__input {
			display: none !important;

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

		&__label {
			border-radius: 1px;
			border: 1px solid transparent;
			box-shadow: 0 0 0 0 #5b9dd9, 0 0 0 0 rgba(30, 140, 190, 0.8);
			cursor: pointer;
			display: block;
			margin: 0 0 8px;
			transition: border-color 100ms, box-shadow 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);

			&:hover {
				box-shadow: 0 0 0 1px #5b9dd9, 0 0 3px rgba(0, 115, 170, 0.8);
			}

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

		&__screenshot {
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			border: 2px solid $background;
			border-radius: 3px;
			bottom: 0;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
		}

		&__intrinsic {
			line-height: 0;
			margin-bottom: 0;
			overflow: hidden;
			position: relative;

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