@import '../../../../styles/variables';

.APMPanel {
	background-color: @white;
	height: 100%;
	width: 100%;

	&-draggable {
		.APMPanel-header:hover {
			cursor: move;
		}
	}

	&-list {
		padding: 0;
		width: 100%;
		list-style: none;
		margin-top: 8px;
		margin-bottom: 0;

		&-item {
			width: 100%;
			height: 48px;
			border-bottom: 1px solid @blue-gray-light;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	&-header {
		color: @white;
		background-color: @blue-primary;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 60px;
		height: 65px;
		padding: 0 30px;

		.btn {
			background: none;
			font-size: 1.6rem;
			box-shadow: none;
			color: #fff;
			border: 1px solid @blue-gray-dark;
			border-radius: 4px;
			margin-left: 6px;
			margin-top: -4px;
			transition: all .1s ease;

			&:hover {
				background: @blue-secondary;
				color: @soft-white;
				border-color: @soft-white;
			}

			&:active {
				transition: none;
				background: @blue-primary-dark;
				border-color: @blue-secondary;
				color: #FFF;
			}
		}

		&-title {
			margin: 0;
			font-weight: 600;
			font-size: 24px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 90%;

			.btn {
				margin-left: 0;
				margin-right: 18px;
				margin-top: -5px;
			}
		}

	}

	&-buttons {
		display: inline-block;

		.btn {
			background: none;
			border: none;
			box-shadow: none;
			padding: 0;
			margin-left: 30px;
			color: #fff;
			opacity: 0.8;
			font-size: 1.75rem;
		}

		&-active {
			background-color: @blue-secondary !important;
			color: @soft-white !important;
			border-color: @soft-white !important;
		}
	}

	&-main {
		padding: 30px;
		float: left;
		width: 75%;
		height: ~"calc(100% - 65px)";
		overflow-y: auto;

		hr {
			margin: 20px -30px;
			border: 0;
			border-top: 1px solid #b0bac5;
		}
	}
}