@use "../../../css/wp-admin-colors";
@import "../../../css/boxes";
@import "../../../css/ui-constants";
@import "../../../css/indeterminate-checkbox";

$boxHorizontalPadding: 12px;
$columnLineHeight: 31px;
$elementLineHeight: $columnLineHeight;

$unitlessContentFontSize: 14;
$contentFontSize: $unitlessContentFontSize * 1px;

$sectionVerticalSeparation: 20px;
$sectionHorizontalSeparation: 20px;
$elementListOuterSeparation: 8;

$resetIconSize: 20px;
$columnOptionsHorizontalPadding: $boxHorizontalPadding;

#ame-tc-settings-page-container {
	margin-top: 0;

	input[type=checkbox] {
		@include ame-indeterminate-checkbox;
	}
}

.ame-tc-screen {
	@include ame-emulated-postbox($horizontalPadding: $boxHorizontalPadding);

	max-width: 960px;

	.ws-ame-postbox-content {
		font-size: $contentFontSize;

		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: $sectionHorizontalSeparation;
		row-gap: $sectionVerticalSeparation;
	}

	//Push the delete button and toggle button to the right of the header text. This isn't necessary
	//in the default postbox layout, but in this case the header is a flex container and the toggle
	//button is no longer absolutely positioned.
	.ws-ame-postbox-header h3 {
		margin-right: auto;
	}
}

.ws-ame-postbox-header {
	display: flex;
	flex-direction: row;

	.ame-tc-delete-item {
		padding: 0 $boxHorizontalPadding;
		align-self: stretch;

		.dashicons {
			vertical-align: middle;
		}

		//Hack to make the icon vertically centered in the delete button and header.
		&:before {
			display: inline-block;
			height: 100%;
			content: '';
			background: cornflowerblue;
			vertical-align: middle;
		}
	}

	//Fix the alignment of the toggle button. The default styles don't quite work because
	//the header isn't a flex container in the default postbox layout.
	.ws-ame-postbox-toggle {
		position: relative;
		align-self: stretch;
		height: unset;
	}
}

.ame-tc-screen-settings-section {
	display: flex;
	flex-direction: column;

	border-left: 1px solid wp-admin-colors.wpColor(gray-2);
	padding-left: $sectionHorizontalSeparation;

	&:first-of-type {
		border-left: none;
		border-top: none;
		padding-left: 0;
		padding-top: 0;
	}

	h4 {
		$unitlessHeadingFontSize: 12;

		font-size: $unitlessHeadingFontSize/$unitlessContentFontSize * 1em;
		margin: 0 0 ($elementListOuterSeparation / $unitlessHeadingFontSize * 1em);

		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-weight: 600;

		color: wp-admin-colors.wpColor(gray-60);
	}
}

.ame-tc-column-list {
	//Make the column items stretch the full width of the box. It looks better when dragging
	//and when an item is highlighted on hovering the delete button.
	margin-left: -$boxHorizontalPadding;
	margin-right: -$boxHorizontalPadding;

	//Minimum spacing between this and the "Enable custom order" setting. The actual spacing
	//can be larger if there's more room in the box.
	margin-bottom: ($elementListOuterSeparation / $unitlessContentFontSize * 1em);
}

.ame-tc-element {
	display: flex;
	flex-direction: row;

	margin-top: -1px;

	label {
		line-height: $elementLineHeight;
		min-width: 50%;
	}

	&.ui-sortable-helper {
		background: #fff;
		box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.30);
	}

	.ame-tc-delete-item {
		line-height: $columnLineHeight;
		padding-right: $boxHorizontalPadding;
		padding-left: $boxHorizontalPadding;

		.dashicons {
			vertical-align: text-bottom;
		}
	}

	//To help match up items with their delete buttons, give the item a red background
	//when the user hovers over the delete button.
	&:has(.ame-tc-delete-item:hover) {
		background: wp-admin-colors.wpColor(red-5);
	}
}

.ame-tc-column {
	label, .ame-tc-delete-item {
		line-height: $columnLineHeight;
	}
}

$dragHandleWidth: 30px;
.ame-tc-drag-handle {
	cursor: grab;
	min-width: $dragHandleWidth;
	display: flex;
	align-items: center;
	justify-content: center;

	//Empirically chosen offset to make the left edge of the drag handle icon line up with
	//the section heading. May need to be adjusted if the icon gets replaced.
	padding-left: 3px;

	.ui-sortable-helper > & {
		cursor: grabbing;
	}
}

.ame-tc-other-screen-options {
	//Push it to the bottom of the container.
	margin-top: auto;
	background: wp-admin-colors.wpColor(gray-0);

	border-radius: 6px;
	padding: 10px 0 10px $columnOptionsHorizontalPadding;

	label {
		vertical-align: baseline;
	}
}

.ame-tc-order-settings {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	line-height: $resetIconSize;

	a.ame-tc-disabled {
		color: wp-admin-colors.wpColor(gray-50);
		text-decoration: none;
		cursor: default;
	}
}

.ame-tc-delete-item {
	text-decoration: none;
	margin-left: auto;

	&:not(:hover) {
		color: wp-admin-colors.wpColor(gray-30);
	}

	&:hover, &:active {
		color: wp-admin-colors.wpColor(red-60);
	}
}

.ame-tc-reset-order {
	text-decoration: none;

	//Add visual separation from the "enable" setting and increase click target size.
	padding-left: 1em;
	padding-right: $columnOptionsHorizontalPadding;

	.dashicons {
		line-height: $resetIconSize;
		vertical-align: top;
	}

	&:not(:hover) {
		color: wp-admin-colors.wpColor(gray-30);
	}
}

#ame-tc-refresh-progress {
	width: 200px;
}

//No bottom margin on the navigation tab list. The sticky bar at the top provides the spacing.
.wrap, .ws-ame-too-many-tabs.ame-condensed-tabs-enabled {
	.nav-tab-wrapper.ws-ame-nav-tab-list {
		margin-bottom: 0;
	}
}

.ame-tc-top-bar-content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}