// Wissensbaum

$baum_1: #9e0054;
$baum_2: #e00178;
$baum_3: #d32a3e;
$baum_4: #b65d03;

$box_width:   280px;
$opener_width: 55px;

.page_feature_intro .nested_pagelist {
  $elem_height: 75px;
  @include clearfix;

  li {
    clear: both;
    margin: 13px 0;
    display: block;

    .box {
      width: $box_width;
      min-height: $opener_width;

      display: flex;
      flex-flow: row nowrap;
      align-items: stretch;
      justify-content: start;
      position: relative;

      transition: all .3s;

      a.intern {
        color: inherit;
        flex-basis: calc(#{$box_width} - #{$opener_width});

        text-decoration: none;

        padding: 5px 10px;

        &:hover,
        &:focus,
        &:active {
          text-decoration: underline;
        }
      }

      a.opener {
        flex-basis: $opener_width;

        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;

        font-size: 40px;
        text-decoration: none;

        transition: all .2s;

        color: inherit;
        border-right: 1px solid;
      }

      .kompass_new {
        @extend %new-flag;

        position: absolute;
        right: -20px;
        top: -7px;
      }
    }

    &.kompass_new .box {
      padding-right: 60px;
    }

    &:not(.haschildren) {
      .box {
        color: $text;

        a {
          flex-basis: $box_width;
        }
      }
    }

    ul {
      display: none;

      transform: scaleY(0);
      transform-origin: top;
      transition: transform .3s, height .3s;

      height: 0;
      overflow: hidden;
    }

    &.active {
      > ul {
        transform: scaleY(1);
        height: auto;
        display: block;
      }
    }
  }

  // Farben
  .box {
    border: 1px solid $text;
    background: $bg_white;

    a.opener {
      &:hover,
      &:focus,
      &:active {
        color: $bg_white;
      }
    }
  }

  .active > .box {
    color: $bg_white !important;
    border-color: $bg_white !important;
  }

  .npl_level_1 > li.haschildren {
    > .box {
      border-color: $baum_1;
      color: $baum_1;
    }
    &.active > .box {
      background: $baum_1;
    }
    a.opener {
      &:hover,
      &:focus,
      &:active {
        background: $baum_1;
      }
    }
  }

  .npl_level_2 > li.haschildren {
    > .box {
      border-color: $baum_2;
      color: $baum_2;
    }
    &.active > .box {
      background: $baum_2;
    }
    a.opener {
      &:hover,
      &:focus,
      &:active {
        background: $baum_2;
      }
    }
  }

  .npl_level_3 > li.haschildren {
    > .box {
      border-color: $baum_3;
      color: $baum_3;
    }
    &.active > .box {
      background: $baum_3;
    }
    a.opener {
      &:hover,
      &:focus,
      &:active {
        background: $baum_3;
      }
    }
  }

  .npl_level_4 > li.haschildren {
    > .box {
      border-color: $baum_4;
      color: $baum_4;
    }
    &.active > .box {
      background: $baum_4;
    }
    a.opener {
      &:hover,
      &:focus,
      &:active {
        background: $baum_4;
      }
    }
  }

  // Einrückungen
  .npl_level_2 > li > .box {
    margin-left: calc((100% - #{$box_width}) / 4);
  }
  .npl_level_3 > li > .box {
    margin-left: calc(2 * (100% - #{$box_width}) / 4);
  }
  .npl_level_4 > li > .box {
    margin-left: calc(3 * (100% - #{$box_width}) / 4);
  }
  .npl_level_5 > li > .box {
    margin-left: calc(4 * (100% - #{$box_width}) / 4);
  }

}