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

@debug color.scale(colors.$line, $alpha: -30%)

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

.grid-number
  position: absolute
  width: 20px
  height: 20px
  text-align: center
  font-size: 11px

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

  &.complete
    opacity: 0.5

.grid-line
  position: absolute

  &.vertical
    width: 4px
    height: 20px
    border-top: 4px solid colors.$dot
    border-bottom: 4px solid colors.$dot

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

  &:not(.vertical)
    width: 24px
    height: 4px

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

  &.crossed:before, &.auto-crossed:before
    content: "x"
    font-size: 10px
    color: colors.$cross
    position: absolute
    top: -7px

  &: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