:root {
  --diagram-editor-background-color: #fff;
  --diagram-editor-top-menu-background-color: #eee;
  --diagram-editor-top-text-color: #222;
  --diagram-editor-content-text-color: #333;
  --diagram-editor-button-background-color: rgba(0, 0, 0, 0.1);
  --diagram-editor-button-hover-background-color: rgba(0, 0, 0, 0.12);
  --diagram-editor-selection-background-color: rgba(0, 0, 0, 0.04);
  --diagram-editor-selection-hover-background-color: rgba(0, 0, 0, 0.08);
  --diagram-editor-selection-selected-background-gradient: linear-gradient(0deg, #b6e3ff, #6db3e3);
}

html[data-theme="light"] {
  --diagram-editor-background-color: #fff;
  --diagram-editor-top-menu-background-color: #f2f2f2;
  --diagram-editor-top-text-color: #222;
  --diagram-editor-content-text-color: #333;
  --diagram-editor-button-background-color: rgba(0, 0, 0, 0.1);
  --diagram-editor-button-hover-background-color: rgba(0, 0, 0, 0.12);
  --diagram-editor-selection-background-color: rgba(0, 0, 0, 0.04);
  --diagram-editor-selection-hover-background-color: rgba(0, 0, 0, 0.08);
  --diagram-editor-selection-selected-background-gradient: linear-gradient(0deg, #b6e3ff, #6db3e3);
}

html[data-theme="dark"] {
  --diagram-editor-background-color: #444;
  --diagram-editor-top-menu-background-color: #999;
  --diagram-editor-top-text-color: #000;
  --diagram-editor-content-text-color: #f2f2f2;
  --diagram-editor-button-background-color: rgba(220, 220, 220, 0.2);
  --diagram-editor-button-hover-background-color: rgba(220, 220, 220, 0.24);
  --diagram-editor-selection-background-color: rgba(220, 220, 220, 0.1);
  --diagram-editor-selection-hover-background-color: rgba(220, 220, 220, 0.15);
  --diagram-editor-selection-selected-background-gradient: linear-gradient(0deg, #888, #777);
}

#btp-tsumego-diagram-editor-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64vh;
  max-width: 97vw;
  background-color: var(--diagram-editor-background-color);
  box-shadow: 0 0 5vh rgba(0, 0, 0, 0.2);
}

#btp-tsumego-diagram-editor-top-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8%;
  background-color: var(--diagram-editor-top-menu-background-color);
  box-shadow: 0 0 2.4vh rgba(0, 0, 0, 0.2);
  z-index: 401;
}

#btp-diagram-editor-top-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: var(--diagram-editor-top-text-color);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: min(2.8vh, 6.4vw);
  line-height: min(3vh, 6.6vw);
  text-shadow: rgba(140, 140, 140, 0.2) 0 0.3vh 0;
  opacity: 0.7;
}

#btp-diagram-editor-close-icon {
  position: absolute;
  top: 0;
  right: 2%;
  bottom: 0;
  width: 10%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  opacity: 0.8;
}

#btp-tsumego-diagram-editor-content {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  bottom: 10%;
}

#btp-tsumego-diagram-editor-content-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#btp-tsumego-diagram-editor-button-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9%;
  padding-bottom: 2%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  background-color: var(--diagram-editor-background-color);
  box-shadow: 0 0 2.4vh rgba(0, 0, 0, 0.2);
}

.diagram-editor-buttons {
  position: relative;
  height: 70%;
  width: 32%;
  display: flex;
  align-items: center;
  border-radius: 1vh;
  justify-content: center;
  color: var(--diagram-editor-content-text-color);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: min(2.6vh, 5.7vw);
  line-height: min(2.7vh, 5.8vw);
  text-shadow: rgba(140, 140, 140, 0.2) 0 0.3vh 0;
  cursor: pointer;
  opacity: 0.9;
  background-color: var(--diagram-editor-button-background-color);
}

.diagram-editor-buttons:hover {
  opacity: 1;
  background-color: var(--diagram-editor-button-hover-background-color);
}

#diagram-editor-selection-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 98%;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-top: 2%;
}

.selection-container-flex-start {
  justify-content: flex-start;
}

.selection-container-space-around {
    justify-content: space-around;
}

.diagram-editor-selection-rows {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}

.diagram-editor-selection-items {
  position: relative;
  width: 42%;
  height: 0;
  padding: 2%;
  padding-bottom: 52%;
  margin: 1%;
  cursor: pointer;
  border-radius: 1vh;
  background-color: var(--diagram-editor-selection-background-color);
  opacity: 0.94;
}

.diagram-editor-selection-items:hover {
  opacity: 1;
  background-color: var(--diagram-editor-selection-hover-background-color);
}

.diagram-editor-selection-items-selected {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0);
  width: 43%;
  background-image: var(--diagram-editor-selection-selected-background-gradient);
}

.diagram-editor-selection-texts {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12.5%;
  color: var(--diagram-editor-content-text-color);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: min(2.2vh, 3.8vw);
  line-height: min(2.3vh, 3.9vw);
  text-shadow: rgba(140, 140, 140, 0.2) 0 0.3vh 0;
  opacity: 0.7;
}


#diagram-editor-board-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#diagram-editor-board-container {
  position: relative;
  width: 94%;
  height: 0;
  padding-bottom: 94%;
  box-shadow: 0 0 2vh rgba(0, 0, 0, 0.25);
}

#diagram-editor-navigation-container {
  position: relative;
  width: 94%;
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}

.diagram-editor-navigation-buttons {
  position: relative;
  height: 60%;
  width: 14%;
  cursor: pointer;
}


#diagram-editor-mode-selector {
  width: 35%;
  height: 46%;
  text-align: center;
  font-size: min(2.6vh, 5vw);
  line-height: min(3vh, 5.2vw);
  color: #111;
}