@import 'atlas-variables';

.miller-columns-row {
	box-shadow: 0 0 0 1px $gray-400;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
}

.miller-columns-col {
	margin: 0;
	padding: 0;

	&:nth-child(-n + 2),
	&:not(:last-child) {
		border-right: 1px solid $gray-400;
	}

	&.drop-target .miller-columns-item:last-child {
		box-shadow: inset 0 -2px 0 0 #0b5fff;
	}

	@include media-breakpoint-up(md) {
		height: calc(100vh - 284px);
		min-height: 10rem;
		overflow-y: scroll;
	}
}

.miller-columns-item {
	border-bottom: 1px solid $gray-300;
	cursor: pointer;
	min-height: 4.25rem;
	padding: 1rem;
	position: relative;

	&--active {
		background-color: $light-l1;

		&.miller-columns-item.autofit-row {
			margin-top: 1px;
		}
	}

	&.dragging {
		opacity: 0.4;
	}

	&.drop-bottom {
		box-shadow: inset 0 -2px 0 0 $primary;
	}

	&.drop-top {
		box-shadow: 0 -2px 0 0 $primary;

		&:first-child {
			box-shadow: inset 0 2px 0 0 $primary;
		}
	}

	&.drop-element {
		box-shadow: inset 0 0 0 0.125rem $primary;
	}

	.custom-checkbox .custom-control-label {
		z-index: 2;

		&:after,
		&:before {
			top: -1px;
		}
	}

	.miller-columns-item-actions,
	.miller-columns-item-quick-action {
		padding: 0 0.25rem;
		z-index: 2;
	}

	.miller-columns-item-drag-handler {
		color: $gray-500;
		cursor: move;
		font-size: 1.375rem;
		top: 2px;
		z-index: 2;

		+ .autofit-col {
			padding-bottom: 6px;
		}
	}

	&:not(.dragging) .miller-columns-item-mask {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transition: box-shadow 150ms ease-in-out;
		width: 100%;
		will-change: box-shadow;
		z-index: 1;

		&:focus {
			box-shadow: inset 0 0 0 0.125rem $primary-l1;
			outline: 0;
		}
	}

	.miller-columns-item-child-indicator {
		color: $gray-500;
		padding: 0 0 0 0.5rem;
		top: 2px;
	}

	.icon-warning {
		margin-top: 1px;
		z-index: 2;
	}

	.list-group-title .text-truncate {
		z-index: 2;
	}

	.list-group-subtitle .label {
		flex-shrink: 2;

		.label-item {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.show-quick-actions-on-hover
	.miller-columns-item:not(.miller-columns-item--active) {
	&:hover {
		.miller-columns-item-quick-action {
			display: flex;
		}
	}

	.miller-columns-item-quick-action {
		display: none;
	}
}
