.page {
    display: inline-block !important;
    direction: rtl !important;
    // text-overflow: initial !important;
    // white-space: nowrap;
    text-align: justify;
    &.arabic-only {
        padding: 15px;
        text-align-last: justify;
        text-justify: auto;
    }
}

.sura-name {
    font-family: $sura-name-font-family;
    font-size: 120%;
    font-weight: bold;
    .page & {
        font-size: $sura-name-font-size;
        text-align: center;
    }
}

.aya {
    text-overflow: initial !important;
    direction: rtl !important;
    .aya-text {
        font-family: $aya-font-family;
        pointer-events: none;
        .playing {
            color: blue;
        }
    }
    .aya-number {
        &:not(.explanation-aya-number) {
            line-height: $aya-line-height;
            font-family: $aya-number-font-family;
            font-size: $aya-number-font-size;
            color: $aya-number-color;
            margin-right: 4px;
            margin-left: 4px;
            &::before {
                content: '\06DD';
            }
        }
        &.explanation-aya-number {
            color: gray;
            margin-right: 4px;
            &::before {
                // content: '[';
            }
            &::after {
                // content: ']';
                content: '. ';
            }
        }
    }
    &:not(.single-aya), &:not(.search), &:not(.aya-nav) {
        .aya-text {
            line-height: $aya-line-height;
            font-size: $aya-font-size;
        }
    }
    &.aya-nav {
        text-overflow: ellipsis !important;
        .aya-text {
            font-size: 120%;
        }
    }
    &.single-aya {
        .aya-text {
            line-height: $aya-line-height * 1.2;
            font-size: $aya-font-size * 1.2;
            text-align-last: initial;
        }
    }
    &.search {
        .aya-text {
            line-height: $aya-line-height * .8;
            font-size: $aya-font-size * .8;
            text-align-last: initial;
        }
    }
    .explanation-text {
        padding-top: 5px;
        padding-bottom: 5px;
        font-family: $explanation-font-family;
        font-size: $explanation-font-size;
        line-height: $explanation-line-height;
        text-align: justify;
    }
}