@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-lister {
	--lister: var(--background-color-gray);
	--lister-first-detail-bg: var(--background-color-negative);
	--lister-second-detail-bg: var(--background-color-darker);
	--lister-third-detail-bg: var(--background-color);

	max-height: 90vh;
	margin-top: $padding-base;
	overflow-y: auto;
	background-color: var(--lister);

	details {
		all: unset;
		position: relative;
		display: flex;
		flex-direction: column;
		color: var(--body-color-inverse);
		
		.c-lister__content {
			display: flex;
			flex-direction: row;
			gap: $base;
			overflow-x: auto;
			padding: $base $padding-xlarge;
			
			span {
				display: flex;
				gap: calc($base / 2);
				align-items: center;
				padding: $padding-base;
				background-color: var(--background-color);
				color: var(--body-color);
				width: max-content;
				min-width: 130px;
				border: 1px solid var(--divider-color);
				@include type(label-07);
				&.u-none {
					display: none;
				}
			}
		}


		summary {
			all: unset;
			position: sticky;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $padding-base;
			background-color: var(--lister-first-detail-bg);
			color: var(--body-color-inverse);
			@include type(label-03);
			&{
				cursor: pointer;	
				font-weight: bold;
			}	
			&::before {
				all: unset;
			}
			@include z(cover);

			small {
				@include type(label-07);
			}
		}

		&[open]>summary{
			border-bottom: 2px solid var(--divider-color);
			.o-icon {
				transform: rotate(180deg);
				
			}
		}

		details {
			color: var(--body-color);
			&:not(:last-child){
				border-bottom: 1px solid var(--divider-color);
			}
			summary {
				top: 3rem;
				background-color: var(--lister-second-detail-bg);
				color: var(--body-color);
				padding-left: $padding-large;
				@include type(label-08);
				@include z(undercover);
			}
			&[open] summary {
				// --lister-second-detail-bg: var(--theme-color);
				color: var(--body-color);
			}
			
			details {
				color: var(--body-color);
				// &[open] summary {
				// 	color: var(--body-color);
				// }
				&:not(:last-child){
					border-bottom: 1px solid var(--divider-color);
				}
				border-bottom: 1px solid var(--divider-color);
				summary {
					top: 6rem;
					background-color: var(--lister-third-detail-bg);
					padding-left: $padding-xlarge;
					color: var(--body-color);
					@include z(base);
					span {
						@include type(label-08);
					}
				}

				
			}
		}
	}
	@include type(label-03);
}