$accordion-animation-speed: .3s !default;
$accordion-title-font-family: $font-family-base !default;
$accordion-title-font-weight: $font-weight-bold !default;

.accordion {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.accordion__item {
  transition: all $accordion-animation-speed ease;
  border-top: 1px solid $light-gray-2;
  overflow: visible;

  &:last-child {
    border-bottom: 1px solid $light-gray-2;
  }
}

.accordion__heading {
  background: none;
  -webkit-appearance: none;
  border: 0;
  color: $dark-gray-2;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  padding: 0;
  flex-direction: row-reverse;
  position: relative;
  width: 100%;
  margin: 0;
  transition: background-color ease $accordion-animation-speed;

  &::-moz-focus-inner {
    border: 0;
  }

  &:hover:before,
  &:focus:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: calc(100% + 2px);
  }

  &:hover:before {
    background-color: $light-gray-3;
  }

  &:focus {
    outline: none;
    color: $dark;
  }

  &:focus:before {
    outline: 0;
  }
}

.accordion__arrow {
  // Without flex basis and flex shrink being set here, our icon width can go
  // <16px and cause the icon to render in the incorrect artboard size
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0 $spacing-md;
  fill: $dark-gray-1;
  position: relative;
  outline-offset: -2px;
  // TODO: RTL rotate(180deg);
  transform-origin: center;

  transition: all $accordion-animation-speed ease;
}

.accordion__title {
  margin: $spacing-xs $spacing-md;
  width: 100%;
  font-family: $accordion-title-font-family;
  font-weight: $accordion-title-font-weight;
  text-align: left;
  z-index: 0;
}

.accordion__title-content {
  margin: $spacing-xs $spacing-md;
  width: 100%;
  text-align: left;
  z-index: 0;
}

.accordion__content {
  // Transition property for when the accordion closes
  transition: height ease-in-out $accordion-animation-speed,
    padding ease-in-out $accordion-animation-speed;
  padding-left: $spacing-md;
  padding-right: $spacing-md;
  height: 0;
  visibility: hidden;
  opacity: 0;
}

.accordion__item--active {
  overflow: visible;

  .accordion__content {
    padding-bottom: $spacing-md;
    padding-top: $spacing-xs;
    height: auto;
    visibility: visible;
    opacity: 1;
    // Transition property for when the accordion opens
    transition: height ease $accordion-animation-speed,
      padding-top ease $accordion-animation-speed,
      padding-bottom ease $accordion-animation-speed,
      opacity ease $accordion-animation-speed;
  }

  .accordion__arrow {
    transform: rotate(180deg);
    fill: $dark-gray-3;
  }
}

// Skeleton state
.accordion.skeleton .accordion__heading,
.accordion.skeleton .accordion__button {
  cursor: default;
}

.accordion.skeleton .accordion__arrow {
  pointer-events: none;
  fill: $dark-gray-3;
  cursor: default;

  &:hover,
  &:focus,
  &:active {
    border: none;
    outline: none;
    cursor: default;
  }
}

.skeleton
  .accordion__heading:focus
  .accordion__arrow {
  border: none;
  outline: none;
  cursor: default;

  .accordion__heading {
    padding: $spacing-md;
  }
}