/* Widgets - List Item */
////
/// @group Widgets-List_Item
/// Widgets - List Item

///
.list-item {
	border-bottom: var(--border-size-s) solid get-border-color('neutral-4');
	overflow: hidden;
	padding: var(--space-m);
	position: relative;

	&:last-of-type {
		border-bottom: none;
	}

	&.list-item-no-click-effect {
		.scale-animation {
			// !important should be in use in order to grant the expected behaviour when this class is assigned!
			background: get-background-color('transparent') !important;
			opacity: 0 !important;
		}
	}

	.scale-animation {
		animation: list-item-scale-animation 1500ms;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 100px;
		display: block;
		height: 10px;
		left: 50%;
		pointer-events: none;
		position: absolute;
		top: 50%;
		width: 10px;
		will-change: transform;
		z-index: var(--layer-global-screen);
	}
}

///
.list {
	.list-item {
		background-color: get-background-color('neutral-0');
	}
}

///
.layout-native {
	.list-item {
		padding: var(--space-base);
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.list {
		.list-item:hover {
			&:not(.list-item-no-hover):not(.list-item-selected) {
				background-color: get-background-color('neutral-2');
			}
		}
	}
}

///
.desktop,
.tablet.landscape {
	.list {
		.list-item-selected {
			background: get-background-color('primary') get-background-color('primary-lightest');

			.list-item-content {
				&-title {
					color: get-text-color('neutral-10');
				}

				&-text {
					color: get-text-color('neutral-8');
				}

				&-right .icon {
					color: get-text-color('primary');
				}
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	&.desktop,
	&.tablet.landscape {
		.list {
			.list-item:hover,
			.list-item-selected {
				position: relative;

				&:before {
					@include a11y-high-contrast-outline(true, var(--border-size-s));
					border-right-width: 0;
					border-left-width: var(--border-size-l);
					bottom: 0;
					content: '';
					display: block;
					left: 0;
					pointer-events: none;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
	}
}