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

.sidenav-item {
	display: block;
	cursor: pointer;

	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left-side {
		display: flex;
		align-items: center;
	}

	.item-icon {
		display: flex;
		align-items: center;
	}

	.item-label {
		margin-left: 10px;
		white-space: nowrap;
	}

	&.active-route .item-label {
		@include typography.paragraph-bold-p3-small-bold;
	}
}

:host[itemStyle='grey'] .sidenav-item {
	color: var(--sidenav-text-color);

	&.active-route {
		.item-label {
			color: var(--sidenav-active-text-color);
		}
		background-color: var(--sidenav-background-color);
		border-radius: 8px;
	}
}

:host[itemStyle='accent'] .sidenav-item {
	color: var(--links-text-color);
}
