style/crosswords.less
@import url('cwdimensions.less');
@import url('cwcolors.less');

.crossword-grid {
  --letter-weight: bold;

  display: grid;
  grid-template-rows: repeat(var(--row-count), var(--grid-cell-size));
  grid-template-columns: repeat(var(--column-count), var(--grid-cell-size));

  .cwclue-label {
    font-size: var(--label-size);
    font-weight: 100;
  }

  .cwcell-revealed {
    /* display a triangle base on border intersections */
    border-left: var(--revealed-size) solid transparent;
    border-bottom: var(--revealed-size) solid var(--cell-revealed-color);
  }

  .crossword-clues {
    .crossword-clue-text {
      max-width: var(--clue-text-width);
    }
  }

  gap: var(--grid-line-size);
  border-collapse: collapse;
  // https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
  // Any border or padding does not grow cell size
  box-sizing: border-box;
  // padding around outside of grid
  padding: var(--grid-line-size);
  width: min-content;

  background-color: var(--grid-background-color);
  color: var(--grid-text-color);
  font-family: sans-serif;
  font-size: x-large;

  .crossword-clues {
    .crossword-clue-text {
      max-width: var(--clue-text-width);
    }
  }

  .cwcell {
    // children use 'absolute' positioning, 'relative' to parent
    position: relative;
    aspect-ratio: 1;
    z-index: 0;
    // Grid display still required for correct layout of
    // .cwclue-label, .cwcell-revealed and .cwcell-incorrect
    display: grid;
    // centre text in cell
    align-items: center;
    text-align: center;

    &.dark {
      background-color: var(--cell-background-dark-color);
    }

    &.light {
      background-color: var(--cell-background-light-color);
    }

    font-size: var(--letter-size);
    font-weight: var(--letter-weight);
    // Padding must be disabled
    padding: 0;
    // Border must be disabled
    border: 0;
    height: 100%;
    width: 100%;
    background-color: var(--cell-background-light-color);

    &.active {
      background-color: var(--clue-background-current-color);
      color: var(--grid-text-active-color);
    }

    &.highlighted {
      background-color: var(--cell-background-current-color);
      color: var(--grid-text-highlighted-color);
    }

    &:focus {
      outline-width: medium;
      outline-color: var(--focus-outline-color);
      outline-style: dotted;
      outline-offset: -2px;
      caret-color: transparent;
    }
  }

  // right-triangle with side length var(--revealed-size)
  // in bottom right corner
  .cwcell-revealed {
    // visibility: hidden;
    position: absolute;
    // bottom & right
    place-self: end;
    // click events must pass through to input element
    pointer-events: none;
    // display a triangle base on border intersections
    border-left: var(--revealed-size) solid transparent;
    border-bottom: var(--revealed-size) solid var(--cell-revealed-color);
  }

  // diagonal stripe bottom-left to top-right
  .cwcell-incorrect {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      135deg,
      transparent 47%,
      var(--cell-incorrect-color) 47%,
      var(--cell-incorrect-color) 53%,
      transparent 53%
    );
    // To avoid multiple instances
    background-repeat: no-repeat;
    // click events need to pass through to input element
    pointer-events: none;
    opacity: 0.5;
  }

  .cwclue-label {
    font-size: var(--label-size);
    margin: 1px 0px 0px 1px;
    position: absolute;
    // top & left
    place-self: start;
    // click events need to pass through to input element
    pointer-events: none;
  }

  .cw-across-word-separator {
    box-shadow: inset -3px 0px 0px 0px var(--word-separator-color);
  }

  .cw-down-word-separator {
    box-shadow: inset 0px -3px 0px 0px var(--word-separator-color);
  }

  // Combinations of across and down separators on a single element
  .cw-across-word-separator + .cw-down-word-separator,
  .cw-down-word-separator + .cw-across-word-separator {
    box-shadow: inset -3px -3px 0px 0px var(--word-separator-color);
  }

  .hidden {
    visibility: hidden;
    opacity: 0;
    transition:
      visibility 0s linear 500ms,
      opacity 500ms;
  }

  .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }
}

.crossword-clues {
  display: flex;
  flex-wrap: wrap;

  .crossword-clue-label {
    display: inline-block;
    width: var(--clue-label-width);
    vertical-align: top;
  }

  .crossword-clue-text {
    display: inline-block;
  }

  .current-clue-segment {
    background-color: var(--clue-background-current-color);
  }
}

.cw-italic {
  font-style: italic;
}

.cw-bold {
  font-weight: bold;
}
