/*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/


.mat-mdc-card {
	// border: 2px solid gray;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
	transition: all 0.2s ease-in;

	// :last-child and :first-child won't work, since it's wrapped in an
	// ng-template implicitly, so it's always both :first-child and :last-child
	// regardless of the actual position in the list.
	&.last {
		border-bottom-right-radius: 12px;
		border-bottom-left-radius: 12px;
	}
	&.first {
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}

	& > mat-card-title-group {
		padding: 16px;
		cursor: pointer;

		svg {
			height: 1.5em;
			fill: white;
			color: white;
		}
	}

	&.inactive > mat-card-title-group {
		background-color: gray;
		color: #d3d3d3;
	}

	&.open {
		border-radius: 12px;
		margin: 24px auto;
		& > mat-card-title-group {
			border-radius: 10px 10px 0 0;
		}
		.mat-mdc-card-actions {
			padding-bottom: 16px;
		}
	}
}

a.info {
	text-decoration: none;
	margin-left: 8px;
}

.mat-mdc-card-content {
	margin: 16px;
	transition: all 0.2s ease-in;

	div.canvas-container {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
		min-height: 100%;
		max-height: 100%;
		z-index: 0;
	}

	div.loading {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
	}

	canvas {
		max-width: 100%;
		min-width: 100%;
		min-height: 100%;
		max-height: 100%;
		height: auto;
	}

	fieldset > div.capacity {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-column-gap: 15px;
		label {
			text-align: right;
		}
	}

	meter {
		width: 100%;
	}

}

.mat-mdc-card-actions {
	margin: 0;
	padding: 16px;
}
