@import '../../variables.scss';

.channel {
	position: relative;
	background: $lightgrey;
	margin: 5px 0;
	padding: 10px;
	border-top: 1px solid $white;
	cursor: pointer;
	transition: all 0.25s;

	&:hover {
		opacity: 0.75;
	}

	&:first-child {
		border: none;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.status, .active, .notactive {
			padding: 10px;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 10px;
		}

		.status {
			color: $main;
		}

		.active i, .notactive i {
			margin-left: 5px;
		}

		.active {
			color: $green;
		}

		.notactive {
			color: $red;
		}

		.close {
			padding: 10px;
			font-size: 10px;
			text-transform: uppercase;
			color: $red;
			cursor: pointer;

			&:hover {
				color: lighten($red, 10%);
				text-decoration: underline;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}


	.left, .right {
		padding: 0 10px;
		margin-bottom: 5;

		section {
			margin-bottom: 20px;

			span {
				text-transform: uppercase;
				letter-spacing: 1.6px;
				color: $black;
				font-size: 10px;
				font-weight: bold;
			}

			h2 {
				font-size: 30px;
				padding: 5px 0;
				color: $main;
			}

			h4 {
				margin-top: 5px;
			}
		}
	}

	.left {
		flex: 7;
	}

	.right {
		flex: 3;

		.capacity {
			text-align: center;
			margin-bottom: 10px;
		}

		.balances {
			display: flex;
			justify-content: space-between;

			section {
				flex: 5;
				text-align: center;

				h4 {
					color: $main;
					font-size: 16px;
				}
			}
		}
	}
}