/*
ACCORDION
*/

@import '~styles/common';

.Accordion {
  &-section {
    border-bottom: 1px solid $light-gray;
    height: auto;
    min-height: 20px;
    @include transition(0.2s ease-in-out);

    &:last-of-type {
      border-bottom: 0;
    }

    &.is-open {
      .Accordion-section-contents {
        overflow: visible;
      }
    }

    &-contents {
      overflow: hidden;
      z-index: $z-1;
    }

    &-header {
      background-color: $white;
      border: 0;
      color: $light-gray;
      font-size: $h2-font-size;
      text-align: left;
      width: 100%;
      z-index: $z-2;

      &:active,
      &:focus,
      &:hover {
        background-color: transparent;
        color: $light-gray;
      }

      &.is-open {
        color: $dark-gray;
      }
    }
  }

  // transitions
  &-fold-entering {
    @include transition(0.2s ease-in-out, 0.8s ease-in-out max-height 0s, 0.2s ease opacity 0.3s);
    max-height: 10px !important;
    opacity: 0.5;
    overflow: hidden;
  }

  &-fold-entered {
    @include transition(0.2s ease-in-out, 0.8s ease-in-out max-height 0s, 0.2s ease opacity 0.3s);
    max-height: 800px !important;
    opacity: 1;
    overflow: visible;
  }

  &-fold-exiting {
    @include transition(0.2s ease-in-out, 0.8s ease-in-out max-height 0s);
    max-height: 100px !important;
    opacity: 0.5;
    overflow: hidden;
  }

  &-fold-exited {
    @include transition(0.2s ease-in-out, 0.5s ease-in-out max-height 0s);
    max-height: 1px !important;
    opacity: 0;
    overflow: hidden;
  }
}