.toolbar {
  border: 1px solid var(--separator-color);
}

.left-vertical-toolbar {
  display: flex;
  flex-flow: column;
  width: calc(10px + var(--button-size, 40px));
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--separator-color);
}

.right-vertical-toolbar {
  display: flex;
  flex-flow: column;
  width: calc(10px + var(--button-size, 40px));
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--separator-color);
}

.canvas-container {
  position: relative;
  overflow: hidden;
  background-color: #808080;
}

.pixel-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.icon-button.selected {
  background-color: var(--default-selected-background-color);
}

.icon-button.selected svg {
  stroke: var(--default-selected-foreground-color);
}

.status-item {
  padding: 0 8px;
  font-size: 12px;
  color: var(--default-foreground-color);
}

.selection-overlay {
  position: absolute;
  pointer-events: none;
  border: 1px dashed #000;
  box-shadow: inset 0 0 0 1px #fff;
  animation: marching-ants 0.5s linear infinite;
}

@keyframes marching-ants {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 8px 0;
  }
}

.repeat-preview-pane {
  position: relative;
  min-width: 200px;
  max-width: 400px;
  overflow: hidden;
}

.repeat-preview-container {
  position: relative;
  overflow: hidden;
}