/***
 *  Controls/Nav Tray
 *
 *  A fold-away thingy with tiers that can open/close.
 *
 *  html:
 *    <div class="tray">
 *      <div class="tray__tier">
 *        <a class="tray__opener"></a>
 *        <h4>Tier 1</h4>
 *      </div>
 *      <div class="tray__tier">
 *        <a class="tray__opener"></a>
 *        <h4>Tier 2</h4>
 *      </div>
 *    </div>
 *
 *  wrap: [style="height: 200px"]
 */
$tray-width: multipleAbove(pxToRem(260), $wr);
.tray {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999999;

  & + * {
    transition: margin-left $transition-time * 4 $ease-soft;
  }

  &.is-open + * {
    margin-left: $tray-width;
  }
  &.is-open .tray__tier:not(.is-open) .tray__opener {
    left: $tray-width * 2;
  }
}
.tray__tier {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: $tray-width;
  box-sizing: border-box;
  background: $background-tray;
  border-right: 1px solid $border-tray;
  transition: transform $transition-time * 3 $ease-soft;
  z-index: 10;
  transform: translateX(-100%);

  &.is-open {
    transform: none;
    > .tray__opener {
      text-indent: $wr * -.25;
      clip-path: polygon(#{$wr} 0, #{$wr * 3} 0, #{$wr * 3} #{$vr * 1.5}, #{$wr * 3} #{$vr * 3}, #{$wr} #{$vr * 3}, 0 #{$vr * 1.5});
      &::after {
        border-left-width: 0;
        border-right-width: calc(#{$wr} + 1px);
      }
    }
  }

  @for $i from 2 through 5 {
    &:nth-child(#{$i}) {
      .tray__opener {
        top: $vr + $vr * 4 * ($i - 1);
      }
    }
  }
}
.tray__opener {
  @include h4;
  display: block;
  position: absolute;
  top: $vr; left: 100%;
  width: $wr * 4;
  height: $vr * 3;
  box-sizing: border-box;
  margin-left: $wr * -1;
  line-height: $vr * 3;
  background: $background-tray;
  cursor: pointer;
  border: 1px solid $border-tray;
  border-width: 1px 0;
  color: $text-subtle;
  transition: color $transition-time;
  text-align: center;
  text-indent: $wr * .25;
  clip-path: polygon(#{$wr} 0, #{$wr * 3} 0, #{$wr * 4} #{$vr * 1.5}, #{$wr * 3} #{$vr * 3}, #{$wr} #{$vr * 3}, #{$wr} #{$vr * 1.5});
  transition: clip-path $transition-time * 3, text-indent $transition-time * 3, left $transition-time * 3;

  &:hover, .tray__tier.is-open & {
    color: $text-body;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0; left: 1px;
    border-width: calc(#{$vr * 1.5} - 1px);
    border-right-width: calc(#{$wr} - 1px);
    border-left-width: 1px;
    border-style: solid;
    border-color: $border-tray;
    border-right-color: transparent;
  }
  &::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-width: calc(#{$vr * 1.5} - 1px);
    border-left-width: calc(#{$wr} - 1px);
    border-right-width: 1px;
    border-style: solid;
    border-color: $border-tray;
    border-left-color: transparent;
    transition: border-width $transition-time;
  }
}