@use '_variables.scss' as *;
@use '_placeholders.scss' as *;

.adpresso-image-group-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-start;
}

.adpresso-image-group-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .9em;
	background: none;
	cursor: pointer;
	padding: 2em 0.5em;
	border: calc(0.12em * 1.3) solid $color-icon;
	border-radius: 0.5em;
	aspect-ratio: 1 / 1;

	img {

	}

	&:hover {
	}

	&.is-active {
		border-color: $color-primary;
		.adpresso-badge {
			margin-top: -.4em;
			margin-bottom: -.4em;
		}
	}

	&__image {
		min-width: 120px;

		svg {
			display: block;
			margin: 0 auto;
		}
	}

	&__label {
		color: $color-text;
		padding: 0 0.5em;
		text-overflow: ellipsis;
		overflow: hidden;
		display: block;
		white-space: nowrap;
		width: 100%;
		text-align: center;
		font-size: $font-size;
		max-width: 120px;
		line-height: 1;

		&.adpresso-badge {
			max-width: fit-content;
		}
	}

	&.is-premium {
		pointer-events: none;
		cursor: not-allowed;
		position: relative;
		border-color: $color-premium;
		background-color: $color-premium-disabled;

		.adpresso-image-group-item__label {
			color: $color-premium;
		}

		.adpresso-premium-label {
			position: absolute;
			top: -0.12em;
			left: -0.12em;
			strong {
				margin: 0;
				font-size: $font-size;
				border-top-right-radius: 0;
				border-bottom-left-radius: 0;
			}
			a {
				display: none;
			}
		}
	}
}