@use "../../../010-settings/" as *;
@use "../../../050-layout/basics" as *;
@use "../../../070-components/UI-framework/Button/ui-component_button" as *;
@use "../../../050-layout/layout_container-query" as container-query;


//== View Control
//
//##
$il-vc-glyph-padding-horizontal: $il-padding-base-horizontal;
$il-vc-glyph-hover-bg: lighten($il-main-color, 5%);
$il-vc-mode-btn-active: $il-vc-glyph-hover-bg;
$il-vc-pagination-btn-active-bg: $il-main-bg;

// basic layout for all viewcontrol flex constructs
.il-viewcontrol-sortation,
.il-viewcontrol-section,
.il-viewcontrol-pagination,
.il-viewcontrol-mode,
.il-viewcontrol-pagination__sectioncontrol {
	display: flex;
	align-items: center;
	gap: $il-margin-xs-horizontal;
}

// viewcontrols container bar to include set of inner buttons
.il-viewcontrol-sortation,
.il-viewcontrol-section,
.il-viewcontrol-pagination,
.il-viewcontrol-mode {
	width: fit-content;
	min-height: $il-btn-ctrl-outer-height;
	min-width: $il-btn-ctrl-outer-height;
	border: 1px solid $il-btn-ctrl-border;
	padding: $il-padding-xs-horizontal;
	background-color: $il-btn-ctrl-bg;
	border-radius: $il-border-radius-secondary-large;
}

// buttons inside the container
.il-viewcontrol-sortation,
.il-viewcontrol-section,
.il-viewcontrol-section .btn-group,
.il-viewcontrol-pagination__sectioncontrol,
.il-viewcontrol-pagination__num-of-items,
.il-viewcontrol-pagination,
.il-viewcontrol-pagination .dropdown,
.il-viewcontrol-pagination .last,
.il-viewcontrol-mode {
	// turn any buttons in bar into viewcontrol buttons
	> .btn-default, > .btn-link  {
		@extend .btn-ctrl;
	}
	> .btn-default, > .btn-link, > .btn-ctrl  {
		min-height: $il-btn-ctrl-inner-btn-height;
		min-width: $il-btn-ctrl-inner-btn-height;
		border-radius: $il-border-radius-secondary-large;
	}

	> .btn-ctrl:has(> .glyph.disabled) {
		border:none;
		cursor: default;
		pointer-events: none;
		background-color: $il-btn-ctrl-bg;
	}
}

// viewcontrols as single buttons
// should in the future be done by using btn-ctrl class on these buttons
.il-viewcontrol-sortation,
.il-viewcontrol-sortation .dropdown,
.il-table-presentation-viewcontrols .l-bar__space-keeper .l-bar__group .l-bar__element {
	> .btn-default.btn {
		@extend .btn-ctrl;
		border-radius: $il-border-radius-secondary-large;
	}
	li .btn.btn-link {
		padding-left: $il-padding-large-horizontal * 3;
	}

	li.selected .btn::before {
		position: absolute;
		left: $il-margin-large-horizontal;
		font-family: "Glyphicons Halflings";
		color: $il-btn-ctrl-color;
		content: "\e013";
	}
}

.il-viewcontrol-fieldselection .dropdown-menu {
	padding: $il-padding-xlarge-horizontal $il-padding-xlarge-vertical;
}

// View control buttons with glyphs
.il-viewcontrol-sortation .dropdown-toggle .caret,
.il-viewcontrol-pagination__num-of-items .dropdown-toggle .caret,
.il-viewcontrol-fieldselection .dropdown-toggle .caret {
	display: inline;
	border: none; // removes dropdown arrow
	vertical-align: initial;
}

// specify glyps for specific types
.il-viewcontrol-sortation .dropdown-toggle .caret {
	&:before {
		content: "\21f5";
	}
}
.il-viewcontrol-pagination__num-of-items .dropdown-toggle .caret {
	&:before {
		font-family: il-icons;
		font-size: .8rem;
		content: "\e900";
	}
}
.il-viewcontrol-fieldselection .dropdown-toggle .caret {
	&:before {
		font-family: "Glyphicons Halflings";
		font-size: .8rem;
		content: "\e105";
	}
}

// make engaged buttons not clickable
.il-viewcontrol-pagination, .il-viewcontrol-mode {
	.engaged{
		pointer-events: none;
		cursor: default;
	}
}

// strip normal form column layout from apply offest viewcontrol
.il-viewcontrol-pagination__sectioncontrol .c-input[data-il-ui-component="numeric-field-input"] {
	border-radius: $il-border-radius-secondary-large;
	label {
		text-align: right;
	}
	.c-field-number {
		width: 100%;
	}

	input[type="number"] {
		width: 5rem;
	}
}

// container queries - change design when viewcontrol is in a narrow toolbar
.panel-viewcontrols {
	z-index: $il-z-index-content;
}