/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Visual styling for summary and details in the off-canvas dialog.
 *
 * @internal
 */

#drupal-off-canvas-wrapper {
  --off-canvas-details-border-width: 0;
  --off-canvas-details-border-color: none;
  --off-canvas-details-background-color: #474747;
  --off-canvas-details-text-color: #ddd;
  --off-canvas-details-summary-border: none;
  --off-canvas-details-summary-padding: 0.625rem 1.25rem;
  --off-canvas-details-summary-font-size: 0.875rem;
  --off-canvas-details-summary-background-color: #333;
  --off-canvas-details-summary-background-color-hover: #222;
  --off-canvas-details-summary-text-color: #eee;
  --off-canvas-details-summary-text-color-hover: #fff;
}

#drupal-off-canvas-wrapper details {
  margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
  padding: 0 var(--off-canvas-padding);
  color: var(--off-canvas-details-text-color);
  border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
  background: var(--off-canvas-details-background-color);
}

:is(#drupal-off-canvas-wrapper details) + details {
  margin-top: calc(-1 * var(--off-canvas-details-border-width));
}

#drupal-off-canvas-wrapper summary {
  margin: 0 calc(-1 * var(--off-canvas-padding));
  padding: var(--off-canvas-details-summary-padding);
  color: var(--off-canvas-details-summary-text-color);
  border: var(--off-canvas-details-summary-border);
  background-color: var(--off-canvas-details-summary-background-color);
  font-size: var(--off-canvas-details-summary-font-size);
}

#drupal-off-canvas-wrapper summary:hover {
  color: var(--off-canvas-details-summary-text-color-hover);
  background-color: var(--off-canvas-details-summary-background-color-hover);
}

#drupal-off-canvas-wrapper summary:focus {
  outline-offset: -4px; /* Ensure focus doesn't get cut off. */
}

#drupal-off-canvas-wrapper summary a {
  color: var(--off-canvas-details-text-color);
}

#drupal-off-canvas-wrapper summary a:hover {
  color: var(--off-canvas-details-summary-text-color-hover);
}

#drupal-off-canvas-wrapper .details-wrapper {
  padding: var(--off-canvas-vertical-spacing-unit) 0;
}