@import 'colors';
@import 'fonts';
@import 'mixins';


html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: $whiteSmoke;
  font-family: $baseFont;
  font-size: 15px;
  line-height: 20px;

  background-color: $seaBlue;
}

body > div {
  height: 100%;
}

.layout {
  height: 100%;
  width: 100%;
  position: relative;
}

aside.menu {
  @include shadow-medium;
  z-index: 10;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -$aside - 5;
  width: $aside;
  overflow-x: hidden;
  transition: bezier(left, 120ms);
}

.menu-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  cursor: pointer;
  opacity: 0;
  transition: bezier(opacity, 120ms);
}

&.show-menu {
  aside.menu {
    left: 0;
  }

  .menu-backdrop {
    opacity: 1;
    z-index: 9;

    &:hover {
      opacity: 0.8;
    }
  }
}

.appbar {
  position: absolute;
  height: $appbar;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: $charcoal;
  @include shadow-light;

  .brand {
    float: left;
  }

  .appbar-left {
    float: left;
    display: flex;
    flex-direction: row;
  }

  .appbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  h2 {
    display: inline-block;
    margin: 0;
    line-height: 52px;
    padding: 0 16px;
    color: $lightGrey;
    font-family: $regular;
    font-size: 21px;
    @include ellipsis;
  }

  .exit {
    display: inline-block;
    vertical-align: top;
    color: $grey;
    width: 52px;
    text-align: center;
    transition: bezier(background-color), bezier(color);
    background-color: lighten($charcoal, 4%);

    i {
      line-height: 52px;
    }

    &:hover {
      background-color: lighten($charcoal, 8%);
      color: $lightGrey;
    }
  }

  .appbar-player {
    float: right;
    height: $appbar;
    padding: 0;

    .player-avatar {
      line-height: $appbar;
      display: block;
      float: left;
      margin: 0 16px;
    }

    .logout {
      display: block;
      float: left;
      color: $mediumGrey;
      padding: 0 16px;

      i {
        line-height: $appbar;
      }

      &:hover {
        color: $whiteSmoke;
      }
    }

    .login {
      display: block;
      line-height: $appbar;
      padding: 0 24px;
      color: $mediumGrey;

      &:focus {
        text-decoration: none;
      }

      &:hover {
        color: $whiteSmoke;
      }
    }
  }
}

main {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: $appbar;
}

aside.context {
  @include shadow-light;
  position: absolute;
  top: 16px;
  left: -16px - $aside;
  width: $aside;
  z-index: 2;
  border-radius: 2px;
  transition: bezier(opacity, 250ms), bezier(left, 250ms);
  opacity: 0;
  background-color: $whiteSmoke;
  color: $darkGrey;

  &.visible {
    opacity: 0.9;
    left: 16px;
  }
}

@media screen and (max-width: $break-tablet) {
  .appbar {
    .brand {
      width: 52px;

      svg {
        left: 10px;
      }

      span {
        display: none;
      }
    }

    .appbar-left {
      display: none;
    }

    .appbar-player .player-avatar {
      margin: 0 8px;

      .avatar {
        margin-right: 6px;
      }

      span {
        display: none;
      }
    }
  }
}

.layout-game {
  .appbar {

  }

}


