:host {
	display: block;

	#deja-grid-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: visible;
		position: relative; // For scroll offset

		>div {
			padding: 0 !important;
			margin: 0 !important;
			flex-grow: 0;
			flex-shrink: 0;
			height: 100%;

			&.column-header-wrapper {
				display: flex;
				align-items: center;
				overflow: hidden;

				.sort-waiter {
					position: absolute;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;

					[fontIcon] {
						animation: spin 1s infinite .5s linear;
					}
				}

				[separator] {
					flex: 0 0 4px;
					padding: 0.5rem 0;
					margin-right: 0.3rem;
					cursor: ew-resize;
				}

				.column-header {
					flex: 1 1 auto;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					padding: 0.5rem 0.1rem;
                    display: block;
                    &[sorting]{
                        opacity: 0.2;
                    }
				}

				deja-sort-indicator {
					opacity: 0.6;
					flex: 0 0 auto;
				}
			}

			&[sizable] {
				.column-header-wrapper:not([sizeable="false"]) {
					[separator] {
						cursor: ew-resize;
					}
				}
			}
		}
	}
}