terrassumptions/client/src/components/screens/GamePanel/GuessPane/GuessPane.module.css

.pane {
  height: 100%;
  width: 100%;
  flex: 1;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-rows: 5fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "map map"
    "timer submit";
}

.map {
  height: 100%;
  width: 100%;
  grid-area: map;
}

.submit {
  width: 100%;
  grid-area: submit;
}

.timer {
  padding: 1px;
  display: inline;
  grid-area: timer;
}

.timer--timeout {
  color: red;
}

.resize {
  display: none;
}

@media only screen and (min-width: 600px) and (min-height: 600px) {
  :root {
    --margin: 10px;
    --small: 200px;
    --hovered: 400px;
    --transition-time: 400ms;
    --v-margin: 5px;
    --control-size: 32px;
  }

  .pane {
    position: absolute;
    left: var(--margin);
    bottom: var(--margin);
    z-index: 2;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }

  .pane > * {
    width: 100%;
    background-color: #333;
  }

  .submit {
    flex-basis: var(--control-size);
    flex-grow: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-time) ease-in;
  }

  .map {
    margin-top: var(--v-margin);
    margin-bottom: var(--v-margin);
    opacity: 0.5;
    transition: opacity var(--transition-time) ease-in;
  }

  .timer {
    flex-basis: var(--control-size);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .pane--small {
    height: var(--small);
    width: var(--small);
    transition: height var(--transition-time) ease-out,
      width var(--transition-time) ease-out;
  }

  .pane--small:hover {
    height: var(--hovered);
    width: var(--hovered);
    transition: height var(--transition-time) ease-in,
      width var(--transition-time) ease-in;
  }

  .pane--small:hover > * {
    opacity: 1;
    transition: opacity var(--transition-time) ease-out;
  }

  .pane--medium {
    height: 50vh;
    width: 80vw;
    transition: height var(--transition-time) ease-out,
      width var(--transition-time) ease-out;
  }

  .pane--medium > * {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--transition-time) ease-out;
  }

  .pane--big {
    height: calc(100vh - 2 * var(--margin));
    width: calc(100vw - 2 * var(--margin));
    transition: height var(--transition-time) ease-out,
      width var(--transition-time) ease-out;
  }

  .pane--big > * {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--transition-time) ease-out;
  }

  .resize {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: var(--control-size);
    height: var(--control-size);
    cursor: pointer;
  }

  .resize--medium {
    left: unset;
    right: 0px;
  }
}