@use "../../styles/variables" as *;

.wcgs-layout-art {
	position: relative;
	overflow: hidden;

	&__shape {
		position: absolute;
		color: $wcgs-body;
	}

	&__arrows {
		display: block;
		width: 82%;
		height: 40%;
		overflow: visible;
	}
}

.wcgs-layout-picker {
	position: relative;

	&__frame {
		flex: 0 0 112px;
		width: 112px;
		height: 88px;
		border: 1px solid $wcgs-border-light;
		border-radius: 6px;
		background: $wcgs-bg-faint;
	}

	&__info {
		flex: 1 1 auto;
	}

	&__name {
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		color: $wcgs-text;
	}

	&__change {

		@include wcgs-reset-button;
		height: 34px;
		padding: 0 12px;
		border: 1px solid $wcgs-border;
		border-radius: 4px;
		background: #fff;
		font-size: 13.5px;
		font-weight: 500;
		color: $wcgs-muted;
		transition:
			background-color 200ms $wcgs-ease,
			border-color 200ms $wcgs-ease,
			color 200ms $wcgs-ease;

		&:hover,
		&.is-open {
			background-color: $wcgs-bg-soft;
			border-color: $wcgs-border-hover;
			color: $wcgs-text;
		}
	}

	&__menu {

		@include wcgs-popover(top center);
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 6px);
		z-index: 41;
		overflow: hidden;
		border: 1px solid $wcgs-divider;
		border-radius: 10px;
		background: #fff;
		box-shadow: $wcgs-menu-shadow;
	}

	&__menu-head {
		align-items: baseline;
		padding: 10px 14px;
		border-bottom: 1px solid $wcgs-line;
	}

	&__menu-title {
		font-size: 14px;
		font-weight: 600;
		color: $wcgs-text;
	}

	&__menu-meta {

		@include wcgs-truncate;
		font-size: 13px;
		color: $wcgs-muted;
	}

	&__grid {
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
		gap: 10px 8px;
		max-height: min(360px, 55vh);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px 14px 14px;
		scrollbar-width: thin;
	}

	&__option {

		@include wcgs-reset-button;
		align-items: stretch;
		border-radius: 6px;
	}

	&__card {
		position: relative;
		height: 76px;
		border: 1px solid $wcgs-divider;
		border-radius: 6px;
		background: #fff;
		transition:
			border-color 160ms $wcgs-ease,
			box-shadow 160ms $wcgs-ease;
	}

	&__option:hover &__card {
		border-color: #b4b5ba;
		box-shadow: 0 2px 8px rgba(16, 17, 20, 0.06);
	}

	&__option.is-active &__card {
		border-color: $wcgs-accent;
		box-shadow: inset 0 0 0 0.5px $wcgs-accent;
	}

	&__check {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 16px;
		height: 16px;
		display: none;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: $wcgs-accent;
	}

	&__option.is-active &__check {
		display: flex;
	}

	&__option-name {
		font-size: 12.5px;
		font-weight: 500;
		line-height: 1.3;
		text-align: center;
		text-wrap: balance;
		color: $wcgs-text;
	}

	// Pro layout: grey card and name, lock pill in the corner.
	&__option.is-locked {
		cursor: default;
	}

	&__option.is-locked &__card {
		background: $wcgs-bg-faint;
	}

	&__option.is-locked:hover &__card {
		border-color: $wcgs-divider;
		box-shadow: none;
	}

	&__option.is-locked &__option-name {
		color: $wcgs-locked;
	}
}