18F/web-design-standards

@use "sass:map";
@use "uswds-core" as *;

// Variables
$accordion-context: "Accordion";

$accordion-border: units($theme-accordion-border-width) solid
  color($theme-accordion-border-color);

$accordion-button-background-active-color: next-token(
  $theme-accordion-button-background-color,
  "darker"
);

// Maps for High Contrast Mode

$accordion-icon-map-defaults: (
  color: color("ButtonText"),
  svg-height: 20,
  svg-width: 20,
  height: units(3),
);

$accordion-button-unopen-hc-icon: map-merge(
  $accordion-icon-map-defaults,
  (
    "name": "add",
  )
);

$accordion-button-open-hc-icon: map-merge(
  $accordion-icon-map-defaults,
  (
    "name": "remove",
  )
);

// Accordion Styles
@mixin accordion-list-styles {
  @include unstyled-list;
  color: color("ink");
  margin: 0;
  padding: 0;
  width: 100%;
}

@mixin accordion-hc-icon-styles {
  height: 100%;
  position: absolute;
  right: units(2.5);
  top: 0;
}

// Opened styles
@mixin accordion-button-styles {
  @include button-unstyled;
  @include set-text-and-bg(
    $theme-accordion-button-background-color,
    $context: $accordion-context
  );
  @include set-icon-from-bg(
    $theme-accordion-button-background-color,
    "usa-icons/remove",
    "usa-icons-bg/remove--white"
  );
  background-position: right units(2.5) center;
  background-size: units(3);
  cursor: pointer;
  display: inline-block;
  font-weight: font-weight("bold");
  margin: 0;
  padding: units(2) units(2.5) * 2 + units(2) units(2) units(2.5);
  text-decoration: none;
  width: 100%;

  &:hover {
    @include set-text-and-bg(
      $accordion-button-background-active-color,
      $context: $accordion-context
    );
    @include set-icon-from-bg(
      $accordion-button-background-active-color,
      "usa-icons/remove",
      "usa-icons-bg/remove--white"
    );
    text-decoration: none;
  }

  @media (forced-colors: active) {
    border: $border-high-contrast;
    position: relative;

    &::before {
      @include add-color-icon($accordion-button-open-hc-icon);
      @include accordion-hc-icon-styles();
      content: "";
    }
  }
}

@mixin accordion-button-unopened-styles {
  @include set-icon-from-bg(
    $theme-accordion-button-background-color,
    "usa-icons/add",
    "usa-icons-bg/add--white"
  );
  background-size: units(3);

  &:hover {
    @include set-icon-from-bg(
      $accordion-button-background-active-color,
      "usa-icons/add",
      "usa-icons-bg/add--white"
    );
  }

  @media (forced-colors: active) {
    &::before {
      @include add-color-icon($accordion-button-unopen-hc-icon);
      @include accordion-hc-icon-styles();
    }
  }
}

@mixin accordion-nested-list {
  > ul li ul {
    list-style: disc;
    > li > ul {
      list-style: circle;
      > li > ul {
        list-style: square;
      }
    }
  }
}

.usa-accordion {
  @include accordion-list-styles;
  @include accordion-nested-list;
  @include border-box-sizing;
  @include typeset($theme-accordion-font-family);

  + .usa-accordion,
  + .usa-accordion--bordered {
    margin-top: units(1);
  }
}

.usa-accordion--bordered {
  .usa-accordion__content {
    border-bottom: $accordion-border;
    border-left: $accordion-border;
    border-right: $accordion-border;
    padding-bottom: units(2);
  }

  .usa-accordion__heading {
    margin-bottom: 0;
  }
}

.usa-accordion__heading,
// kludge to override .usa-prose styles
// TODO: work this into a mixin
.usa-prose .usa-accordion__heading {
  @include typeset($theme-accordion-font-family, $theme-body-font-size, 1);
  margin: 0;

  &:not(:first-child) {
    margin-top: units(1);
  }
}

.usa-accordion__content {
  @include set-text-and-bg(
    $theme-accordion-background-color,
    $context: $accordion-context
  );
  margin-top: 0;
  overflow: auto;
  padding: units(2) units(2.5) calc(#{units(2)} - #{units(0.5)}) units(2.5);

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

.usa-accordion__button {
  @include accordion-button-styles;
}

.usa-accordion__button[aria-expanded="false"] {
  @include accordion-button-unopened-styles;
}