/*
 * @file
 * Styles for the Basic Section component.
 */

.dy-section {
  --dy-section-padding-block: var(--spacing-component);
  --dy-section-padding-inline: 0px;
  --dy-section-border-radius: 0;

  container-type: inline-size;
  border-radius: var(--dy-section-border-radius);
  color: var(--theme-text-color-medium);

  &:where(:has(.background-image)) {
    position: relative;
    overflow: clip;

    .dy-section__header,
    .dy-section__content {
      > *:not(.background-image) {
        position: relative;
        z-index: 1;
      }
    }
  }

  /*
   * If border radius is present, it should be removed if two
   * sections are stacked in a row.
   */
  &:where(.theme--white.margin-bottom--0 + .theme--white.margin-top--0),
  &:where(.theme--light.margin-bottom--0 + .theme--light.margin-top--0),
  &:where(.theme--black.margin-bottom--0 + .theme--black.margin-top--0),
  &:where(.theme--dark.margin-bottom--0 + .theme--dark.margin-top--0),
  &:where(.theme--primary + .theme--primary),
  &:where(.theme--secondary + .theme--secondary) {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  &:where(.theme--white.margin-bottom--0:has(+ .theme--white.margin-top--0)),
  &:where(.theme--light.margin-bottom--0:has(+ .theme--light.margin-top--0)),
  &:where(.theme--black.margin-bottom--0:has(+ .theme--black.margin-top--0)),
  &:where(.theme--dark.margin-bottom--0:has(+ .theme--dark.margin-top--0)),
  &:where(.theme--primary.margin-bottom--0:has(+ .theme--primary.margin-top--0)),
  &:where(.theme--secondary.margin-bottom--0:has(+ .theme--secondary.margin-top--0)) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  /**
   * .block-system-main-block has a default margin bottom which is necessary for
   * nodes and random pages like user/login. But we don't want a strip of white
   * empty space to appear (which is very apparent if the dy-section has a
   * theme). So we negate it with a negative bottom margin.
   *
   * Wrap in :where() to remove specificity, so utility classes can override.
   */
  :where(.block-system-main-block > &:last-child) {
    margin-bottom: calc(-1 * var(--spacing-component));
  }

  &[class*="theme"] {
    background: var(--theme-surface);

    &.container {
      --dy-section-padding-inline: var(--spacing-xs);

      @container (width > 600px) {
        --dy-section-padding-inline: var(--spacing-m);
      }
    }
  }
}

.dy-section__container {
  .dy-section--section-edge-to-edge.dy-section--content-edge-to-edge & {
    padding-inline: var(--sp2);

    @container (width > 700px) {
      padding-inline: var(--sp4);
    }
  }
}

.dy-section__header {
  margin-bottom: var(--spacing-component-internal);

  /* If within the Canvas editor preview (but NOT in edit mode), hide.
  @todo - do the proper way once https: //www.drupal.org/i/3492358 is resolved. */
  &:not([data-canvas-slot-id]):has(.canvas--slot-empty-placeholder:only-child) {
    display: none;
  }

  /* If it doesn't have any elements underneath, hide it. */
  &:not(:has(*)) {
    display: none;
  }
}

.dy-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}