// GEO "Article Summary" block (<theme-content-geo-summary-block>). Inherits the
// same surface treatment as `.pib-page-card` (see blocks/_promo-card.scss):
// background, radius, and padding.
.content-geo-summary {
  $self: &;

  margin-bottom: 1.5rem;
  padding: 24px;
  background-color: $gray-100;
  border-radius: 4px;

  &__title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
  }

  &__summary {
    margin-bottom: 0.5rem;
  }

  &__key-facts {
    ul {
      margin-bottom: 0;
    }
  }

  // When `collapse-on-mobile` is enabled the title renders as a toggle button
  // (<theme-menu-toggle-button>) instead of an `h2`. The defaults below are the
  // *desktop* presentation -- always expanded, chevron hidden, button inert -- so
  // that only the mobile behavior needs a media query. (Bootstrap's
  // `media-breakpoint-up($bp)` is not the complement of `media-breakpoint-down($bp)`,
  // so pairing them would leave an overlapping range.)
  &--collapsible {
    #{ $self }__toggler {
      @include theme-toggle-button();

      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0;
      margin-bottom: 0.5rem;
      color: inherit;
      text-align: left;
      cursor: default;
      pointer-events: none;

      span:not(.marko-web-icon) {
        font-size: 1.25rem;
        font-weight: 700;
      }

      .marko-web-icon {
        display: none;
      }
    }

    // Mobile (single column): collapsed by default, revealed by the `--open` modifier.
    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
      #{ $self }__toggler {
        margin-bottom: 0;
        cursor: pointer;
        pointer-events: auto;

        .marko-web-icon {
          display: inline-flex;
          flex: 0 0 auto;
          margin-left: 0.5rem;
        }
      }

      #{ $self }__body {
        display: none;
      }

      &#{ $self }--open {
        #{ $self }__toggler {
          margin-bottom: 0.5rem;
        }

        #{ $self }__body {
          display: block;
        }
      }
    }
  }
}