.collapsible-section {
  padding: $section-vertical-padding $section-horizontal-padding;
  transition-delay: 100ms;
  transition-duration: 100ms;
  transition-property: background-color;

  .section-title {
    font-size: $section-title-font-size;
    font-weight: bold;
    margin: 0;

    span {
      color: var(--newtab-section-header-text-color);
      display: inline-block;
      fill: var(--newtab-section-header-text-color);
      vertical-align: middle;
    }

    .click-target-container {
      // Center "How it works" for "mobile" viewport
      @media (max-width: $break-point-medium - 1) {
        display: block;

        .learn-more-link-wrapper {
          display: block;
          text-align: center;

          .learn-more-link {
            margin-inline-start: 0;
          }
        }
      }

      vertical-align: top;

      .click-target {
        cursor: pointer;
        white-space: nowrap;
      }
    }

    .collapsible-arrow {
      margin-inline-start: 8px;
      margin-top: -1px;
    }
  }

  .section-top-bar {
    min-height: 19px;
    margin-bottom: 13px;
    position: relative;

    .context-menu-button {
      background: url('chrome://global/skin/icons/more.svg') no-repeat right center;
      border: 0;
      cursor: pointer;
      fill: var(--newtab-section-header-text-color);
      height: 100%;
      inset-inline-end: 0;
      opacity: 0;
      position: absolute;
      top: 0;
      transition-duration: 200ms;
      transition-property: opacity;
      width: $context-menu-button-size;

      &:-moz-any(:active, :focus, :hover) {
        fill: $grey-90;
        opacity: 1;
      }
    }

    .context-menu {
      top: 16px;
    }

    @media (max-width: $break-point-widest + $card-width * 1.5) {
      @include context-menu-open-left;
    }
  }

  &:hover,
  &.active {
    .section-top-bar {
      .context-menu-button {
        opacity: 1;
      }
    }
  }

  &.active {
    background: var(--newtab-element-hover-color);
    border-radius: 4px;

    .section-top-bar {
      .context-menu-button {
        fill: var(--newtab-section-active-contextmenu-color);
      }
    }
  }

  .learn-more-link {
    font-size: 11px;
    margin-inline-start: 12px;

    a span {
      color: var(--newtab-link-secondary-color);
    }
  }

  .section-body-fallback {
    height: $card-height;
  }

  .section-body {
    // This is so the top sites favicon and card dropshadows don't get clipped during animation:
    $horizontal-padding: 7px;
    margin: 0 (-$horizontal-padding);
    padding: 0 $horizontal-padding;

    &.animating {
      overflow: hidden;
      pointer-events: none;
    }
  }

  &.animation-enabled {
    .section-title {
      .collapsible-arrow {
        transition: transform 0.5s $photon-easing;
      }
    }

    .section-body {
      transition: max-height 0.5s $photon-easing;
    }
  }

  &.collapsed {
    .section-body {
      max-height: 0;
      overflow: hidden;
    }
  }

  // Hide first story card for the medium breakpoint to prevent orphaned third story
  &[data-section-id='topstories'] .card-outer:first-child {
    @media (min-width: $break-point-medium) and (max-width: $break-point-large - 1) {
      display: none;
    }
  }
}

