html,
body {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  width: 100%;
}

#app,
.application,
.application__view {
  height: 100%;
  width: 100%;
}

.application {

  &,
  &__view {
    align-content: center;
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    height: 100%;
    width: 100%;
  }

  &__content {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
  }

  &__panel {
    display: flex;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;

    &--torrent-list {
      transition: transform 0.5s;
      z-index: 2;

      &.is-open {
        transform: translateX($torrent-details--width);
      }
    }

    &--torrent-details {
      right: 100% - $torrent-details--width;
      width: $torrent-details--width;
      z-index: 1;
    }
  }
}
