@import '../../../scss/index.scss';

// Шапка таблицы
@mixin header () {
	&,
	& * {
		@include fix();
	}

	$header-size: 48px;
	$resizer-width: 12px;

	.header {
		@include flex-row-auto();
		height: $header-size;
		overflow: hidden;
		background: $header-bg;
		border-bottom: solid 1px $header-border;
	}

	.view {
		@include flex-col-max();
		overflow: hidden;
	}
	.view--pinned {
		@include flex-col-auto();
		overflow: unset;
	}

	.separator {
		@include flex-col-auto();
		@include hidden();
		position: relative;
		width: 0;
		&:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			pointer-events: none;
			border-right: 1px solid $cell-border;
		}
	}

	.canvas {
		@include flex-row-auto();
		position: relative;
		height: $header-size;
	}

	.cell {
		@include flex-row-auto();
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		background: $cell-bg;
	}
	.cell--swap {
		z-index: 1;
		.cell__border {
			left: 0;
			border-left: 1px solid $cell-border;
		}
	}
	.cell--placeholder {
		background: $cell-placeholder-bg;
		*:not(.cell__border) {
			opacity: 0;
			visibility: hidden;
		}
	}
	.cell__wrapper {
		@include flex-row-max();
		overflow: hidden;
	}
	.cell__handle {
		@include flex-col-auto();
		width: 24px;
		cursor: grab;
	}
	.cell__handle-icon {
		@include flex-col-auto();
		width: 5px;
		height: 14px;
		margin: auto;
		fill: $cell-handle-fill;
	}
	.cell__content {
		@include flex-row-max();
		cursor: pointer;
		&:hover {
			.cell-button-sort.cell-button-sort--none {
				fill: rgba($cell-button-fill, 0.9);
			}
		}
	}
	.cell__border {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: -1px;
		pointer-events: none;
		border-left: 1px solid $cell-border;
		border-right: 1px solid $cell-border;
	}
	.cell__resizer {
		position: absolute;
		top: 0;
		bottom: 0;
		right: -$resizer-width/2;
		width: $resizer-width;
		cursor: col-resize;
		z-index: 1;
	}

	.cell-header-name {
		@include flex-col-max();
		justify-content: center;
	}
	.cell-header-name__text {
		@include font-family();
		@include text-single-line();
		padding-right: 12px;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		user-select: none;
		color: $cell-color;
	}

	.cell-button-pin {
		@include flex-col-auto();
		width: 16px;
		height: 16px;
		margin: auto 0;
		margin-right: 8px;
		background: $header-bg;
		fill: $cell-button-fill;
		transition: fill 0.1s ease;
		&:hover {
			fill: $cell-button-fill-active;
		}
	}
	.cell-button-pin--active {
		fill: $cell-button-fill-active;
	}

	.cell-button-sort {
		@include flex-col-auto();
		width: 16px;
		height: 16px;
		margin: auto 0;
		margin-right: 8px;
		background: $header-bg;
		transition: fill 0.1s ease;
	}
	.cell-button-sort--none {
		fill: rgba($cell-button-fill, 0.2);
	}
	.cell-button-sort--ascending {
		fill: $cell-button-fill-active;
	}
	.cell-button-sort--descending {
		transform: scaleY(-1);
		fill: $cell-button-fill-active;
	}
}