$reading-background-default: rgb(208, 220, 255);
$reading-background-hover: rgb(101, 138, 255);
$reading-background-selected: rgb(208, 220, 255);

evt-reading+evt-reading:not(.autoLemma) .reading {

    &:not(.hidden),
    &:not(.invisible) {
        margin-left: 2px;
    }
}

.reading {
    .reading__text {
        .w {
            &:after {
                content: " ";
            }

            &:last-of-type:after {
                content: "";
            }
        }
    }

    &:not(.hidden) {
        padding: 0;
        cursor: pointer;

        .reading__text {
            background: $reading-background-default;
        }

        &.over,
        &.over .reading {

            .reading__text,
            .reading .reading__text {
                background: $reading-background-hover;

            }
        }

        .empty {
            padding: 0 5px;
        }


        &.blurred {
            .reading_exponent {
                color: transparent !important;
                text-shadow: 0 0 5px #000 !important;
            }
        }

        &.expansed:not(.invisible) {
            >.reading__text {
                // background: $reading-background-selected;
                border-top: 1px solid rgb(125, 125, 125);

                &:first-child {
                    border-left: 1px solid rgb(125, 125, 125);
                }

                &:last-child {
                    border-right: 1px solid rgb(125, 125, 125);
                }

                border-bottom: 5px solid $critical-apparatus-entry-background-color;
                position: relative;
                z-index: 9;
                margin-bottom: -1px;
            }

            &.blurred,
            &.blurred * {
                color: transparent !important;
                text-shadow: 0 0 5px #000 !important;
                background: transparent !important;
            }
        }

        &.selected {
            .reading__text {
                background: $reading-background-hover;
            }
        }

        .reading_exponent {
            display: inline-block;
            position: relative;
            left: -4px;
            bottom: 3px;
            min-width: 15px;
            min-height: 15px;
            margin: 0;
            padding: 0.05em;
            border-radius: 3px;
            font-size: 0.8em;
            font-weight: bold;
            word-spacing: -0.25em;
            vertical-align: super;
            text-align: center;
        }
    }

    &.invisible {
        >.reading__text {
            background: transparent !important;
            border: none;
            cursor: default;
        }

        >.reading__apparatus {
            display: none !important;
        }
    }

    // Nested
    &:not(.invisible) {
        .reading {
            &:not(.hidden) {
                &:not(.blurred) {
                    .reading__text {
                        border: 1px solid #999;
                    }

                    >.reading__text:hover {
                        border-color: #000;
                    }

                    &.expansed {
                        >.reading__text {
                            border-bottom: 5px solid $critical-apparatus-entry-background-color;
                        }
                    }

                    &.selected {
                        .reading__text {
                            background: $reading-background-hover;
                        }
                    }
                }
            }
        }
    }
}

.filters__reading__color {
    min-width: 10px;
    min-height: 10px;
    width: 10px;
    height: 10px;
    display: inline-block;
}