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

.license-preview {
	margin: 0;
	font-size: 0.875rem;
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1.25rem;
	color: var(--studio-gray-70);
	transition: margin 0.2s ease;

	// Matching bottom margin of Card component.
	&--is-open {
		margin-top: 10px;
		margin-bottom: 10px;

		@include breakpoint-deprecated( ">480px" ) {
			margin-top: 16px;
			margin-bottom: 16px;
		}
	}

	&__card {
		// Increased specificity to override card styles.
		&--is-detached.card.is-compact,
		&--is-revoked.card.is-compact {
			// Reduce padding to fit the extra border width on the left so columns are still aligned perfectly.
			padding-left: 13px;

			@include break-mobile {
				padding-left: 21px;
			}
		}
	}

	&__no-value {
		position: relative;
		top: 3px;
	}

	&__domain {
		padding: 0;
		margin: 0 0 4px;
		font-size: 1.25rem;
		font-weight: normal;
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		line-height: 1.75rem;
		color: var(--studio-gray-100);
		overflow: hidden;
		word-break: break-all;

		span + span {
			margin-left: 12px;

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

			@include break-wide() {
				display: inline;
				margin-left: 12px;
			}
		}
	}

	&__tag {
		white-space: nowrap;
		font-size: 0.875rem;
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		line-height: 1rem;

		&--is-just-issued,
		&--is-assigned {
			color: var(--studio-green-50);
			opacity: 0;
			animation: hide-just-issued-tag 5s linear;
		}

		&--is-detached {
			color: var(--studio-orange-40);
		}

		&--is-revoked {
			color: var(--studio-red-60);
		}

		svg {
			position: relative;
			top: 3px;
			margin-right: 4px;
		}
	}

	&__product {
		span {
			display: none;

			@include break-wide() {
				display: inline;
			}
		}
	}

	&__label {
		font-weight: 600;
		white-space: nowrap;

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

	&__copy-license-key {
		&.button {
			font-weight: 600;
			color: var(--studio-gray-80);
			border-color: var(--color-text-subtle);
		}
	}

	&__toggle {
		padding: 0;
	}

	&--placeholder &__domain,
	&--placeholder &__product,
	&--placeholder &__label + div,
	&--placeholder &__copy-license-key {
		@include placeholder( --color-neutral-10 );
	}

	&__assign-button {
		font-size: 0.75rem;
		font-weight: 400;
		text-decoration: underline;
		margin-left: 10px;
	}
}

@keyframes hide-just-issued-tag {
	0% {
		display: inline;
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

a,
button {
	&.license-actions__menu-item {
		margin: 0 -1px;
		border-style: solid;
		border-color: var(--studio-gray-5);
		border-width: 0 0 1px;
		font-size: 0.875rem;
		height: 40px;
		box-sizing: border-box;
		color: var(--studio-black);
		display: flex;
		align-items: center;
		padding: 0 16px;
		min-width: 200px;

		&:last-child {
			margin-bottom: 5px;
			border-bottom-width: 0;
		}

		&:first-child {
			margin-top: 5px;
		}

		&:hover,
		&:focus {
			border-style: solid;
			border-color: var(--studio-gray-5);
			border-width: 0 0 1px;
			background: var(--studio-black);
			cursor: pointer;
			color: var(--studio-white);

			&:last-child {
				border-bottom-width: 0;
			}
		}

		svg.gridicon {
			vertical-align: middle;
			position: absolute;
			right: 10px;
			top: unset;
		}

		&.is-destructive {
			color: var(--studio-red-50);
		}
	}
}

.card.license-preview__card.license-preview__card--child-license {
	padding: 16px 32px;
	background-color: #fafafa;
}

.button.is-borderless.license-bundle-dropdown__button {
	text-overflow: clip;
	padding: 4px;
	max-height: 24px;
	&:hover,
	&:focus {
		background: var(--color-sidebar-menu-hover-background);
		color: var(--color-text);
		fill: var(--color-text);
	}
}

.license-bundle-dropdown__popover-menu {
	font-size: rem(14px);
	font-weight: 400;
	border-radius: 2px;

	.popover__arrow {
		display: none;
	}

	.popover__menu {
		padding: 8px 4px;
	}

	.popover__menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popover__menu-item:hover,
	.popover__menu-item:focus {
		background: var(--color-sidebar-menu-hover-background);
		color: var(--color-text);
		fill: var(--color-text);

		.gridicon {
			fill: var(--color-text);
		}
	}

	.popover__menu-item .gridicon {
		margin: 0;
	}
}

.popover__menu-item.license-bundle-dropdown__popover-menu-item-revoke {
	&,
	&:hover,
	&:focus {
		color: var(--studio-red-50);

		.gridicon {
			fill: var(--studio-red-50);
		}
	}
}
