@use "sass:color"
@use "colors"

.puzzle-grid
  margin: 1em auto
  position: relative
  user-select: none
  touch-action: manipulation

.grid-number
  position: absolute
  width: var(--gcw)
  height: var(--gcw)
  text-align: center
  font-size: calc(var(--gcw) * 0.6)

  // Vertical center
  line-height: calc(var(--gcw) * 0.9)

  &.error
    color: colors.$cross
    background: color.scale(colors.$cross, $alpha: -90%)

  &.complete
    opacity: 0.5

.grid-line
  position: absolute

  &.vertical
    width: var(--glw)
    height: var(--gcw)
    border-top: var(--glw) solid colors.$dot
    border-bottom: var(--glw) solid colors.$dot

    &.crossed:before, &.auto-crossed:before
      left: 0
      top: 2px

  &:not(.vertical)
    width: var(--gtw)
    height: var(--glw)

  &.selected
    background: var(--c)
  
  &.error
    border: 2px solid colors.$cross

  &.crossed:before, &.auto-crossed:before
    content: "x"
    font-size: calc(var(--gcw) * 0.5)
    color: colors.$cross
    position: absolute
    top: calc(var(--gcw) * -0.35)

main:not(.mobile) .grid-line:hover
  background: var(--c)
  opacity: 0.5

.color-mode .grid-line:not(.selected):not(.crossed):not(.auto-crossed)
  background: var(--c)
  opacity: 0.1

.colorful-cross 
  .grid-line.crossed:before, .grid-line.auto-crossed:before
    color: var(--c)
    opacity: 0.5