@import '../utils/variables';
@import '../utils/mixins';

.comet-modal > .comet-inner > .comet-body > .comet-mytemplates {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;

	> .comet-scope {
		width: 16.66%;
		padding: 10px;
		color: $liDark;
		text-align: center;
		padding-bottom: 20px;

		.comet-figure {
			height: 150px;
			background: $liLight;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-bottom: 10px;
			overflow: hidden;
			@include border_radius( 3px );

			> .comet-buttonset{
				position: absolute;
				top: 100%;
				left: -99999em;
				background: rgba( 0, 0, 0, .7 );
				display: flex;
				align-items: center;
				justify-content: center;
				@include transition( top .1s ease-in-out );

				.comet-button {
					padding: 10px;
					background: rgba( 0, 0, 0, .7 );
					color: white;
					opacity: .7;
					margin: 5px;
					height: auto;

					.cico {
						height: 20px;
						display: block;
					}

					&:hover { opacity: 1; }

				}

			}
		}

		&:hover .comet-figure > .comet-buttonset{
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}

	}

}

.comet-modal.comet-save-template > .comet-inner > .comet-body > .comet-savebox {
	max-width: 500px;
	margin: 0 auto;
	padding: 20px;

	> .comet-saveform {
		display: flex;
		align-items: center;
		padding: 10px 0;

		> .comet-button {
			margin-left: 10px;
			padding: 10px 15px;
			height: auto;
			line-height: 1;

			> .cico { height: 20px; }

			.comet-waitwhile { padding: 7px 15px; }
		}
	}

}