@import "./config";
@import "~react-toolbox/app_bar/config";
@import "~react-toolbox/button/config";

.appbar {
  padding-right: 8 * $unit;
}

.playground-button {
  position: fixed;
  top: $appbar-height - ($button-floating-height / 2);
  right: $button-floating-height / 2;
  z-index: $z-index-higher;
}

.documentation {
  position: fixed;
  top: $appbar-height;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all $animation-duration $animation-curve-default;
}

.navigation {
  position: fixed;
  top: $appbar-height;
  bottom: 0;
  left: 0;
  z-index: $z-index-high;
  box-shadow: $documentation-left-shadow;
  transition: all $animation-duration $animation-curve-default;
}

.playground {
  position: fixed;
  top: $appbar-height;
  bottom: 0;
  z-index: $z-index-high;
  width: $playground-width;
  background: $color-background;
  box-shadow: $documentation-right-shadow;
  transition: right $animation-duration $animation-curve-default;
}

.root {
  &:not(.with-playground) {
    > .playground {
      right: - ($playground-width * 1.1);
    }
    > .documentation {
      padding-right: 0;
      padding-left: $navigation-width;
    }
    > .navigation {
      transform: translateX(0);
    }
  }
  &.with-playground {
    > .playground {
      right: 0;
    }
    > .documentation {
      padding-right: $playground-width;
      padding-left: 0;
    }
    > .navigation {
      transform: translateX(- 100%);
    }
  }
}

.load-button {
  display: inline-block;
}