@use "00-base/configure" as *;

.ma__toc--hierarchy {

  .ma__colored-heading {
    margin-bottom: 0 !important;
    margin-right: 50px;
    overflow: visible;
    z-index: 1;
    max-width: 28em;
    width: calc(100% - 50px);

    &:after {
      display: none;
    }

    &:before {
      content: "";
      position: absolute;
      top: 0;
      right: -25px;
      background: inherit;
      height: 100%;
      width: 50px;
      transform: skew(-.53rad);
    }
  }

  .ma__toc--hierarchy__container {
    position: relative;
    top: -20px;
    padding: 0;
    padding-top: 20px;
    list-style: none;
    background: $c-gray-lightest;
    border: 2px solid $c-gray-light;

    > * + * {
      border-top: 1px solid $c-gray-light;
    }

    // Visual cue for the clickable area.

    > li[data-link]:hover {
      cursor: pointer;

      a {
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: rgba(20,85,143,0.5);
      }
    }

    .ma__decorative-link {
      padding: 20px;
    }

    .ma__download-link {
      padding: 20px;
    }
  }

  //react

  .ma__accordion-header {

    &__button {
      padding-left: 20px;
      padding-right: 20px;

      &--solid.is-open {
        margin-bottom: unset;
      }
    }

    &__title {
      font-size: $fonts-medium;
    }
  }

  .ma__accordion-content__body {
    background: $c-white;
    list-style: none;
    margin-bottom: unset;
    padding: 10px 0 10px 20px;

    & a {
      transition: none;
    }

    &.collapsed {
       padding: unset;
    }
  }

}

.ma__toc--hierarchy__accordion {

  .ma__toc--hierarchy__accordion-content {
    list-style: none;
    margin-bottom: 0;
    display: none;
    padding: 10px 0 10px 20px;
    background: $c-white;
    border-top: 2px solid $c-gray-light;

    // Visual cue for the clickable area.

    li:hover {
      cursor: pointer;

      a {
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: rgba(20,85,143,0.5);
      }
    }
  }

  .ma__toc--hierarchy__title {
    background: transparent;
    border: none;
    display: block;
    padding: 20px;
    padding-right: 30px;
    position: relative;
    text-align: left;
    width: 100%;
    font-weight: bold;
    color: $c-primary;

    &:after {
      font-size: $fonts-4xlarge;
      font-weight: normal;
      content: "+";
      line-height: .65em;
      overflow: hidden;
      position: absolute;
        right: 15px;
        top: 20px;
      transform-origin: center center;
      transition: transform .2s ease;
    }
  }

  &.is-open .ma__toc--hierarchy__title:after {
    transform: rotate(135deg);
  }

}