/*
///// RIGHT-TO-LEFT PAGES (Arabic) /////
Loaded by header.php only on pages with dir="rtl", after style.css and
vocabulary.css. Those are laid out left to right; this mirrors the parts that
have a side. The English words themselves (the test's pills, the demo chips)
stay left to right, tick first, inside a right-to-left page.
*/

/* Header: the logo on the right, the theme switch on the left */
[dir="rtl"] .theme-toggle {
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 600px) {
    [dir="rtl"] .vocabulary_logo {
        object-position: right center;
    }

    [dir="rtl"] .theme-toggle {
        right: auto;
        left: 15px;
        margin-right: 0;
    }
}

/* The test */
[dir="rtl"] .how-chip,
[dir="rtl"] .words input[type="checkbox"] + label {
    direction: ltr;
}

[dir="rtl"] .how-warn {
    border-left: 0;
    border-right: 4px solid var(--how-warn-edge);
    border-radius: 5px 0 0 5px;
}

[dir="rtl"] .box_title {
    padding: 4px 15px 4px 0;
}

[dir="rtl"] .box_title div {
    right: auto;
    left: 3px;
}

[dir="rtl"] .box_title img {
    margin: 0 0 -2px 5px;
}

[dir="rtl"] .button img[src*="arrow_right"] {
    transform: scaleX(-1);
}

/* Charts are drawn left to right; their labels keep that direction too */
[dir="rtl"] svg {
    direction: ltr;
}

/* The homepage guide */
[dir="rtl"] .home-guide,
[dir="rtl"] .home-guide th {
    text-align: right;
}

[dir="rtl"] .home-guide th {
    padding: 0 0 8px 14px;
}

[dir="rtl"] .home-guide ul {
    padding-left: 0;
    padding-right: 20px;
}

@media (min-width: 768px) {
    [dir="rtl"] .home-fig {
        float: left;
        margin: 6px 30px 20px 0;
    }
}

/* Footer */
[dir="rtl"] .footer_links a {
    margin-left: 0;
    margin-right: 14px;
}

/* Headings and the error messages are set left in style.css */
[dir="rtl"] h1,
[dir="rtl"] .error_reporting {
    text-align: right;
}

/* The guide's table: the word ranges ("من 8,000 إلى 12,000") are longer
   than "8,000 – 12,000", so they may break between their two halves */
[dir="rtl"] .home-guide td {
    padding: 9px 0 9px 14px;
}

[dir="rtl"] .home-guide td:nth-child(2) {
    white-space: normal;
}

/* The footer's "TestVocab is available in:" is English */
[dir="rtl"] .language_selector_footer {
    unicode-bidi: plaintext;
}

/* The result page: icons sit before their words, on the right */
[dir="rtl"] .result-filebar svg,
[dir="rtl"] .result-dl svg {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .result .share-icon {
    margin: 0 -4px 0 10px;
}

[dir="rtl"] .result-link label {
    margin: 0 2px 7px 0;
}

/* The link itself is an address, read left to right */
[dir="rtl"] .result-link button {
    direction: ltr;
    padding: 11px 14px 11px 12px;
}

[dir="rtl"] .result-link {
    text-align: right;
}

/* Statistics: the ranking table and the note (their base styles are in
   statistics.php). Numbers keep to the side nearest their column's other
   figures, as in the left-to-right table; Arabic country names are long
   ("المملكة العربية السعودية"), so they may wrap. */
[dir="rtl"] table.c-tbl th {
    text-align: right;
    padding: 0 0 7px 14px;
}

[dir="rtl"] table.c-tbl td {
    padding: 6px 0 6px 14px;
}

[dir="rtl"] table.c-tbl td:nth-child(2) {
    white-space: normal;
}

[dir="rtl"] table.c-tbl td.num,
[dir="rtl"] table.c-tbl td.ci,
[dir="rtl"] table.c-tbl th[style*="text-align:right"] {
    text-align: left !important;
}

[dir="rtl"] table.c-tbl .c-barcell,
[dir="rtl"] table.c-tbl tr > *:last-child {
    padding-left: 0;
}

@media (max-width: 560px) {
    [dir="rtl"] table.c-tbl th,
    [dir="rtl"] table.c-tbl td {
        padding-right: 0;
        padding-left: 10px;
    }
}

[dir="rtl"] .c-note,
[dir="rtl"] p.m-aside {
    border-left: 0;
    padding-left: 0;
    border-right: 2px solid var(--border-strong);
    padding-right: 15px;
}