/*
 * AJT Japanese CSS 25.4.30.1
 * Copyright: Ajatt-Tools and contributors; https://github.com/Ajatt-Tools
 * License: GNU AGPL, version 3 or later; https://www.gnu.org/licenses/agpl-3.0.html
 */

/* Reset for AJT elements */

[class^="ajt__"],
[class^="ajt__"]::before,
[class^="ajt__"]::after,
[class^="ajt__"] *,
[class^="ajt__"] *::before,
[class^="ajt__"] *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Pitch accent information popups */

.ajt__word_info,
.ajt__furigana_list {
    /* Popup container. Has attributes that describe the word's pitch accent. */
    --acc-color-1: hsl(0, 0%, 65%);
    --acc-color-2: hsl(205 24% 55% / 30%);
    --acc-color-3: hsl(32, 62%, 10%);
    --acc-color-4: hsl(0, 0%, 96%);
    --acc-color-5: hsl(0, 0%, 0%);
    --acc-color-6: hsl(0 80% 40% / 20%);
    --acc-color-7: hsl(0, 0%, 100%);
    --acc-color-8: hsl(7, 74%, 23%);

    position: relative;
    display: inline-block;

    &::after {
        /* Triangle decoration */
        content: "";
        display: block;
        position: absolute;
        bottom: 0%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent var(--acc-color-1) transparent;
    }

    &:hover {
        /* Highlight word on hover */
        background-color: var(--acc-color-2);
        cursor: pointer;
    }

    &::after,
    & .ajt__info_popup {
        /* Hide the popup by default */
        visibility: hidden;
        z-index: -9999;
    }

    &:hover::after,
    &:hover .ajt__info_popup {
        /* Show the popup on hover */
        visibility: visible;
        z-index: 9999;
    }
}

.ajt__furigana_list {
    /* Use a dotted underline to mark popup wrappers with furigana lists. */
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--acc-color-6);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

ol.ajt__readings_list {
    list-style-type: decimal;
}
.ajt__readings_list li::marker {
    color: var(--acc-color-8, red);
}

.ajt__info_popup {
    /* Popup (tooltip) that shows pitch accents. Visible on hover. */
    --min-popup-width: 240px;
    --max-popup-width: calc(100vw - 1rem);
    --max-popup-height: 320px;
    --text-height: 1.4rem;
    --border-size: 1px;

    display: block;
    color: var(--acc-color-3);
    cursor: auto;
    font-weight: normal;
    background-color: var(--acc-color-4);
    position: absolute;
    /* By default, the popup sticks to the right to prevent overflow. */
    top: 100%;
    right: 0%;
    margin: auto;
    padding: 0rem;
    width: max-content;
    max-width: max(80%, var(--max-popup-width));
    min-width: min(var(--max-popup-width), var(--min-popup-width));
    max-height: var(--max-popup-height);
    box-shadow: 2px 2px 8px rgba(0 0 0 / 25%);
    border: var(--border-size) solid var(--acc-color-1);
}
.ajt__info_popup.ajt__left-corner {
    transform: translateX(var(--shift-x, 125px));
}
.ajt__info_popup.ajt__in-middle {
    right: 50%;
    transform: translateX(50%);
}

.ajt__frame_title {
    /* Title bar (says "Information") */
    text-align: center;
    background-color: rgb(197, 197, 197);
    font-size: 1rem;
    user-select: none;
    height: var(--text-height);
    line-height: var(--text-height);
}

.ajt__frame_content {
    /* Popup content (contains a list of pitch accents or a list of readings) */
    overflow: auto;
    display: grid;
    place-items: center;
    max-height: calc(var(--max-popup-height) - var(--text-height) - var(--border-size) * 2);
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.3rem 0;
}
.ajt__frame_content ul {
    list-style-type: none;
}
.ajt__frame_content li + li {
    margin: 0.3rem 0 0;
}

/* Downstep line colors */

.ajt__downstep_heiban {
    --downstep-color: #3366cc;
}
.ajt__downstep_atamadaka {
    --downstep-color: #ff0000;
}
.ajt__downstep_odaka {
    --downstep-color: #008000;
}
.ajt__downstep_nakadaka {
    --downstep-color: #eb8500;
}

/* Downstep lines. */

.ajt__HL {
    box-shadow: inset -2px 2px 0 0px var(--downstep-color, currentColor);
}
.ajt__L {
    box-shadow: inset 0px -2px 0 0px var(--downstep-color, currentColor);
}
.ajt__LH {
    box-shadow: inset -2px -2px 0 0 var(--downstep-color, currentColor);
}
.ajt__H {
    box-shadow: inset 0px 2px 0 0px var(--downstep-color, currentColor);
}

/* Pitch accent tags */

.ajt__pitch_number_tag {
    padding: 1px 3px;
    margin: 0 1px;

    display: inline-block;
    vertical-align: top;
    text-transform: lowercase;
    text-align: center;
    background-color: var(--downstep-color, #333333);
    color: var(--acc-color-4, #fffaf0);
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    line-height: 14px;
    user-select: none;
    font-family:
        "Noto Sans", "Droid Sans", "DejaVu Sans", "Liberation Sans", Roboto, Cantarell, "Segoe UI", Arial, Meiryo,
        Oxygen, Ubuntu, "Helvetica Neue", Helvetica, "Noto Color Emoji", "Noto Sans CJK JP", Sans, sans-serif;
}
