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

@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var select accent "Accent" ["Rosewater", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue*", "Sapphire", "Sky", "Lavender"]

@var checkbox quotes "Remove Quotes" 0
@var checkbox header "Remove Header" 0
@var checkbox footer "Remove Footer" 0
@var checkbox tabs "Remove Tabs" 0
@var checkbox dictionary "Remove Dictionary" 0
@var checkbox removeAds "Remove DeepL Ads" 0
@var checkbox removeGlossaryButton "Remove Glossary Button" 0
==/UserStyle== */
@-moz-document url-prefix("https://www.deepl.com/translator") {
    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;
    }

    if (accent == "Rosewater") {
        $accent = $rosewater
    } else if (accent == "Flamingo") {
        $accent = $flamingo
    } else if (accent == "Pink") {
        $accent = $pink
    } else if (accent == "Mauve") {
        $accent = $mauve
    } else if (accent == "Red") {
        $accent = $red
    } else if (accent == "Maroon") {
        $accent = $maroon
    } else if (accent == "Peach") {
        $accent = $peach
    } else if (accent == "Yellow") {
        $accent = $yellow
    } else if (accent == "Green") {
        $accent = $green
    } else if (accent == "Teal") {
        $accent = $teal
    } else if (accent == "Blue") {
        $accent = $blue
    } else if (accent == "Sapphire") {
        $accent = $sapphire
    } else if (accent == "Sky") {
        $accent = $sky
    } else if (accent == "Lavender") {
        $accent = $lavender
    }

    $accent2 = mix($accent, $text, 60%);

    .dl_body {
        color: $subtext1;
    }

    button {
        color: $text;
    }

    [class*="label--"] {
        --inlineLabelColor: theme is "Latte" ? #fff : $crust;
        --outline-color: $accent;
        --background: $overlay1;
        --backgroundHover: mix($overlay1, $base, 90%);

        &[class*="selected--"] {
            --background: $green;
            --backgroundHover: mix($green, $base, 90%);
        }

        [class^="toggle--"] {
            [class^="knob--"] {
                background: theme is "Latte" ? #fff : $crust;
            }
        }
    }

    [class^="wrapper--"] {
        --input-background: $base;
        --input-border-color: $surface1;
        --input-color: $subtext1;
        --button-background: $base;
        --button-border-color: $surface1;
        --button-color: $subtext1;

        [class^="flyout--"] {
            --option-color: $subtext1;
            --option-icon-color: $accent;
            background: $surface0;

            [class^="option--"][class*="unavilable--"] {
                --option-color: $overlay1;
                --option-icon-color: $subtext0;
            }

            &[class*="withBorderOnFlyout--"] {
                --border: 1px solid $surface2;
            }
        }
    }

    [class^="form--"] {
        [class^="submit--"] {
            color: theme is "Latte" ? $base: $crust;
            background: $accent2;

            &:disabled {
                background: alpha($accent2, 0.5);
            }
        }
    }

    .text-deepl-blue {
        color: $accent2;
    }

    .text-deprecated-grey-darker {
        color: $subtext1;
    }

    .bg-white {
        background-color: $base;
    }

    .border-dark-7 {
        border-color: $surface1;
    }

    .dl_body--redesign {
        background-color: $mantle !important;
    }

    [class*="button--"][class*="color_primary--"] {
        border-color: $accent2;
        background-color: $accent2;
        color: $accent2;
    }

    [class*="button--"][class*="variant_contained--"],
    .dark [class*="button--"][class*="variant_contained--"] {
        color: theme is "Latte" ? #fff : $crust;
    }

    [class*="button--"].variant_text--gozza,
    .dark [class*="button--"].variant_text--gozza {
        background-color: transparent;
    }

    /////

    .eSEOtericText {
        color: $overlay1;
    }

    .dl_header {
        &,
        &::before {
            background-color: $crust !important;
        }
    }

    .dl_header_menu_v2__links__item {
        &,
        &:visited,
        &:active,
        &:focus {
            color: $accent2;
        }
    }

    .dl_headerMenu__proButton {
        background-color: $accent;
        color: theme is "Latte" ? #fff : $crust;

        &:hover {
            background-color: darken($accent, 30%);
            color: theme is "Latte" ? #fff : $crust;
        }
    }

    .dl_header_menu_v2__login_button_simple > button {
        color: $accent2;

        &:hover {
            color: $accent;
        }
    }

    .dl_header_menu_v2__buttons__menu > button {
        &::before,
        &::after {
            color: $accent2;
        }

        &:hover {
            &::before,
            &::after {
                color: $accent;
            }
        }
    }

    .dl_headerMenu__freeBadge,
    .dl_headerMenu__alphaBadge {
        background-color: spin($accent, -40deg);
        color: theme is "Latte" ? #fff : $crust;
    }

    .dl_header_menu_v2__links__item.dl_translator_link:not(.nohover):hover {
        color: $accent;
    }

    .dl_header_menu_v2__links__item:not(.nohover):hover,
    .dl_header_menu_v2__links__item.is-active {
        border-bottom-color: $accent;
        color: $accent;
    }

    #new-menu-container {
        [class^="menuContainer--"] {
            background-color: $base;
        }

        [class^="container--"] a {
            color: $text;

            &:hover {
                color: $accent;
            }
        }

        [class^="mainContent--"] + [class^="mainContent--"] {
            border-top-color: $surface1;
        }

        [class^="closeButton"] {
            &::before,
            &::after {
                background-color: $subtext0;
            }

            &:hover {
                &::before,
                &::after {
                    background-color: $accent;
                }
            }
        }
    }

    /////

    .lmt--web .lmt__language_container .lmt__language_container_switch:hover,
    .lmt--web .lmt__language_container .lmt__language_container_switch:focus {
        color: $accent;
    }

    .lmt__docTrans-tab-container {
        [class^="cardButton--"] {
            background-color: $base;
            border-color: $surface1;

            &:not([class*="active--"]):hover {
                background-color: $surface0;
            }
        }

        [class^="textLower--"] {
            color: $overlay2;
        }

        [class*="logo"],
        [class^="textUpper--"] {
            color: $accent;
        }

        [class*="active--"] {
            [class*="logo"],
            [class^="textUpper--"] {
                color: $text;
            }

            [class^="innerLower--"] {
                background-color: $accent;
            }
        }
    }

    .lmt--web .lmt__sides_container,
    #doc-trans-source-panel,
    #doc-trans-target-panel {
        border-color: $surface1;
    }

    .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__language_container,
    .dl_body--redesign .lmt--web .lmt__textarea_container,
    .lmt__doc .lmt__language_container #doc-trans-source-panel,
    [class^="docTrans__help_popup--"],
    #doc-trans-target-panel {
        background: $base;
    }

    #doc-trans-source-panel,
    #doc-trans-target-panel {
        [class^="header--"] {
            border-bottom-color: $surface2;
        }
    }

    .dl_help-popup_assist-text {
        color: $overlay1;
    }

    .dl_body--redesign .lmt--web .lmt__language_select .lmt__language_select__active {
        color: $subtext0;
    }

    .lmt--web .lmt__language_select > .lmt__language_select__active {
        strong {
            color: $accent2;
        }

        &:hover {
            strong,
            .lmt__language_select__opener {
                color: $accent;
            }
        }
    }

    .lmt--web .lmt__textarea {
        &,
        textarea {
            color: $text;
        }
    }

    .lmt--web .lmt__textarea_placeholder_text {
        color: $subtext0;
    }

    .dl_body--redesign .lmt--web .lmt__source_textarea__length_marker {
        color: $subtext0;
    }

    .lmt--web .lmt__textarea.lmt__textarea--inactive {
        color: $overlay2 !important;
    }

    .lmt__source_textarea_overlay .lmt__source_textarea_overlay__sentence--active {
        color: $accent2;
        background-color: $base;
    }

    .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--source .lmt__textarea_container {
        border-right-color: $surface1;
        border-top-color: $surface1;
    }

    .integratedLanguageSelectors .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--target .lmt__textarea_container {
        border-top-color: $surface1 !important;
    }

    .lmt--showing_alternatives .lmt__translations_as_text::before,
    .lmt--web .lmt__translations_as_text h4::before {
        border-top-color: $surface1;
    }

    .lmt--web .lmt__translations_as_text h4 {
        color: $overlay1;
    }

    .dl_body--redesign .lmt--web .lmt__textarea_container.lmt__textarea_container--focus,
    .integratedLanguageSelectors .lmt--web .lmt__sides_container.lmt__sides_container--focus_source .lmt__side_container.lmt__side_container--source .lmt__textarea_container,
    .integratedLanguageSelectors .lmt--web .lmt__sides_container.lmt__sides_container--focus_target .lmt__side_container.lmt__side_container--target .lmt__textarea_container {
        border: 1px solid $accent !important;
    }

    .lmt--web .lmt__language_container .lmt__language_container_switch {
        color: $accent2;
    }

    @keyframes lmt_textarea__busy_animation_ctp {
        0% { box-shadow: inset 0 0 0px 0 $base, inset 0 0 0px 0px rgba(14, 43, 70, 0.0);
        }

        10% { box-shadow: inset 0 0 0px 1px $base, inset 0 0 0px 2px rgba(14, 43, 70, 0.5);
        }

        20% { box-shadow: inset 0 0 1px 3px $base, inset 0 0 1px 4px rgba(14, 43, 70, 0.5),
        }

        40% { box-shadow: inset 0 0 1px 8px $base, inset 0 0 1px 8px rgba(14, 43, 70, 0.3),
        }
    }

    .lmt--active_translation_request.lmt--active_translation_request--with_target_has_content .lmt__side_container--target .lmt__inner_textarea_container {
        animation: lmt_textarea__busy_animation_ctp 1.5s 2.5s linear infinite;
        box-shadow: inset 0 0 1px 14px $base, inset 0 0 0px rgba(0, 0, 0, 0);
    }

    .lmt__toolbar_container,
    [data-testid="deepl-ui-tooltip-container"] {
        span > button:hover {
            background-color: alpha($text, .15) !important;
        }
    }

    .lmt__clear_text_button_wrapper {
        [class*="button--"] {
            &:active:enabled,
            &:hover:enabled {
                color: $accent;
            }
        }
    }

    // language selector
    .lmt__language_select__menu.lmt__language_select__menu_three_columns {
        &,
        input {
            background-color: $base;
        }

        border-color: $surface1;
    }

    .lmt__language_select__menu .lmt__dropdown_item_inside_container,
    .lmt__language_select__menu .lmt__formalitySwitch__menu_items > div > button,
    .lmt__language_select__menu .lmt__formalitySwitch__menu_items > div > div > button,
    .lmt__language_select__menu > div > button,
    .lmt__language_select__menu > div > div > button {
        color: $subtext1;
    }

    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button:hover,
    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button.highlighted {
        background-color: alpha($yellow, 0.3);
    }

    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column {
        border-right-color: $surface1;
    }

    .lmt--web .lmt__language_select__menu_three_columns_close_button {
        color: $accent;
    }

    .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button .tick {
        border-bottom-color: $accent;
        border-right-color: $accent;
    }

    // glossary
    .lmt__glossary_highlight {
        color: $accent;
    }

    .lmt__glossaryButton__desktop {
        border-color: alpha($text, .12)
    }

    .lmt__glossary_button .lmt__glossary_button_label:hover {
        color: $accent;
    }

    .lmt__glossary_editor_mainBar {
        background-color: $accent;
        color: theme is "Latte" ? #fff : $crust;

        .lmt__glossary_editorClose {
            color: theme is "Latte" ? #fff : $crust;
        }
    }

    [dl-test = "glossary-modal"] {
        input {
            background-color: $surface1;
        }

        &[class*="modal--"] {
            background-color: $surface0;
        }

        [class*="content--"] {
            color: $text;
        }
    }

    .lmt__glossary_newEntry_langButton {
        color: $subtext1;

        &:hover {
            color: $accent;
        }
    }

    .lmt_firstEntry-content .lmt__glossary_newEntry_langButton .lmt__glossary_arrowDown {
        border-bottom-color: $overlay2;
        border-right-color: $overlay2;
    }

    .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource,
    .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget {
        border-color: $overlay0;
        color: $text;
    }

    .lmt_firstEntry-content .lmt__glossary_newEntry_langButton {
        border-color: $overlay0;
        background-color: $surface1;
    }

    .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource:focus,
    .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget:focus {
        border-color: $accent;
    }

    .lmt_firstEntry-content .lmt__glossary_acceptButton {
        color: theme is "Latte" ? #fff : $crust;
    }

    .lmt__glossary_acceptButton.lmt__glossary_acceptButton--disabled {
        &,
        &:hover {
            background-color: alpha($accent, 0.5);
        }
    }

    .lmt__language_select__menu {
        background-color: $surface1;
    }

    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button {
        color: $text;

        &:hover {
            background-color: alpha($yellow, 0.2) !important;
        }
    }

    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langName {
        color: $text !important;
    }

    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langCodePair,
    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button .langCodePair .langCode {
        color: $subtext0;
    }

    .lmt__glossary_acceptButton {
        background-color: $accent2;

        &:hover {
            background-color: $accent;
        }
    }

    .lmt__glossary_editor .lmt__glossary_editor_subBar_top .lmt__glossary_editor_glossarySelect .lmt__glossary_editor_glossaryNameWrapper .lmt__glossary_editor_glossaryName {
        color: $text;
    }

    .lmt__glossary_editor .lmt__glossary_editor_subBar_top .lmt__glossary_editor_glossarySelect .lmt__glossary_editor_glossaryNameWrapper .lmt__glossary_editor_glossarySelectChevron.lmt__glossary_arrowDown {
        border-bottom-color: $accent2;
        border-right-color: $accent2;
    }

    .lmt__glossary_editor .lmt__glossary_editor_subBar_top,
    .lmt__glossary_editor_subBar_bottom
    .lmt__glossary_editor [class^="form--"] {
        background-color: $mantle;
    }

    .lmt__glossary_editor_subBar_bottom .lmt__glossary_editor_glossaryAddNewWrapper .lmt__glossary_editor_glossaryAddNew {
        color: $accent;
    }

    .lmt__glossary_editor {
        background-color: $base;
        color: $text;
        border-color: $accent;
    }

    .lmt__glossaryButton__desktop.switchedOn {
        border-color: $accent;
    }

    .lmt__glossary_editorRow_editMode .editInput {
        border-color: $surface1;
        color: $text;
        background-color: $base;
    }

    .lmt__glossary_editor_checkmark {
        border-bottom-color: theme is "Latte" ? $base: $crust;
        border-right-color: theme is "Latte" ? $base: $crust;
    }

    .lmt__glossary_editor_langPairHeadline {
        color: $text;
        border-bottom-color: $surface1;
    }

    .lmt__glossary_editorRow {
        color: $text;
    }

    .lmt__glossary_arrowRightWrapper .lmt__glossary_arrowRight {
        border-bottom-color: $overlay1;
        border-right-color: $overlay1;
    }

    .LanguagePair_arrow {
        color: $overlay2;
        stroke: $overlay2;
    }

    .lmt__glossary_dialog {
        background-color: $surface0;
        color: $text;
        border-color: $surface2;
    }

    .lmt__glossary_editorRow .iconButton {
        color: $text;
    }

    /////

    .combined_app_ad_mobile_and_desktop .dl_ad_pro_container,
    .dl_pro__banner--2021--wrapper,
    [class^="footerOuterContainer"],
    .lmt_quote__inner {
        background-color: $crust;
    }

    .lmt_quote__inner,
    .lmt_quote__text,
    .lmt_quote__source {
        color: $subtext0;
    }

    .lmt_quote__source a {
        color: $accent;
    }

    // popup
    .lmt__edit_text_popup {
        background-color: $surface1;
    }

    .lmt__edit_text_popup li,
    .lmt__edit_text_popup .lmt__edit_text_list_item {
        color: $subtext1;
        border-color: $surface2;
    }

    .lmt__edit_text_popup .lmt__edit_text_popup__entry--active {
        background-color: alpha($yellow, 0.3);
    }

    // dictionary
    #lmt__dict_container {
        [class^="content--"] {
            .tag_lemma a,
            .isForeignTerm .tag_trans,
            .isForeignTerm .tag_trans a
            .isForeignTerm .tag_t,
            .tag_t a {
                color: $accent;
            }

            .sep {
                color: $text;
            }

            .tag_trans {
                color: $subtext1;
            }

            .notascommon {
                color: $overlay1;
            }
        }

        span > span > button:hover {
            color: $accent;
        }
    }

    // quotes
    .lmt_quotes_nav_entry {
        color: $overlay1;
        background-color: $overlay0;
    }

    .lmt_quotes_nav_entry--active {
        color: $accent;
        background-color: $accent;
    }

    // footer
    .dl_footerV2_container {
        [class*="linkList--"] li {
            &:not(:first-of-type) a {
                color: $accent2 !important; // idk why this isn't coloring
            }

            [class*="badge--"] {
                background-color: spin($accent, -40deg) !important;
                color: theme is "Latte" ? #fff : $crust !important;
            }
        }
    }

    /////

    if (theme != Latte) {
      #dl_menu_logo img,
      #dl_menu_translator_simplified img,
      .lmt_quote .lmt_quote__logo,
      .lmt_quote__inner::before,
      [class^="docTrans__help_popup__container--"] [class^="supportedIcons--"] > div,
      .dl_footerV2_container [class^="brandingContainer--"] a > img,
      [class^="socialMediaContainer--"] a > img {
          filter: invert(100%) hue-rotate(180deg);
      }
    }

    /////

    // options
    if (quotes) {
        #dl_quotes_container {
            display: none;
        }
    }

    if (header) {
        .dl_header {
            display: none;
        }
    }

    if (footer) {
        .dl_footerV2_container,
        .showSeoText .eSEOtericText {
            display: none;
        }
    }

    if (tabs) {
        .lmt__doc {
            margin-bottom: 0;

            &Trans-tab-container {
                display: none !important;
                min-height: 100vh;
            }
        }

        #lmt_quotes_article {
            margin-top: 0;
        }

        .dl_translator_page_container {
            align-items: center;
            align-content: center;
            justify-content: center;
        }
    }

    if (dictionary) {
        #lmt__dict_container {
            display: none !important;
        }
    }

    if (quotes != footer) {
        .showSeoText .eSEOtericText {
            margin-bottom: 70px;
        }
    }

    if (quotes && header && footer) {
        body {
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - 2em);
            align-items: center;
            align-content: center;
            justify-content: center;
        }

        .dl_translator_page_container {
            margin: 2em 0;

            > * {
                width: 100vw;
            }
        }
    }

    if (quotes && header && footer && tabs) {
        body {
            min-height: 100vh;
        }
    }

    if (removeAds) {
        #lmt_pro_ad_container {
            display: none;
        }
    }
    
    if (removeGlossaryButton) {
        .lmt__glossaryButton__desktop {
            display: none;
        }
    }
}