@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

$column-product: 1;
$column-domain: 2;
$column-actions: 5;
$column-toggle: 6;

$grid-xlarge: 0.5fr 0.5fr 114px 114px 128px 74px;
$grid-wide: 0.5fr 0.5fr 128px 128px 128px 74px;

.license-list-item {
	display: grid;
	grid-template-columns: 1fr 74px;

	> * {
		display: none;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	> *:nth-child(#{$column-domain}) {
		grid-column-end: auto;
		display: block;
	}

	> *:nth-child(#{$column-actions}) {
		display: none;
	}

	> *:nth-child(#{$column-toggle}) {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 16px;
		padding: 0;
	}

	@include break-xlarge() {
		grid-template-columns: $grid-xlarge;
		grid-column-gap: 0;
		grid-row-gap: 0;
		align-items: center;

		> * {
			display: block;
		}

		> * + * {
			margin-left: 0;
			padding-right: 7px;
			padding-left: 7px;
		}

		> *:last-child {
			margin-left: auto;
		}

		> *:nth-child(#{$column-actions}) {
			display: block;
		}

		> *:nth-child(#{$column-domain}) {
			grid-column-end: auto;
		}

		> *:nth-child(#{$column-toggle}) {
			grid-column-end: auto;
		}

		.license-preview__product-small {
			display: none;
		}
	}

	@include break-wide() {
		grid-template-columns: $grid-wide;

		.license-preview__product-small {
			display: none;
		}
	}

	&--header {
		grid-template-columns: repeat(4, 1fr);

		> *:nth-child(#{$column-domain}) {
			grid-column-end: auto;
			justify-self: start;
			padding: 16px 0;
		}

		> *:nth-child(#{$column-actions}),
		> *:nth-child(#{$column-toggle}) {
			display: none;
		}

		@include break-xlarge() {
			grid-template-columns: $grid-xlarge;
		}

		@include break-wide() {
			grid-template-columns: $grid-wide;
		}

		h2,
		h2 button {
			font-size: 0.875rem;
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			line-height: 1.25rem;
			white-space: nowrap;
			color: var(--studio-gray-70);
		}

		h2 {
			font-weight: 400;
		}

		h2.is-selected {
			font-weight: 600;
		}

		button {
			display: flex;
			align-items: center;
			padding: 16px 0;
			font-weight: inherit;
			cursor: pointer;
		}
	}

	.is-selected &__sort-indicator {
		opacity: 1;
	}

	&__sort-indicator {
		transition: transform 0.2s ease;
		opacity: 0;

		&.is-sort-asc {
			transform: rotateZ(180deg);
		}
	}

	.badge {
		font-size: 0.65rem; /* stylelint-disable-line */
		padding: 0 10px;
		font-weight: 400;
		border-radius: 0;
	}

	.badge--success {
		background: var(--studio-green-5);
		color: var(--studio-green-50);
	}

	.badge--warning {
		background: var(--studio-yellow-5);
		color: var(--studio-yellow-70);
	}

	.badge--error {
		background: var(--studio-red-5);
		color: var(--studio-red-70);
	}

	.license-preview__product-small {
		font-size: 1rem;
	}

	.license-preview__unassigned {
		display: flex;
		align-items: center;
	}
}

.license-preview__bundle {
	.license-preview__no-value {
		display: none;

		@include break-xlarge() {
			display: block;
		}
	}

	.license-preview__license-count {
		display: block;
		max-width: fit-content;
		margin-block-start: 4px;

		@include break-xlarge() {
			display: none;
		}
	}
}

.license-preview__badge-container {
	display: flex;

	.license-preview__license-count {
		text-wrap: nowrap;
		display: none;

		@include break-xlarge() {
			display: block;
		}
	}
}
