//   Copyright 2024 Cisco Systems, Inc.
//
//   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.
//
//   SPDX-License-Identifier: Apache-2.0

@use '@angular/material' as mat;

.parent-container {
	overflow: hidden;
	height: 300px;
	border-radius: 10px;
	margin-bottom: 10px;
	position: relative;

	@include mat.elevation(2, rgba(0, 0, 0, 0.2));
}

canvas {
	width: 100%;
	height: auto;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

:host(.pruning) {
	.parent-container {
		background-color: #b2ddff;
	}

	@media (max-width: 1000px) {
		.parent-container {
			height: 180px;
		}
	}

	@media (min-width: 1200px) {
		canvas {
			width: 900px;
			left: calc((100% - 900px) / 2);
		}
	}
}

:host(.quant) {
	.parent-container {
		background-color: #1649a8;
	}

	@media (max-width: 1000px) {
		.parent-container {
			height: 180px;
		}
	}

	@media (min-width: 1100px) {
		canvas {
			width: 900px;
			left: calc((100% - 900px) / 2);
		}
	}
}
