@import "@wordpress/base-styles/variables";

.dashboard-summary-button-list {
	.dashboard-summary-button-list__children-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.dashboard-summary-button-list__children-list-item {
		&:empty {
			display: none;
		}
	}

	&.has-density-low {
		// Do not add a bottom margin to the last (non-empty) child.
		.dashboard-summary-button-list__children-list-item:not(:nth-last-child(1 of :not(:empty))) {
			margin-bottom: $grid-unit-30;
		}
	}

	&.has-density-medium {
		.dashboard-summary-button-list__children-list-wrapper {
			// TODO: remove once the `CardBody` natively supports having no padding.
			padding: 0;
		}

		// Inherit the card border radius all the way to the each child button.
		// TODO: once the component uses React context, we should use that
		// to let the summary button component know the appropriate border
		// radius inheritance behavior.
		.dashboard-summary-button-list__children-list {
			border-radius: inherit;
		}

		// First (non-empty) <li> and its direct children.
		.dashboard-summary-button-list__children-list-item:nth-child(1 of :not(:empty)),
		.dashboard-summary-button-list__children-list-item:nth-child(1 of :not(:empty)) > * {
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
		}

		// Last (non-empty) <li> and its direct children.
		.dashboard-summary-button-list__children-list-item:nth-last-child(1 of :not(:empty)),
		.dashboard-summary-button-list__children-list-item:nth-last-child(1 of :not(:empty)) > * {
			// TODO: once the component uses React context, we should use that
			// to let the correct summary button component know that it's
			// the last child, and should not have a bottom border.
			border-bottom: none;
			border-bottom-left-radius: inherit;
			border-bottom-right-radius: inherit;
		}

		// Ensure focused elements appear above adjacent hovered elements.
		.dashboard-summary-button-list__children-list-item:has( *:focus, *:focus-visible ) {
			position: relative;
			z-index: 1;
		}
	}
}
