@use '../variables' as *;

.#{$prefix}descriptions {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: var(--#{$prefix}descriptions-gap-y);
	column-gap: var(--#{$prefix}descriptions-gap-x);
}

.#{$prefix}description {
	position: relative;
	padding-block: var(--#{$prefix}description-padding-y);
	padding-inline: var(--#{$prefix}description-padding-x);

	&__container {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		row-gap: var(--#{$prefix}description-gap-y);
		column-gap: var(--#{$prefix}description-gap-x);
	}

	&-value {
		display: flex;
		align-items: center;

		&__start-content,
		&__end-content {
			flex-shrink: 0;
		}

		&__content {
			flex-grow: 1;
		}
	}

	.#{$prefix}descriptions--row &-label {
		grid-column: span 6 / span 6;
	}

	.#{$prefix}descriptions--row &-value {
		grid-column: span 6 / span 6;
	}

	.#{$prefix}descriptions--col &-label,
	.#{$prefix}descriptions--col &-value {
		grid-column: span 12 / span 12;
	}

	&-label {
		font-size: var(--#{$prefix}description-label-font-size);
		font-weight: var(--#{$prefix}description-label-font-weight);
		color: var(--#{$prefix}description-label-color);
		opacity: var(--#{$prefix}description-label-opacity);
	}

	&-text {
		display: inline;
		font-size: var(--#{$prefix}description-text-font-size);
		font-weight: var(--#{$prefix}description-text-font-weight);
		color: var(--#{$prefix}description-text-color);
		opacity: var(--#{$prefix}description-text-opacity);
		word-break: break-word;
	}

	&-empty {
		opacity: 0.75;
		user-select: none;
		cursor: default;
	}
}