@import "../mixins/grid/row.css";
@import "../mixins/grid/column.css";
@import "../mixins/utils/border-box.css";

html {
  font-size: 62.5%;
  height: 100%;
}

body {
  font-size: 1.6rem;
  height: 100%;
  overflow-x: hidden;
}

.container {
  @mixin row;
  height: 100%;
}

.application {

  @mixin column 10;

  position:   relative;
  background: white;
  transition: all .2s ease-in-out;
  overflow:   auto;
}

.code {
  @mixin column 0;
  position:   relative;
  background: $pampas;
  transition: all .2s ease-in-out;
}

.menu-active {
  & .application {
    @mixin column 5;
  }
  & .code {
    @mixin column 5;
  }
}

.layout-container {

  @mixin border-box;

  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  min-height: 100%;
  padding:    2rem;
  background: white;
  opacity:    1;
  transform:  translateY(-100%);
  transition: transform .5s ease-in-out, opacity .2s linear;

  &.active {
    transform: translateY(0);
  }

  &.inactive {
    opacity: 0;
  }
}


.clouds-mock-background {
  background-color: $clouds-mock;
}