//   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 'typography';

.key-value-container.single {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.key-value-container.two-per-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.key-value-container.three-per-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.key-value-container.flexible {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.key-value-container.dense {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.key-value-pair {
		flex-basis: calc(50% - 6px);
		margin-bottom: 12px;
	}
}

@media (max-width: 768px) {
	.key-value-container.dense .key-value-pair {
		flex-basis: 100%;
	}
}

.key-value-pair {
	display: flex;
	align-items: center;
	padding: 6px 0;
}

.key-value-pair.space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.key-value-key {
	@include typography.paragraph-semibold-p3-default-emphasis;
}

.key-value-value {
	@include typography.paragraph-regular-p3-default;
	margin-left: 5px;
}
