.canvas-layout{
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.canvas-center{
  display: block;
}

#drawingCanvas{
  display: block;
  touch-action: none;

  background-color: var(--background-color);
  
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: 8px;

  transition:
    background-color var(--theme-transition),
    border-color var(--theme-transition);
}

.canvas-axis{
  position: absolute;
}

.canvas-axis--left{
  position: absolute;
  top: 50%;
  right: 100%;

  width: 0;
  height: 0;
  
  transform: translateY(-50%);
}

.canvas-axis--rotate{
  position: absolute;
  right: 16px;
  bottom: 0px;

  width: max-content;

  transform-origin: center bottom;
  transform: translateX(50%) rotate(-90deg);  
}

.canvas-axis--bottom{
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16px;
}

.canvas-size{
  display: flex;
  align-items: center;
  gap: 8px;
}

.canvas-label,
.canvas-unit{
  font-size: 0.75rem;
  line-height: 1;
}

.canvas-size input{
  width: 88px;
  padding: 4px 8px;

  background-color: var(--background-color);

  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: 8px;

  color: inherit;
  font-size: 1rem;
  line-height: 1;
  text-align: center;

  transition:
    background-color var(--theme-transition),
    border-color var(--theme-transition);
}