@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

.o-summary {
  &__content {
    overflow-y: hidden;

    // Move the bounding box 2 pixels to avoid clipping link focus boxes.
    padding: 2px;
    left: -2px;
    top: -2px;

    position: relative;
  }

  &__btn {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: math.div(5px, $base-font-size-px) + rem;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    border: dotted var(--pacific);
    border-width: 1px 0;
    text-align: center;
    color: var(--pacific);
    background: #fff;

    svg {
      // Prevent icon from shrinking when button wraps.
      flex: none;
    }

    &:focus {
      outline: 1px dotted var(--pacific);
      outline-offset: 1px;
    }

    &[aria-expanded='false']::before {
      // Fades content out over approximately 2 lines.
      display: block;
      pointer-events: none;
      height: math.div($base-line-height-px * 2, $base-font-size-px) + em;
      margin: 0;
      position: absolute;
      left: 0;
      right: 0;

      // 4px is needed because the 2px movement of the content's bounding box.
      top: calc(-100% + 4px);

      /* TODO: stylelint wants to convert rgba to rgb. Investigate why. */
      /* stylelint-disable */
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0%) 0%,
        rgba(255, 255, 255, 100%) 100%
      );
      /* stylelint-enable */
      content: '';

      @media print {
        background: none;
      }
    }
  }

  // Hide button in no-js state.
  .no-js &__btn {
    display: none;
  }

  // If we're mobile-only…
  &--mobile {
    @media only screen and (min-width: $bp-sm-min) {
      .o-summary__btn {
        // Hide the "read more" button and fading on desktop.
        display: none;
      }
    }
  }
}