@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/typography' as font;
@use '../../base/links' as *;
@use '../../base/functions' as *;

.list-item {
	padding: var(--padding-extra-small);
	display: flex;
	align-items: center;
	gap: var(--padding-extra-small);
	border-radius: var(--radius-small);
	position: relative;
	transition: var(--transition-fast);

	& > * {
		transition: var(--transition-fast);
	}

	&-label {
		@include font.get-typography(body-bold);

		color: var(--ui-headline);
	}

	&:has(a):not(.slim) {
		&::after {
			content: '\e905'; // icon-arrow-forward
			font-family: brandui-icons;
			font-style: normal;
			font-size: 1.5rem;
			margin-left: auto;
			transform: translateX(-0.5rem);
			color: var(--action);
		}

		&:hover {
			background-color: with-opacity(var(--action), 10);

			&::after {
				transform: translateX(0);
				transition: var(--transition-fast);
			}

			a.list-item-label {
				color: var(--action);
			}
		}
	}

	&.slim:has(a) {
		&:hover {
			color: var(--action);

			.general-icon {
				transition: var(--transition-fast);
				color: var(--action-tertiary);
			}

			a.list-item-label {
				color: var(--action-tertiary);
			}
		}
	}

	a.list-item-label {
		text-decoration: none;

		@extend .link-stretched;

		color: var(--ui-headline);
	}
}