// eslint-disable color-no-hex

// This file exists to support legacy accordions on va.gov, e.g. in the footer
// these styles should not be used in any new app code

// This is a copy of the entire ~uswds/src/stylesheets/components/accordions.scss file
// so that we can convert the rem values for USWDS v3.

/*
  Original: @import "~uswds/src/stylesheets/components/accordions";
  ***THIS IS USWDS v1***
*/

// Variables
$accordion-border: 3px solid $vads-color-base-lightest;

// Accordion Styles

$icon-size: 15px;
$h-padding: 20px;
$v-padding: 15px;

@mixin unstyled-list() {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
  padding-left: 0;

  > li {
    margin-bottom: 0;
    max-width: unset;
  }
}

@mixin accordion-list-styles {
  @include unstyled-list;
  color: $vads-color-black;
  margin: 0;
  padding: 0;
  width: 100%;
}

@mixin accordion-list-item-styles {
  background-color: $vads-color-base-lightest;
  font-family: $font-family-sans;
  list-style: none;
  margin-bottom: 5px;
  width: 100%;
}

@mixin button-unstyled {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-weight: $font-weight-normal;
  margin: 0;
  padding: 0;
  text-align: left;
  -webkit-font-smoothing: auto;

  &:hover {
    background-color: transparent;
  }
}

@mixin sr-only() {
  position: absolute;
  left: -999em;
}

@mixin accessibly-hidden() {
  &[aria-hidden=true] {
    display: none;
  }
}

// scss-lint:disable PropertyCount
@mixin accordion-button-styles {
  @include button-unstyled;
  background-color: $vads-color-base-lightest;
  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/minus.png);
  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/minus.svg);
  background-position: right $h-padding center;
  background-repeat: no-repeat;
  background-size: $icon-size;
  color: $color-base;
  cursor: pointer;
  display: inline-block;
  font-family: $font-family-sans;
  font-weight: $font-bold;
  margin: 0;
  padding: $v-padding ($h-padding * 2 + $icon-size) $v-padding $h-padding;
  width: 100%;

  &:hover {
    background-color: $color-gray-lighter;
    color: $color-base;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }
}
// scss-lint:enable PropertyCount

@mixin accordion-button-unopened-styles {
  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/plus.png);
  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/plus.svg);
  background-repeat: no-repeat;
  background-size: $icon-size;
}

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

.usa-accordion,
.usa-accordion-bordered {
  @include accordion-list-styles;
  @include accordion-nested-list;

  + .usa-accordion,
  + .usa-accordion-bordered {
    margin-top: 10px;
  }

  // TODO deprecated ruleset based on old accordion.
  > ul {
    @include accordion-list-styles;

    // TODO deprecated ruleset based on old accordion.
    > li {
      @include accordion-list-item-styles;
    }

    // TODO deprecated ruleset based on old accordion.
    button {
      @include accordion-button-styles;
    }

    // TODO deprecated ruleset based on old accordion.
    [aria-expanded=false] {
      @include accordion-button-unopened-styles;
    }
  }

  > li {
    @include accordion-list-item-styles;
  }

}

.usa-accordion-bordered {
  .usa-accordion-content {
    border-bottom: $accordion-border;
    border-left: $accordion-border;
    border-right: $accordion-border;
  }
}

.usa-accordion-content {
  background-color: $vads-color-white;
  overflow: auto;
  padding: 15px 20px;

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

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

  &:not([aria-hidden]) {
    @include sr-only();
  }

  @include accessibly-hidden();
}

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

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