crosswords/css/main.less

@cell-size: 75px;
@border-color: darkblue;
@arrow-color: darkblue;
@disabled-color: #263340;

.crossword-line {
    display: block;
    height: @cell-size;

    .cell {
        display: inline-block;
        width: @cell-size;
        height: 100%;
        border-left: 1px solid @border-color;
        border-top: 1px solid @border-color;
        overflow: hidden;

        &:last-child {
            border-right: 1px solid @border-color;
        }

        &.cell-disabled {
            background: @disabled-color;
            border-color: @disabled-color;
        }

        &.cell-definition > * {
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 100%;

            .definition {
                display: block;
                font-size: .75em;
                text-align: center;

                & > * {
                    display: inline-block;
                    width: @cell-size;
                }

                &:not(:only-child):not(:first-child) {
                    border-top: 1px solid @border-color;
                }

            }
        }

        &.definition-right-vt, &.definition-right-hz, &.definition-bottom-vt, &.definition-bottom-hz {
            position: relative;
            &:after {
                position: absolute;
                height: @cell-size /6;
                width: @cell-size /6;
                content: " ";
            }
        }

        &.definition-right-vt:after {
            top: 0;
            bottom: 0;
            margin: auto;
            width: @cell-size /8;
            border-top: 1px solid @arrow-color;
            border-right: 1px solid @arrow-color;
        }
        &.definition-right-hz:after {
            top: 0;
            bottom: 0;
            width: @cell-size /8;
            margin: auto;
            border-top: 1px solid @arrow-color;
        }
        &.definition-bottom-vt:after {
            left: 0;
            right: 0;
            margin: auto;
            height: @cell-size /8;
            border-left: 1px solid @arrow-color;
        }
        &.definition-bottom-hz:after {
            left: 0;
            right: 0;
            margin: auto;
            height: @cell-size /8;
            border-left: 1px solid @arrow-color;
            border-bottom: 1px solid @arrow-color;
        }

        &.cell-selected {
            background: #e1e8ff;
        }

        &.cell-input {
            background: #b0c2ff;
        }
    }

    &:last-child .cell {
        border-bottom: 1px solid @border-color;
    }
}