/* ———————————————— CANVAS CONTAINER ———————————————— */

.canvas--container {
  position: relative;
  z-index: 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.canvas--container.contract {
  padding-left: var(--menu-width);
}

.canvas--container .canvas--drawing {
  margin-top: var(--menu-height);
  min-width: calc(100vh - var(--menu-width));
  min-height: calc(100vh - var(--menu-height));
  max-height: calc(100vh - var(--menu-height));
  overflow: scroll;
}

.canvas--container .canvas--wrapper .canvas--drawing {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(100vh - var(--menu-height));
  overflow: hidden;
}

.canvas--drawing {
  padding-bottom: 2rem !important;
}

.canvas--container .canvas--drawing.bin {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  gap: 2px;
  padding-right: 1.5rem;
}

.canvas--container .canvas--drawing.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.canvas--container .canvas--drawing.xy {
  display: block;
  position: relative;
}



/* ———————————————— YEAR ———————————————— */

.canvas--container .canvas--drawing.bin .year-container {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  gap: 2px;
}

.canvas--container .canvas--drawing.bin .year-container .year-info.visible {
  border-top: 2px var(--txt-color) solid;
  text-align: center;
  color: var(--txt-color);
  background: none;
}

.canvas--container .canvas--drawing.bin .year-container .year-info {
  margin: 4px 0 12px;
  border-top: none;
  background: repeating-linear-gradient(to right,
      var(--txt-color) 0 2%,
      transparent 2% 8.45%);
  height: 2px;
  color: transparent;
}

.canvas--drawing.bin,
.canvas--drawing.xy {
  cursor: grab;
}

.canvas--drawing.dragging {
  cursor: grabbing;
}



/* ———————————————— ART WORK ———————————————— */

.art--work {
  cursor: pointer;
  overflow: hidden;
}

.art--work img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.33s ease-in-out;
}

.art--work img:hover {
  transform: scale(1.25);
}


/* ———————————————— SCROLLBAR ———————————————— */

.canvas--drawing {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.canvas--drawing::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scrollbar {
  width: 0;
  height: 0;
  position: absolute;
  background-color: white;
}

.scrollbar.horizontal {
  left: 0;
  bottom: 0;
  height: 1rem;
  width: 100vw;
}

.scrollbar.vertical {
  right: 0;
  bottom: 0;
  width: 1rem;
  height: calc(100vh - var(--menu-height));
}

.other--menu.contract~#canvas--wrapper .scrollbar.horizontal {
  left: var(--menu-width);
  width: calc(100vw - var(--menu-width));
}

.scrollbar--handle {
  z-index: 50;
  position: absolute;
  background-color: var(--txt-color);
  border: solid 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.scrollbar--handle:hover {
  background-color: var(--txt-color-l);
}

.zoom--button {
  all: unset;
  display: none;
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background-color: var(--txt-color);
  border-radius: 0.25rem;
  border: solid 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.zoom--button.less {
  top: 5.5rem;
}

.canvas--drawing.bin~.zoom--button,
.canvas--drawing.grid~.zoom--button {
  display: flex;
}



/* ———————————————— INTRO TEXT ———————————————— */

.canvas--container .canvas--intro {
  position: absolute;
  top: 0;
  max-width: 500px;
  padding: 2rem;
}

.canvas--container .canvas--intro.hidden {
  display: none;
}

.canvas--container .canvas--intro.small {
  height: 100%;
  flex-direction: column;
  justify-content: center;
  display: none;
}