.__amegmen-2 {
  &,
  * {
    box-sizing: border-box;
  }
  .__amegmen--toggle-cta,
  .__amegmen--close-cta,
  .__amegmen--main-cta,
  .__amegmen--back-cta {
    border-radius: 100%;
    border: 1px solid $amegmen_link_border;
    color: $anchorLink;
    display: inline-block;
    height: $amegmen_common_height;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: $amegmen_common_width;
  }
  .__amegmen--toggle-cta {
    background-color: $amegmen_nav_bg;
  }
  .__amegmen--close-cta {
    background-color: $amegmen_nav_bg;
  }
  .__amegmen--main-cta {
    background-color: $amegmen_nav_l1;
  }
  .__amegmen--back-cta {
    background-color: $amegmen_nav_l2;
  }

  .__amegmen--canvas {
    @include amegmen-animation();
    background-color: $amegmen_nav_bg;
    border: 1px solid $amegmen_nav_border;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transform: translate(-100.5%, 0);
    width: 100%;
    z-index: 1040;

    &.__amegmen-active {
      transform: translate(0, 0);
    }
  }

  header {
    height: $amegmen_common_height;
    position: absolute;
    right: 0;
    top: 0;
    width: $amegmen_common_width;
    z-index: 10;
  }

  .__amegmen--main {
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 8;

    &.__amegmen--nooverflow {
      overflow: hidden;
    }

    & > ul {
      display: block;
      letter-spacing: normal;
      list-style: none;
      margin: 0;
      padding: $amegmen_common_height 0 0 0;

      & > li {
        display: block;
        margin: 0;
        padding: 0;
      }
    }
  }

  .__amegmen--anchor-l0,
  .__amegmen--anchor-l1,
  .__amegmen--anchor-l2 {
    @include amegmen-animation();
    border: 1px solid transparent;
    display: block;
    text-align: left;
    text-decoration: none;
    &:link {
      color: $anchorLink;
    }
    &:visited {
      color: $anchorVisited;
    }
    &:hover,
    &.__amegmen-hover {
      color: $anchorHover;
    }
    &:active {
      color: $anchorActive;
    }
    &:focus,
    &.__amegmen-focus {
      color: $anchorFocus;
    }
  }

  .__amegmen--anchor-l0 {
    background-color: $amegmen_nav_bg;
    display: block;
    font-size: 17px;
    padding: 13px;

    &:hover,
    &.__amegmen-active,
    &:focus,
    &.__amegmen-focus {
      background-color: $amegmen_nav_l1;
    }
  }

  .__amegmen--anchor-l1 {
    background-color: $amegmen_nav_l1;
    display: block;
    font-size: 15px;
    padding: 13px;

    &:hover,
    &.__amegmen-active,
    &:focus,
    &.__amegmen-focus {
      background-color: $amegmen_nav_l2;
    }
  }

  .__amegmen--anchor-l2 {
    display: block;
    font-size: 15px;
    padding: 13px;

    &:hover,
    &.__amegmen-active,
    &:focus,
    &.__amegmen-focus {
      background-color: $amegmen_nav_l3;
    }
  }

  .__amegmen--col {
    & > ul {
      &,
      & > li {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
      }
    }
  }

  .__amegmen--panel {
    @include amegmen-animation();
    border: 1px solid $amegmen_nav_border;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: left;
    top: 0;
    transform: translate(-100.5%, 0);
    visibility: hidden;
    width: 100%;

    &.__amegmen-active {
      opacity: 1;
      transform: translate(0, 0);
      visibility: visible;
    }

    nav {
      display: flex;
      flex-direction: column;
    }
  }

  .__amegmen--panel-l0 {
    background-color: $amegmen_nav_l1;
    height: 100%;
    overflow: hidden;
    z-index: 1050;

    .__amegmen--landing {
      text-align: left;
      width: calc(100% - #{$amegmen_common_width});
    }

    & > nav {
      height: calc(100% - #{$amegmen_common_height});
      left: 0;
      overflow-y: scroll;
      position: absolute;
      top: $amegmen_common_height;
      width: 100%;

      &.__amegmen--nooverflow {
        overflow: hidden;
      }
    }
  }

  .__amegmen--panel-l1 {
    background-color: $amegmen_nav_l2;
    height: 100%;
    overflow: hidden;
    z-index: 1060;

    .__amegmen--landing {
      width: 100%;
    }

    & > nav {
      height: calc(100% - #{$amegmen_common_height});
      left: 0;
      overflow-y: scroll;
      position: absolute;
      top: $amegmen_common_height;
      width: 100%;
    }
  }
  .__amegmen--landing {
    display: block;
    display: flex;
    flex-direction: row;
    a {
      border: 1px solid transparent;
      display: block;
      font-weight: bold;
      line-height: $amegmen_common_height;
      overflow: hidden;
      padding: 0 16px;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - #{$amegmen_common_width});

      &:link {
        color: $anchorLink;
      }
      &:visited {
        color: $anchorVisited;
      }
      &:hover,
      &.__amegmen-hover {
        color: $anchorHover;
      }
      &:active {
        color: $anchorActive;
      }
      &:focus,
      &.focus {
        color: $anchorFocus;
      }
    }
  }
  &.__amegmen--r-to-l {
    .__amegmen--main,
    .__amegmen--panel-l0 > nav,
    .__amegmen--panel-l1 > nav {
      direction: rtl;
    }
    .__amegmen--anchor-l0,
    .__amegmen--anchor-l1,
    .__amegmen--anchor-l2 {
      text-align: right;
    }
    .__amegmen--landing {
      text-align: right;
    }
    .__amegmen--panel {
      text-align: right;
    }
  }
}