/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Imports
# Update All Trail Status Buttons
# Form Styling

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/

$color-closed: #d9534f;
$color-closed-border: #d43f3a;
$color-caution: #faff8c;
$color-caution-border: darken($color-caution, 5%);
$color-open: #5cb85c;
$color-open-border: #4cae4c;

$color-white: #fff;
$color-blue: #0085ba;

/*--------------------------------------------------------------
# Imports
--------------------------------------------------------------*/

//Bootstrap 4 Grid
@import "../../node_modules/bootstrap/scss/bootstrap-grid";
@import "../../node_modules/bootstrap/scss/utilities/flex";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/forms";

/*--------------------------------------------------------------
# Update All Trail Status Buttons
--------------------------------------------------------------*/
.status-btns {
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;

	.button {
		color: $color-white;

		&:hover,
		&:focus {
			color: $color-white;
		}
	}
	.close-all {
		background-color: $color-closed;
		border: $color-closed-border;

		&:hover,
		&:focus {
			background-color: lighten($color-closed, 3%);
		}
	}

	.caution-all {
		background-color: $color-caution;
		border: $color-caution-border;
		color: #574500;

		&:hover,
		&:focus {
			background-color: lighten($color-caution, 3%);
			color: #574500;
		}
	}

	.open-all {
		background-color: $color-open;
		border: $color-open-border;

		&:hover,
		&:focus {
			background-color: lighten($color-open, 3%);
		}
	}
}

/*--------------------------------------------------------------
# Form Styling
--------------------------------------------------------------*/

// .sortable-chosen:not(.sortable-ghost) {
// 	cursor: grabbing;
// }

.trail {
	padding-top: 30px;
	position: relative;
	padding-left: 30px;
	transition: 0.3s;
	
	&:not(:last-of-type) {
		border-bottom: 2px solid #ddd;
	}

	&.drag-collapse {
		height: 50px;
		overflow: hidden;
		padding-top: 15px;
	}
	
	.remove-trail {
		background-color: transparent;
		border: 0;
		cursor: pointer;
		height: 22px;
		opacity: 0.5;
		position: absolute;
		right: 15px;
		top: 15px;
		width: 22px;
	}

	.remove-trail:hover {
		opacity: 1;
	}

	.remove-trail:before, .remove-trail:after {
		position: absolute;
		top: 0;
		content: ' ';
		height: 22px;
		width: 2px;
		background-color: #333;
		cursor: pointer;
	}

	.remove-trail:before {
		transform: rotate(45deg);
	}

	.remove-trail:after {
		transform: rotate(-45deg);
	}

	.trail-title {
		margin-top: 0;
	}

	.trail-status-bar {
		position: absolute;
		left: 0;
		top: 15px;
		bottom: 15px;
		width: 10px;
		cursor: move;
	    cursor: grab;

		&.status-open {
			background-color: $color-open;
		}

		&.status-caution {
			background-color: $color-caution;
		}

		&.status-closed {
			background-color: $color-closed;
		}
	}

	input[type=number] {
		height: 38px;
	}
}

.trails {
	.add-trail {
		margin-top: 30px;
	}
}