/* Data-category is locale independent */
.tag[data-category='gender-feminine'] .tag-label{background-color: #ca4d93;}
.tag[data-category='gender-masculine'] .tag-label{background-color: #4d82e8;}
.tag[data-category='gender-neuter'] .tag-label{background-color: #40ac65;}

/* Category colouring is only valid for top-level tags
   https://github.com/yomidevs/yomitan/blob/master/docs/making-yomitan-dictionaries.md
   So we need to add them again for the relevant categories used in inner tags.
*/
div[data-sc-content="tags"] span[data-sc-category="frequent"] {
    background-color: #5bc0de;
}
div[data-sc-content="tags"] span[data-sc-category="archaism"] {
    background-color: #d9534f;
}

div[data-sc-content="tags"] span {
    font-size: 0.8em;
    font-weight: bold;
    padding: 0.2em 0.3em;
    word-break: keep-all;
    border-radius: 0.3em;
    vertical-align: text-bottom;
    background-color: #565656;
    color: white;
    cursor: help;
    margin-right: 0.25em;
}
div[data-sc-content="extra-info"] {
    margin-left: 0.5em;
}
div[data-sc-content="example-sentence"] {
    background-color: color-mix(in srgb, var(--text-color, var(--fg, #333)) 5%, transparent);
    border-color: var(--text-color, var(--fg, #333));
    border-style: none none none solid;
    border-radius: 0.4rem;
    border-width: calc(3em / var(--font-size-no-units, 14));
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.1rem 0.5rem;
}
span[data-sc-content="bold-text"] {
    font-weight: bold;
}
div[data-sc-content="example-sentence-a"] {
    font-size: 1.1em;
    font-style: italic;
}
div[data-sc-content="example-sentence-b"] {
    font-size: 0.8em;
}
div[data-sc-content="example-sentence-c"] {
    font-size: 0.75em;
    text-align: right;
}
details[data-sc-content^="details-entry"] {
    padding-left: 0;
}
summary[data-sc-content="summary-entry"] {
    user-select: none;
    width: max-content;
    padding: 0.1em 0.2em;
}
ol[data-sc-content="glosses"] {
    list-style-type: upper-roman;
}
[data-sc-content="summary-entry"]::marker {
    color: var(--checkbox-disabled-color);
}

/* Circled numbers (note: they contain a space after the number) */
ol[data-sc-content="glosses"] {
    list-style-type: none;
}
ol[data-sc-content="glosses"] > li:nth-child(1) { list-style-type: "① "; }
ol[data-sc-content="glosses"] > li:nth-child(2) { list-style-type: "② "; }
ol[data-sc-content="glosses"] > li:nth-child(3) { list-style-type: "③ "; }
ol[data-sc-content="glosses"] > li:nth-child(4) { list-style-type: "④ "; }
ol[data-sc-content="glosses"] > li:nth-child(5) { list-style-type: "⑤ "; }
ol[data-sc-content="glosses"] > li:nth-child(6) { list-style-type: "⑥ "; }
ol[data-sc-content="glosses"] > li:nth-child(7) { list-style-type: "⑦ "; }
ol[data-sc-content="glosses"] > li:nth-child(8) { list-style-type: "⑧ "; }
ol[data-sc-content="glosses"] > li:nth-child(9) { list-style-type: "⑨ "; }
ol[data-sc-content="glosses"] > li:nth-child(10) { list-style-type: "⑩ "; }
ol[data-sc-content="glosses"] > li:nth-child(11) { list-style-type: "⑪ "; }
ol[data-sc-content="glosses"] > li:nth-child(12) { list-style-type: "⑫ "; }
ol[data-sc-content="glosses"] > li:nth-child(13) { list-style-type: "⑬ "; }
ol[data-sc-content="glosses"] > li:nth-child(14) { list-style-type: "⑭ "; }
ol[data-sc-content="glosses"] > li:nth-child(15) { list-style-type: "⑮ "; }
ol[data-sc-content="glosses"] > li:nth-child(16) { list-style-type: "⑯ "; }
ol[data-sc-content="glosses"] > li:nth-child(17) { list-style-type: "⑰ "; }
ol[data-sc-content="glosses"] > li:nth-child(18) { list-style-type: "⑱ "; }
ol[data-sc-content="glosses"] > li:nth-child(19) { list-style-type: "⑲ "; }
ol[data-sc-content="glosses"] > li:nth-child(20) { list-style-type: "⑳ "; }
ol[data-sc-content="glosses"] > li:nth-child(21) { list-style-type: "㉑ "; }
ol[data-sc-content="glosses"] > li:nth-child(22) { list-style-type: "㉒ "; }
ol[data-sc-content="glosses"] > li:nth-child(23) { list-style-type: "㉓ "; }
ol[data-sc-content="glosses"] > li:nth-child(24) { list-style-type: "㉔ "; }
ol[data-sc-content="glosses"] > li:nth-child(25) { list-style-type: "㉕ "; }
ol[data-sc-content="glosses"] > li:nth-child(26) { list-style-type: "㉖ "; }
ol[data-sc-content="glosses"] > li:nth-child(27) { list-style-type: "㉗ "; }
ol[data-sc-content="glosses"] > li:nth-child(28) { list-style-type: "㉘ "; }
ol[data-sc-content="glosses"] > li:nth-child(29) { list-style-type: "㉙ "; }
ol[data-sc-content="glosses"] > li:nth-child(30) { list-style-type: "㉚ "; }
ol[data-sc-content="glosses"] > li:nth-child(31) { list-style-type: "㉛ "; }
ol[data-sc-content="glosses"] > li:nth-child(32) { list-style-type: "㉜ "; }
ol[data-sc-content="glosses"] > li:nth-child(33) { list-style-type: "㉝ "; }
ol[data-sc-content="glosses"] > li:nth-child(34) { list-style-type: "㉞ "; }
ol[data-sc-content="glosses"] > li:nth-child(35) { list-style-type: "㉟ "; }
ol[data-sc-content="glosses"] > li:nth-child(36) { list-style-type: "㊱ "; }
ol[data-sc-content="glosses"] > li:nth-child(37) { list-style-type: "㊲ "; }
ol[data-sc-content="glosses"] > li:nth-child(38) { list-style-type: "㊳ "; }
ol[data-sc-content="glosses"] > li:nth-child(39) { list-style-type: "㊴ "; }
ol[data-sc-content="glosses"] > li:nth-child(40) { list-style-type: "㊵ "; }
ol[data-sc-content="glosses"] > li:nth-child(41) { list-style-type: "㊶ "; }
ol[data-sc-content="glosses"] > li:nth-child(42) { list-style-type: "㊷ "; }
ol[data-sc-content="glosses"] > li:nth-child(43) { list-style-type: "㊸ "; }
ol[data-sc-content="glosses"] > li:nth-child(44) { list-style-type: "㊹ "; }
ol[data-sc-content="glosses"] > li:nth-child(45) { list-style-type: "㊺ "; }
ol[data-sc-content="glosses"] > li:nth-child(46) { list-style-type: "㊻ "; }
ol[data-sc-content="glosses"] > li:nth-child(47) { list-style-type: "㊼ "; }
ol[data-sc-content="glosses"] > li:nth-child(48) { list-style-type: "㊽ "; }
ol[data-sc-content="glosses"] > li:nth-child(49) { list-style-type: "㊾ "; }
ol[data-sc-content="glosses"] > li:nth-child(50) { list-style-type: "㊿ "; }

summary[data-sc-content="summary-entry"] {
    list-style-position: inside;
    color: var(--text-color-light4);
}
details[data-sc-content^="details-entry-Grammar"] summary[data-sc-content="summary-entry"],
details[data-sc-content^="details-entry-Etymology"] summary[data-sc-content="summary-entry"] {
    font-weight: bold;
}

/* Make the label bold, and group synonyms inline, separated by ' • ' */
div[data-sc-content="synonyms"] div[data-sc-content="synonyms-label"] {
    font-weight: bold;
    display: block;
    margin-top: 0.3em;
}
div[data-sc-content="synonyms"] ul[data-sc-content="synonyms-list"] {
    list-style: none;
    padding-left: 1.5em;
}
div[data-sc-content="synonyms"] ul[data-sc-content="synonyms-list"] li {
    display: inline;
}
div[data-sc-content="synonyms"] ul[data-sc-content="synonyms-list"] li:not(:last-child)::after {
    content: " • ";
}

details[data-sc-content^="details-entry"][open=""] summary[data-sc-content="summary-entry"] {
    color: var(--text-color);
}
details[data-sc-content^="details-entry"][open=""] summary[data-sc-content="summary-entry"]::marker {
    color: var(--text-color);
}
summary[data-sc-content="summary-entry"]:hover {
    border-radius: 0.4em;
    background-color: var(--notification-background-color-lighter);
    cursor: pointer;
    color: var(--text-color);
}
summary[data-sc-content="summary-entry"] ~ div {
    margin: 0.5em 0;
}
div[data-sc-content="backlink"] {
    font-size: 0.7em;
    text-align: right;
}