/*
  Time Machine Styles
  ------------------------------------------------------------------------------
*/

.time-machine {
  height: 100%;
  flex: 0 0 100%;
  @include no-user-select();
}

.time-machine--split {
  flex: 0 0 calc(100% - 420px);
}

.time-machine--top,
.time-machine--bottom {
  border-radius: $radius;
  width: 100%;
  height: 100%;
  position: absolute;
}

.time-machine--top {
  position: relative;
  background-color: $g0-obsidian;
}

.time-machine--bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* overflow: hidden; */
}

.time-machine--bottom-contents {
  /* overflow: hidden; */
  width: 100%;
  flex: 0 0 100%;
}

.time-machine--view {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 16px;
  
  > .single-stat {
    border-radius: $radius;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.time-machine--view__empty {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/radial-power-level.svg');

  > .cell--view-empty {
    justify-content: flex-end;
  }
}
