$board-lighter-color: hsl(41, 36%, 44%);
$board-darker-color: hsl(41, 36%, 40%);

.tenuki-svg-renderer {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;

  &.tenuki-board-nonflat svg,
  &.tenuki-board-nonflat .tenuki-zoom-container,
  &.tenuki-board-nonflat .intersections {
    transform: translate3d(0, 0, 0);
  }

  &.tenuki-board {
    position: relative;
    overflow: hidden;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  &.tenuki-board .line-box {
    stroke: $board-lighter-color;
    fill: transparent;
  }

  &.tenuki-board .hoshi {
    stroke: $board-darker-color;
    fill: $board-darker-color;
  }

  &.tenuki-board .tenuki-inner-container {
    background-color: rgb(235, 201, 138);
  }

  &.tenuki-board .tenuki-zoom-container {
    transition: transform 0.2s ease-in-out;
  }

  &.tenuki-board .intersection,
  &.tenuki-board .intersection .stone {
    fill: transparent;
    stroke: transparent;
  }

  &.tenuki-board .intersection.black .stone {
    fill: black;
    stroke: black;
  }

  &.tenuki-board .intersection.white .stone {
    fill: white;
    stroke: #676767;
  }

  &.tenuki-board .intersection.hovered .stone,
  &.tenuki-board .intersection.dead .stone,
  &.tenuki-board .intersection.dead .stone-shadow {
    opacity: 0.5;
  }

  &.tenuki-board-nonflat .intersection.dead .stone,
  &.tenuki-board-nonflat .intersection.dead .stone-shadow {
    opacity: 0.7;
  }

  &.tenuki-board .intersection.dead.white .stone,
  &.tenuki-board .intersection.hovered.white .stone {
    stroke: black;
  }

  &.tenuki-board .intersection .marker,
  &.tenuki-board .intersection .ko-marker,
  &.tenuki-board .intersection .territory-marker {
    visibility: hidden;
  }

  &.tenuki-board .intersection.black .marker {
    fill: white;
  }

  &.tenuki-board .intersection.white .marker {
    fill: black;
  }

  &.tenuki-board .intersection.ko .ko-marker {
    stroke: black;
  }

  &.tenuki-board .intersection.territory-black .territory-marker {
    fill: black;
  }

  &.tenuki-board .intersection.territory-white .territory-marker {
    fill: white;
  }

  &.tenuki-board .intersection.territory-black .territory-marker,
  &.tenuki-board .intersection.territory-white .territory-marker,
  &.tenuki-board .intersection.ko .ko-marker,
  &.tenuki-board .intersection.played .marker {
    visibility: visible;
  }

  &.tenuki-board-nonflat .intersection.hovered.black .stone,
  &.tenuki-board-nonflat .intersection.hovered.white .stone {
    filter: none !important;
  }

  &.tenuki-board-nonflat .intersection.black .stone,
  &.tenuki-board-nonflat .intersection.dead.black .stone,
  &.tenuki-board-nonflat .intersection.hovered.black .stone {
    stroke: hsl(0, 0%, 28%);
  }

  &.tenuki-board-nonflat .intersection.black .stone-shadow,
  &.tenuki-board-nonflat .intersection.white .stone-shadow {
    fill: hsla(0, 0%, 24%, 0.38);
  }

  &.tenuki-board-nonflat .intersection.dead .stone-shadow {
    fill: hsla(0, 0%, 24%, 0.38 / 2);
  }

  &.tenuki-board-nonflat .intersection.hovered.white .stone-shadow,
  &.tenuki-board-nonflat .intersection.hovered.black .stone-shadow {
    fill: none;
  }

  &.tenuki-board-nonflat .intersection.white .stone,
  &.tenuki-board-nonflat .intersection.dead.white .stone,
  &.tenuki-board-nonflat .intersection.hovered.white .stone {
    stroke: #DEDEDE;
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.occupied,
  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.occupied .intersection-inner-container {
    transition: 0.1s transform;
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.played,
  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.played .intersection-inner-container {
    transition: none;
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.v-shift-up {
    transform: translateY(-1px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.v-shift-upup {
    transform: translateY(-2px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.v-shift-down {
    transform: translateY(1px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.v-shift-downdown {
    transform: translateY(2px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.v-shift-none {
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.h-shift-left .intersection-inner-container {
    transform: translateX(-1px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.h-shift-leftleft .intersection-inner-container {
    transform: translateX(-2px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.h-shift-right .intersection-inner-container {
    transform: translateX(1px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.h-shift-rightright .intersection-inner-container {
    transform: translateX(2px);
  }

  &.tenuki-board-nonflat.tenuki-fuzzy-placement .intersection.h-shift-none .intersection-inner-container {
  }

  .coordinates {
    fill: $board-darker-color;
    font-family: sans-serif;
    font-size: 14px;
  }
}
