@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__comp-heading,
  .ma__comp-heading--sidebar {
    margin-bottom: 0;
    cursor: text;
  }

  // top level links

  &__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: $c-link;
      }
    }

    .ma__decorative-link {
      padding: 20px;
    }

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

  // second level links

  &__accordion {

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

      // Visual cue for the clickable area.

      li:hover {
        cursor: pointer;
      }

      a:hover {
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: $c-link;
      }

      li {
        margin-left: 1rem;
        list-style: none;
        font-weight: $fonts-normal;

        .ma__comp-heading,
        .ma__comp-heading--sidebar {
          margin-top: 1rem;
        }

        .ma__decorative-link {
          padding: 1rem 0;
        }

        .ma__download-link {
          padding: 1rem 0;
        }

        .ma__sidebar-heading {
          margin: 1rem 0;
        }
      }
    }

    &-title {
      background: transparent;
      border: none;
      display: block;
      padding: 20px;
      padding-right: 30px;
      position: relative;
      text-align: left;
      width: 100%;
      font-weight: $fonts-bolder;
      color: $c-primary;

      &:after {
        font-size: $fonts-5xlarge;
        content: "+";
        color: $c-primary-alt;
        line-height: .65em;
        overflow: hidden;
        position: absolute;
        right: 15px;
        top: 25px;
        transform-origin: center center;
        transition: transform .2s ease;
      }
    }

    &.is-open &-title:after {
      content: "|";
      transform: rotate(90deg) scale(0.8);
      font-weight: $fonts-bold;
    }

  }

  &--no-background {
    margin-top: 4rem;

    .ma__toc--hierarchy {

      &__accordion {

        &-title {
          padding-left: 11px;
          border-left: 10px solid transparent;

          &:focus {
            border-left-color: transparent !important;
          }

          &.is-current {
            border-left-color: rgba($c-primary-alt, 0.5) !important;
          }

        }
      }

      &__container {
        padding-top: 0;
        top: 0;
        background-color: transparent;
        border: 0;
        margin-bottom: 0;

        li {
          position: relative;

          &.is-current:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 10px;
            height:100%;
          }

          .ma__toc--hierarchy__accordion-content .is-current:before {
            left: -20px;
          }
        }

        & > li > span > a {
          font-weight: $fonts-bolder;
        }
      }
    }
  }

  //react

  .ma__accordion-header {

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

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

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

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

    & a {
      transition: none;
    }

    &.collapsed {
      padding: unset;
    }
  }
}