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

:host {
  // Theme

  --expandable-border: var(--gray-40);

  .cf-icon-svg {
    height: 1.1875em;
    vertical-align: middle;
    fill: currentcolor;
  }

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

    /*
    .o-expandable--padded {
      // h2 size.
      font-size: math.div(26px, $base-font-size-px) + em !important;

      // Mobile only.
      @include respond-to-max($bp-xs-max) {
        font-size: math.div(22px, $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%;
      }
    }

    //
    // Padded expandable modifier
    //

    // NOTE: Padded expandable is disabled pending possible deletion.

    /*
    &--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 !important;

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

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