@import '~@/config/style.config.less';

.container {
  position: relative;
  display: grid;
  grid-template-rows: 64px minmax(360px, calc(100% - 120px)) 80px;
  grid-template-columns: 100%;
  width: 100%;
  height: 100%;
  box-shadow: -1px 2px 6px 2px #dcdcdc;
  transition:
    width 0.2s,
    height 0.2s,
    transform 0.2s;
  // transform: matrix(1, 0, 0, 1, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  &-offline {
    grid-template-rows: 60px 40px minmax(360px, calc(100% - 120px)) 80px;
  }
  &-sm {
    position: absolute;
    bottom: 0;
    grid-template-rows: 80px;
    width: 100%;
    height: 80px;
    transform: matrix(1, 0, 0, 1, 0, 0) !important;
    & .schedule {
      display: none;
    }
  }
  &-lg {
    transform: matrix(1, 0, 0, 1, 0, 0) !important;
  }
  &-draging {
    transition: none;
  }
}

.container.container-md {
  width: @md-width;
  height: @md-height;
}

.container.container-electron {
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  box-shadow: none;
}