@import "/UI/Theme.scss";

UISheet
{
	flex-direction: column;
	flex-shrink: 0;
	font-family: "Inter";
	font-size: $ui-settings-font;
	font-weight: 500;
	color: $ui-text-label;

	> .body
	{
		flex-direction: column;
		flex-shrink: 0;
	}

	.sheet-group
	{
		flex-direction: column;
		flex-shrink: 0;

		&.hidden
		{
			display: none;
		}

		> .header
		{
			flex-direction: row;
			align-items: center;
			flex-shrink: 0;
			gap: 6px;
			@include ui-section-header;

			.title
			{
				@include ui-heading-text;
			}
		}

		// the first group stays against the top of the sheet
		&:not(:first-child) > .header
		{
			margin-top: $ui-section-gap;
		}

		> .rows
		{
			flex-direction: column;
			flex-shrink: 0;

			&.hidden
			{
				display: none;
			}
		}
	}

	.textentry.text-field
	{
		@include ui-text-entry;
		width: 100%;
		flex-shrink: 0;

		&.text-area
		{
			height: auto;
			min-height: 96px;
			padding: 5px 6px;
			align-items: flex-start;
		}
	}

	// the empty gap of [Space]
	.space
	{
		flex-shrink: 0;
	}

	.sheet-row
	{
		flex-direction: row;
		align-items: center;
		flex-shrink: 0;
		min-height: 22px;
		margin-bottom: 2px;

		&.hidden
		{
			display: none;
		}

		&.disabled
		{
			opacity: 0.4;

			// widgets turn pointer-events back on, so switch them off on every child too
			> .control, > .control *
			{
				pointer-events: none;
			}
		}

		> .label
		{
			width: 121px;
			flex-shrink: 0;
			padding-right: 6px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: $ui-settings-font;
			font-weight: 500;
			color: $ui-text-label;
		}

		> .control
		{
			flex-direction: row;
			flex-grow: 1;
			flex-shrink: 1;
			min-width: 0px;
		}

		// a [SameLine] control whose condition hides it
		> .control > .hidden
		{
			display: none;
		}

		// or greys it out, the way a disabled button and a disabled row look
		> .control > .disabled
		{
			opacity: 0.4;
		}

		> .control > .disabled, > .control > .disabled *
		{
			pointer-events: none;
		}

		// control takes the whole row if it has no name
		&.bare > .control
		{
			width: 100%;
		}

		// buttons share the row evenly
		&.buttons > .control
		{
			gap: 6px;

			> UIButton
			{
				flex-grow: 1;
				flex-basis: 0px;
			}
		}

		// a checkbox sits at the right edge, the name gets all the room before it (could've been better)
		&.toggle
		{
			> .label
			{
				width: auto;
				flex-grow: 1;
			}

			> .control
			{
				flex-grow: 0;
				flex-shrink: 0;
				justify-content: flex-end;
			}
		}

		&.wide
		{
			flex-direction: column;
			align-items: stretch;

			> .label
			{
				width: auto;
				height: 18px;
				justify-content: center;
			}

			> .control
			{
				flex-grow: 0;
				margin-top: 1px;
			}
		}
	}
}