@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--pr-t-elevation-surface-raised);
	box-shadow: var(--pr-t-elevation-shadow-raised);
	margin-block-end: var(--components-list-margin-bottom);
	list-style: none;
	padding: 0;

	@at-root ($atRoot) {
		.list-item {
			border-block-end-width: var(--commons-divider-width);
			border-block-end-color: var(--commons-divider-color);
			border-block-end-style: solid;
			color: var(--pr-t-color-text);
			align-items: center;
			display: flex;
			position: relative;
			text-decoration: none;

			&:last-child {
				border: 0;
			}
		}

		.list-item-content {
			padding: var(--components-list-padding);
			color: var(--pr-t-color-text);
			text-decoration: none;
			inline-size: 100%;
		}

		.list-item-content-title {
			margin: 0;
		}

		.list-item-content-description {
			margin: 0;
		}

		.list-item-actions {
			padding: var(--components-list-padding);
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: all;
			margin-inline-start: auto;
			white-space: nowrap;
			padding-inline-start: 0;
		}
	}
}