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

:host {
  // Theme
  --expandable-border: var(--gray-40);
}

// Overide heading defaults.
::slotted([slot='header']) {
  margin-bottom: 0 !important;
  color: var(--black) !important;
  font-weight: 500 !important;

  // h4 size.
  font-size: math.div(18px, $base-font-size-px) + em !important;

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

//
// 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;
  }

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

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

  &__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 var(--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%;
    }
  }

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

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

  //
  // Expandable with a border modifier
  //

  &--border {
    border: 1px solid var(--expandable-border);
  }

  //
  // Expandable groups
  //

  &-group {
    .o-expandable {
      border-bottom: 1px solid var(--expandable-border);

      &:first-child {
        border-top: 1px solid var(--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'] {
  :host {
    .o-expandable {
      &__header {
        text-align: right;
      }

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