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

/* ==========================================================================
   Design System
   Expandable Styling
   ========================================================================== */

//
// Recommended expandable pattern
//

.o-expandable {
  position: relative;

  //
  // Header
  //

  &__header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: math.div(10px, $base-font-size-px) + em
      math.div(15px, $base-font-size-px) + em;
    border: 0;
    background-color: transparent;
    cursor: pointer;

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

    .o-expandable__cue-close,
    .o-expandable__cue-open {
      display: none;
    }

    &[aria-expanded='false'] .o-expandable__cue-open {
      display: block;
    }

    &[aria-expanded='true'] .o-expandable__cue-close {
      display: block;
    }
  }

  // Using the button element with .o-expandable__header requires setting
  // an explicit width.
  button.o-expandable__header {
    width: 100%;
    text-align: left;
  }

  //
  // Expandable text elements
  //

  &__label {
    // Grow to available width.
    flex-grow: 1;

    // Remove default h4 margin style
    margin-bottom: 0;
    color: var(--black);
    font-weight: 500;
  }

  &__icon,
  &__label {
    // h4 size.
    font-size: math.div(18px, $base-font-size-px) + em;

    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      font-size: math.div(16px, $base-font-size-px) + em;
    }
  }

  &__cues {
    align-self: center;
    color: var(--pacific);
    font-size: math.div(16px, $base-font-size-px) + em;
    line-height: math.div($base-line-height-px, $base-font-size-px);
  }

  &__content {
    padding: math.div(15px, $base-font-size-px) + em;
    padding-top: 0;

    // The divider between __header and __content.
    &::before {
      content: '';
      display: block;
      border-top: 1px solid $expandable-border;
      padding-top: math.div(15px, $base-font-size-px) + em;
    }

    &::after {
      padding-bottom: math.div(15px, $base-font-size-px) + em;
      width: 100%;
    }
  }

  //
  // Padded expandable modifier
  //

  &--padded {
    .o-expandable {
      &__header {
        padding: math.div(25px, $base-font-size-px) + em
          math.div(15px, $base-font-size-px) + em;
      }

      &__icon,
      &__label {
        // h2 size.
        font-size: math.div(26px, $base-font-size-px) + em;

        // Mobile only.
        @include respond-to-max($bp-xs-max) {
          font-size: math.div(22px, $base-font-size-px) + em;
        }
      }
    }
  }

  //
  // Expandable with a background color modifier
  //

  &--background {
    background: var(--gray-5);
  }

  //
  // Expandable with a border modifier
  //

  &--border {
    border: 1px solid $expandable-border;
  }

  //
  // Expandable groups
  //

  &-group {
    .o-expandable {
      border-bottom: 1px solid $expandable-border;

      &:first-child {
        border-top: 1px solid $expandable-border;
      }
    }
  }

  @media print {
    // Hide the interactive expandable cues when printing
    &__header[aria-expanded='true'] &__cue-close,
    &__header[aria-expanded='false'] &__cue-open {
      display: none;
    } // Ensure all expandables are expanded when printing.
    // To accommodate print stylesheets that display the raw URL after links,
    // set an enormous max height to accommodate expandables that have a lot of links.
    &__content[aria-expanded='false'] {
      display: block;
      max-height: 99999px !important;
    }
  }
}

// Used when the set language reads right-to-left
html[lang='ar'] {
  .o-expandable {
    &__header {
      text-align: right;
    }

    &__cues {
      text-align: left;
    }
  }
}