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

.main.assign-license {
	// Make sure there's sufficient space for the floating action bar on mobile.
	padding-bottom: 148px;

	@include breakpoint-deprecated( ">660px" ) {
		padding-bottom: 88px;
	}

	@include breakpoint-deprecated( ">1400px" ) {
		padding-bottom: 0;
	}
}

.assign-license-form {

	p {
		font-size: 1rem;
	}

	&__placeholder {
		@include placeholder( --color-neutral-10 );

		height: 43px;
	}

	.select-dropdown__container {
		width: 100%;
	}

	&__actions {
		display: flex;
		justify-content: flex-end;
		margin: 42px -10px 0;

		> * {
			margin: 0 10px;
		}
	}

	&__pagination {
		margin: 64px 0;
	}
}

.assign-license-form__top {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;

	@include breakpoint-deprecated( ">660px" ) {
		flex-wrap: wrap;
	}
}

.assign-license-form__controls {
	@include licensing-portal-bottom-action-bar;

	display: flex;
	flex-direction: column-reverse;
	justify-content: stretch;
	align-items: center;
	flex-wrap: wrap;
	flex-grow: 1;

	@include breakpoint-deprecated( ">660px" ) {
		flex-direction: row;
		flex-grow: 1;
		justify-content: flex-end;
		margin-bottom: 1rem;

		.button {
			flex-grow: 1;
		}
	}

	@include break-medium {
		.button {
			flex-grow: 0;
		}
	}

	@include break-xlarge {
		flex-direction: row;
		flex-grow: 0;
	}
}

.assign-license-form__bottom {
	display: flex;
	flex-wrap: wrap;
}

p.assign-license-form__description {
	flex: 1 0 100%;
	align-self: flex-end;
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: #333;

	@include break-medium {
		flex: 1 1 auto;
		margin-right: 1rem;
	}
}

.assign-license-form__site-card {
	margin-bottom: 0;
}

.assign-license-form__search-field {
	margin-bottom: 1px;
}

.assign-license-form__site-card-radio.form-radio {
	margin-right: 1rem;
}

.assign-license-form__assign-later.button {
	margin-right: 0;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;

	@include breakpoint-deprecated( ">660px" ) {
		margin-right: 1rem;
	}
}

.assign-license-form__assign-now.button {
	margin-bottom: 0.5rem;
	white-space: nowrap;

	// :active introduces a 1px border but :focus introduces a 1.5px border which causes the button to move around.
	border-width: 1.5px !important;
	border-color: transparent;

	@include breakpoint-deprecated( ">660px" ) {
		margin-bottom: 0;
	}
}

.assign-license-form__empty-state {
	p {
		font-size: 1.5rem;
		color: var(--color-text);
		margin-block-start: 11px;
		margin-block-end: 16px;
		letter-spacing: 0.005em;
		line-height: 32px;

		@include break-medium {
			max-width: 90%;
		}

		@include break-large {
			margin-block-start: 6px;
			max-width: 60%;
		}
	}

	button {
		margin-inline-end: 8px;
		margin-block-end: 6px;

		@include break-small {
			margin-block-end: 0;
		}
	}
}
