/* ==UserStyle==
@name           ichi.moe Catppuccin
@namespace      github.com/catppuccin/ichi.moe
@homepageURL    https://github.com/catppuccin/ichi.moe
@version        1.1.0
@description    Soothing pastel theme for ichi.moe
@author         Catppuccin
@preprocessor   stylus
@updateURL      https://github.com/catppuccin/ichi.moe/raw/main/catppuccin.user.css

@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var checkbox zen "Zen Mode" 0
==/UserStyle== */

@-moz-document domain("ichi.moe") {
    if (theme=="Latte") {
        $rosewater = #dc8a78;
        $flamingo = #dd7878;
        $pink = #ea76cb;
        $mauve = #8839ef;
        $red = #d20f39;
        $maroon = #e64553;
        $peach = #fe640b;
        $yellow = #df8e1d;
        $green = #40a02b;
        $teal = #179299;
        $sky = #04a5e5;
        $sapphire = #209fb5;
        $blue = #1e66f5;
        $lavender = #7287fd;
        $text = #4c4f69;
        $subtext1 = #5c5f77;
        $subtext0 = #6c6f85;
        $overlay2 = #7c7f93;
        $overlay1 = #8c8fa1;
        $overlay0 = #9ca0b0;
        $surface2 = #acb0be;
        $surface1 = #bcc0cc;
        $surface0 = #ccd0da;
        $base = #eff1f5;
        $mantle = #e6e9ef;
        $crust = #dce0e8;
    }

    else if (theme=="Frappe") {
        $rosewater = #f2d5cf;
        $flamingo = #eebebe;
        $pink = #f4b8e4;
        $mauve = #ca9ee6;
        $red = #e78284;
        $maroon = #ea999c;
        $peach = #ef9f76;
        $yellow = #e5c890;
        $green = #a6d189;
        $teal = #81c8be;
        $sky = #99d1db;
        $sapphire = #85c1dc;
        $blue = #8caaee;
        $lavender = #babbf1;
        $text = #c6d0f5;
        $subtext1 = #b5bfe2;
        $subtext0 = #a5adce;
        $overlay2 = #949cbb;
        $overlay1 = #838ba7;
        $overlay0 = #737994;
        $surface2 = #626880;
        $surface1 = #51576d;
        $surface0 = #414559;
        $base = #303446;
        $mantle = #292c3c;
        $crust = #232634;
    }

    else if (theme=="Macchiato") {
        $rosewater = #f4dbd6;
        $flamingo = #f0c6c6;
        $pink = #f5bde6;
        $mauve = #c6a0f6;
        $red = #ed8796;
        $maroon = #ee99a0;
        $peach = #f5a97f;
        $yellow = #eed49f;
        $green = #a6da95;
        $teal = #8bd5ca;
        $sky = #91d7e3;
        $sapphire = #7dc4e4;
        $blue = #8aadf4;
        $lavender = #b7bdf8;
        $text = #cad3f5;
        $subtext1 = #b8c0e0;
        $subtext0 = #a5adcb;
        $overlay2 = #939ab7;
        $overlay1 = #8087a2;
        $overlay0 = #6e738d;
        $surface2 = #5b6078;
        $surface1 = #494d64;
        $surface0 = #363a4f;
        $base = #24273a;
        $mantle = #1e2030;
        $crust = #181926;
    }

    else if (theme=="Mocha") {
        $rosewater = #f5e0dc;
        $flamingo = #f2cdcd;
        $pink = #f5c2e7;
        $mauve = #cba6f7;
        $red = #f38ba8;
        $maroon = #eba0ac;
        $peach = #fab387;
        $yellow = #f9e2af;
        $green = #a6e3a1;
        $teal = #94e2d5;
        $sky = #89dceb;
        $sapphire = #74c7ec;
        $lavender = #b4befe;
        $blue = #89b4fa;
        $text = #cdd6f4;
        $subtext1 = #bac2de;
        $subtext0 = #a6adc8;
        $overlay2 = #9399b2;
        $overlay1 = #7f849c;
        $overlay0 = #6c7086;
        $surface2 = #585b70;
        $surface1 = #45475a;
        $surface0 = #313244;
        $base = #1e1e2e;
        $mantle = #181825;
        $crust = #11111b;
    }

    html,
    body {
        background: theme is "Latte" ? $mantle : $base;
        color: $text;
    }

    footer {
        color: $subtext1;
    }

    span.query-word:hover {
        border-color: $pink;
    }

    span.query-pick {
        color: $subtext1;
    }

    .panel-error {
        background-color: alpha($red, 0.2);
    }

    .highlight {
        background-color: alpha($yellow, 0.2);
    }

    .gloss {
        background-color: theme is "Latte" ? $base : $surface0;
        border-color: theme is "Latte" ? $surface2 : $overlay0;
    }

    .gloss-rtext {
        border-color: theme is "Latte" ? $surface2 : $overlay0;
    }

    .gloss:target {
        box-shadow: theme is "Latte" ? 0 0 5px $surface2 : 0 0 5px $overlay0;
        -webkit-box-shadow: theme is "Latte" ? 0 0 5px $surface2 : 0 0 5px $overlay0;
        -moz-box-shadow: theme is "Latte" ? 0 0 5px $surface2 : 0 0 5px $overlay0;
    }

    a {
        color: $sapphire;
    }

    a.wiktionary-link {
        color: $text;
    }

    a.info-link {
        color: $text;
    }

    a.info-link:hover {
        border-bottom: 1px dashed $sapphire;
    }

    .note-skipped a {
        color: $subtext1;
    }

    .note-skipped a:hover {
        border-color: $subtext1;
    }

    .jspDrag {
        background-color: $lavender;
    }

    .conj-negative {
        color: $red;
    }

    .conj-formal {
        color: $blue;
    }

    .pos-desc {
        color: $green;
    }

    .kanji-table td {
        border: theme is "Latte" ? 1px solid $surface0 : 1px solid $surface1;
    }

    .reading-table tr:nth-of-type(2n) {
        background: theme is "Latte" ? alpha($surface0, 0.5) : alpha($surface1, 0.5);
    }

    .reading-table tr ~ tr > td {
        border-top: theme is "Latte" ? 1px solid $surface2 : 1px solid $overlay0;
    }

    table.kanji-match td {
        border-right: theme is "Latte" ? 1px solid $surface2 : 1px solid $overlay0;
    }

    table.kanji-match tr:nth-of-type(2n) {
        background: theme is "Latte" ? alpha($surface0, 0.5) : alpha($surface1, 0.5);
    }

    tr.match-row-kanji,
    tr.match-row-reading {
        border-bottom: theme is "Latte" ? 1px solid $surface2 : 1px solid $overlay0;
    }

    .kanji-big a {
        color: $subtext1;
    }

    .autocomplete-suggestions {
        border: theme is "Latte" ? 1px solid $surface2 : 1px solid $overlay0;
        background: theme is "Latte" ? $base : $surface0;
    }

    .autocomplete-selected {
        background: theme is "Latte" ? $base : $surface0;
    }

    .autocomplete-suggestions strong {
        color: $lavender;
    }

    .autocomplete-group strong {
        border-bottom: 1px solid $text;
    }

    .button {
        background-color: $sapphire;
        border-color: $sapphire;
        color: $base;
    }

    button:hover,
    button:focus,
    .button:hover,
    .button:focus {
        background-color: darken($sapphire, 25%);
        color: $base;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: $text;
    }

    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    input[type="color"],
    textarea,
    input[type="file"],
    input[type="checkbox"],
    input[type="radio"],
    select,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="date"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="month"]:focus,
    input[type="week"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="time"]:focus,
    input[type="url"]:focus,
    input[type="color"]:focus,
    textarea:focus,
    input[type="file"]:focus,
    input[type="checkbox"]:focus,
    input[type="radio"]:focus,
    select:focus {
        background-color: theme is "Latte" ? $base : $surface0;
        color: $text;
        border-color: theme is "Latte" ? $surface0 : $surface1;
    }

    .header-nav a {
        color: $pink;
    }

    .header-nav a:hover {
        color: darken($pink, 15%);
    }

    .jspTrack {
        background: theme is "Latte" ? $surface0 : $surface1;
    }

    .jspDrag {
        background-color: theme is "Latte" ? $surface1 : $surface2;
    }

    .f-dropdown {
        background-color: theme is "Latte" ? $base : $surface0;
        border-color: $subtext1;
    }

    .f-dropdown::before {
        border-color: transparent transparent $subtext1 transparent;
    }

    span.query-pick {
        color: $text;
    }

    .has-tip {
        color: $subtext1;
        border-color: $overlay1;
    }

    .has-tip:hover,
    .has-tip:focus {
        border-bottom: dotted 1px $sapphire;
        color: $sapphire;
    }

    label {
        color: $subtext1;
    }

    table {
        background: $base;
        border-color: theme is "Latte" ? $surface0 : $surface1;
    }

    table tr th,
    table tr td {
        color: $subtext1;
    }

    .kanji-table td {
        border-color: theme is "Latte" ? $surface0 : $surface1;
    }

    table tr.even,
    table tr.alt,
    table tr:nth-of-type(2n) {
        background: theme is "Latte" ? alpha($surface0, 0.5) : alpha($surface1, 0.5);
    }

    .reading-table tr ~ tr > td {
        border-color: theme is "Latte" ? $surface0 : $surface1;
    }

    table.kanji-match td {
        border-color: theme is "Latte" ? $surface0 : $surface1;
    }

    tr.match-row-kanji,
    tr.match-row-reading {
        border-color: theme is "Latte" ? $surface0 : $surface1;
    }

    img {
        filter: contrast(1.2) opacity(85%);
    }

    /* Options */

    if (zen) {
        .header,
        footer,
        .landing-page {
            display: none;
        }

        div.wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            justify-content: center;
            padding: 50px 0;
            min-height: 100vh;
            margin: 0;
        }

        .gloss-all {
            width: 100%;
            padding: 0 10px;
        }

        #div-ichiran-result {
            padding: 0 10px;
        }

        #div-kanji-form,
        #w-form {
            width: 100%;
        }

        #k-form > div > div,
        #w-form > div > div {
            width: 100%;
            max-width: 304px;
        }
    }
}