list-item.scss

@import "../style/base";
@import "list-item-vars";

:host {
	--_list-item-color: #{$list-item-color};
	--_list-item-bg: #{$list-item-bg};

	color: var(--_list-item-color);
	background: var(--_list-item-bg);

	border-radius: $list-item-border-radius;
	transition: $list-item-transition;
	padding: $list-item-padding;

	display: flex;
	align-items: center;
	outline: none;
	overflow: hidden;
	position: relative;
	text-align: left;
}

:host([clickable]) {
	user-select: none;
}

:host([clickable]:not([active]):not([disabled])) {
	cursor: pointer;
}

:host(:hover), :host(:focus) {
	--_list-item-color: #{$list-item-color-hover};
	--_list-item-bg: #{$list-item-bg-hover};
	will-change: background, color;
}

:host([active]:focus), :host([active]:hover) {
	--_list-item-color: #{$list-item-color-active-hover};
	--_list-item-bg: #{$list-item-bg-active-hover};
}

:host([disabled]) {
	--_list-item-color: #{$list-item-color-disabled};
	--_list-item-bg: #{$list-item-bg-disabled};
	opacity: $list-item-opacity-disabled;
	pointer-events: none;
}

:host([active]) {
	--_list-item-color: #{$list-item-color-active};
	--_list-item-bg: #{$list-item-bg-active};
}

::slotted([slot="before"]), ::slotted([slot="after"]) {
	flex-shrink: 0;
}

::slotted([slot="before"]) {
	align-self: $list-item-before-align-self;
	margin: $list-item-before-margin;
}

::slotted([slot="after"]) {
	align-self: $list-item-after-align-self;
	margin: $list-item-after-margin;
}

#content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

#ripple {
	pointer-events: none;
}