.gs-analysis-pie-details {
	overflow: auto;
	max-height: 300px;

	.gs-analysis-pie + & {
		margin-top: 24px;
	}
	// & > .gs-analysis-pie-detail {
	// 	&:first-child {
	// 		border-top: none;
	// 	}
	// }
}

.gs-analysis-pie-detail {
	&__header {
		background: transparent;
		border: none;
		margin: 0;
		text-align: left;


		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: center;
		border-top: 1px solid #dfe3e7;
		padding: 8px 8px;
		word-break: break-word;
		transition: 0.1s ease-in-out;
		outline: 1px solid transparent;

		&:hover {
			background: rgba(0, 0, 0, 0.025);

			.gs-analysis-pie-detail__color {
				outline: 1px solid #888;
			}
		}
	}

	button.gs-analysis-pie-detail__header {
		cursor: pointer;
		grid-template-columns: 14px minmax(0, 2fr) minmax(0, 1fr);

		svg {
			width: 11px;
			height: 11px;
			margin-left: -4px;
			transition: 0.2s ease-in-out;
		}

		&.is-open {
			svg {
				transform: rotate(90deg);
			}
		}
	}

	&__labels {
		display: grid;
		grid-template-columns: 12px minmax(0, 1fr);
		align-items: center;
		gap: 8px;
	}

	&__color {
		flex-shrink: 0;
		width: 12px;
		height: 12px;
		border-radius: 2px;
		background: #888;
	}

	&__label {

	}

	&__values {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
	}

	&__number {

	}

	&__percentage {
		color: #696f77;
		font-size: 0.9em;

		&::before {
			content: "(";
		}

		&::after {
			content: ")";
		}
	}

	&__trend {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	&__subpoints {
		display: none;
		width: 100%;

		&.is-open {
			display: block;
		}
	}

	&__subpoint {
		appearance: none;
		width: 100%;
		border: 0;
		background: transparent;
		text-align: left;

		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: center;
		border-top: 1px solid #edf0f2;
		padding: 5px 8px 5px 42px;
		word-break: break-word;

		&__values {
			text-align: right;
		}

		&__percentage {
			color: #696f77;
			font-size: 0.9em;
			padding-left: 4px;

			&::before {
				content: "(";
			}

			&::after {
				content: ")";
			}
		}
	}

	button.gs-analysis-pie-detail__subpoint {
		cursor: pointer;

		&:hover,
		&:focus,
		&:active {
			background: rgba(0, 0, 0, 0.025);
		}
	}
}