:root {
  --topScaleWidth: 30px;
  --topOffset: 0;
  --leftOffset: 0;
}
.mapContainer {
  position: relative;
  display: grid;
  gap: 0;
  grid-template-columns: var(--scaleHeight) var(--mapWidth) var(--scaleHeight);
  grid-template-rows: var(--scaleHeight) var(--mapHeight) var(--scaleHeight);
  grid-template-areas:
    "nw top ne"
    "left map right"
    "sw bot se";
}
.mapContainer {
  & #map {
    grid-area: map;
    position: relative;
  }
  & #xTop,
  & #xBot {
    position: relative;
    max-width: var(--mapWidth);
    min-width: var(--mapWidth);
    overflow: hidden;
    font-size: 8px;
    max-height: 9px;
    & .container {
      max-height: 9px;
      position: relative;
      top: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
  & #yLeft,
  & #yRight {
    position: relative;
    max-height: var(--mapHeight);
    min-height: var(--mapHeight);
    overflow: hidden;
    font-size: 8px;
    max-width: 9px;
    & .container {
      max-width: 9px;
      position: relative;
      left: 0;
      height: var(--leftScaleHeight);
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
    }
  }

  #xTop {
    grid-area: top;
    & .container {
      width: var(--topScaleWidth);
      left: var(--topOffset);
    }
  }
  #xBot {
    grid-area: bot;

    & .container {
      width: var(--botScaleWidth);
      left: var(--botOffset);
    }
  }
  & #yLeft {
    grid-area: left;
    & .container {
      height: var(--leftScaleHeight);
      top: var(--leftOffset);
    }
  }
  & #yRight {
    grid-area: right;
    & .container {
      height: var(--rightScaleHeight);
      top: var(--rightOffset);
    }
  }
  .code {
    font-weight: bold;
    font-size: 10px;
  }
  #sw {
    grid-area: sw;
  }
  #nw {
    grid-area: nw;
  }
  #ne {
    grid-area: ne;
  }
  #se {
    grid-area: se;
  }
}