@use 'mixin' as *;

.rcf7-licenses-tab {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;

	@media (min-width: 650px) {
		grid-template-columns: 1fr 1fr;
	}

	margin-top: 1rem;
}

.rcf7-license-config {
	display: flex;
	flex-direction: column;
	height: fit-content;

	&:where(span, button) {
		transition: all 1s ease-in-out;
	}

	h4 {
		margin: 0;
	}

	&__header {

		@include row-spaced-elements;

		padding: 1rem;
		background-color: var(--rcf7-blue-50);
	}

	&__body {
		padding: 1rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	&__description {
		margin: 0;
	}

	&__actions {

		@include row-spaced-elements;
	}

	&__error {
		margin: 0;
		color: var(--rcf7-red-700);
	}
}

.rcf7-license-field {
	display: flex;
	flex-direction: row;
	gap: 1rem;

	input[type="text"] {
		font-size: 0.875rem;
		line-height: 1.25;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		flex-grow: 1;
	}
}