.modal {
    --h1-font: var(--interface-font);
}

.style-settings-container:empty {
    display: none;
}

.style-settings-heading[data-level] {
    padding-top: var(--size-4-2);
    padding-bottom: var(--size-4-2);
}

.style-settings-heading[data-level="0"]:not(.is-collapsed) {
    margin-bottom: var(--size-4-2);
}

.style-settings-heading:not([data-level="0"]) {
    border-top: 1px solid rgba(var(--ctp-text), 0.2);
    border-bottom: none;
}

.style-settings-heading:not([data-level="0"], .is-collapsed) {
    margin-bottom: 0;
}

.style-settings-heading:not([data-level="0"])+.style-settings-container {
    border: 1px solid rgba(var(--ctp-text), 0.2);
    border-radius: var(--radius-s);
    padding: var(--size-4-2);
    padding-left: var(--size-4-6);
    background-color: rgba(var(--ctp-crust), 0.3);
    overflow-x: hidden;
}

.style-settings-heading[data-level="0"]:not(.is-collapsed)+.style-settings-container {
    border-bottom: 1px solid var(--background-modifier-border);
}

.style-settings-heading[data-level="1"] {
    border-top-color: var(--background-modifier-border);
}

.style-settings-heading:not([data-level="0"]):nth-child(-n+2),
.style-settings-heading:not([data-level="0"], .is-collapsed)+.style-settings-container+.style-settings-heading,
.style-settings-container .setting-item+.setting-item-heading {
    border-top-width: 0;
}

.style-settings-heading:is([data-id="anuppuccin-theme-settings"],
    [data-id="anuppuccin-theme-settings-extended"]) {
    border-color: hsla(var(--color-accent-hsl), 0.2);

    &:not(.is-collapsed)+.style-settings-container {
        border-color: hsla(var(--color-accent-hsl), 0.2);
    }

    .setting-item-name {
        color: var(--color-accent);
    }
}

.anuppuccin-accent-toggle .style-settings-heading:is([data-id="anuppuccin-theme-settings"],
    [data-id="anuppuccin-theme-settings-extended"]) {
    border-color: rgba(var(--ctp-accent), 0.2);

    &:not(.is-collapsed)+.style-settings-container {
        border-color: rgba(var(--ctp-accent), 0.2);
    }
}

.style-settings-container .style-settings-heading[data-id="anuppuccin-support"] .setting-item-name {
    color: var(--color-accent) !important;
}

.style-settings-container .themed-color-wrapper {
    display: flex;
    gap: var(--size-4-2);
}

.style-settings-container .themed-color-wrapper>div+div {
    margin-top: 0;
}

.style-settings-container .setting-item:is([data-id="anuppuccin-extended-colorschemes-links"],
    [data-id="anp-snippet-minimal-cards-disclaimer"],
    [data-id="anp-background-image-light"],
    [data-id="anp-background-image-dark"],
    [data-id="anuppuccin-theme-donate"],
    [data-id="anuppuccin-theme-source"]) .setting-item-description>div {
    display: none;
}

.style-settings-container .setting-item-control:has(input[type=text]) {
    flex-grow: 0;
    position: relative;

    &::after {
        align-items: center;
        background-color: var(--background-modifier-hover);
        border-radius: var(--radius-s);
        display: flex;
        font-size: 10px;
        font-weight: var(--font-semibold);
        height: calc(var(--input-height) - 12px);
        justify-content: center;
        left: calc(100% - 68px);
        letter-spacing: 0.05em;
        line-height: var(--line-height-normal);
        padding: 0;
        position: absolute;
        text-transform: uppercase;
        top: 6px;
        width: 28px;

        .is-mobile & {
            top: 4px;
        }
    }
}

.style-settings-container .setting-item:is([data-id="tag-border-width"],
    [data-id="callout-radius"],
    [data-id="file-line-width"],
    [data-id="file-margins"],
    [data-id="anp-card-radius"],
    [data-id="anp-card-layout-padding"],
    [data-id="anp-card-header-left-padding"],
    [data-id="anp-table-thickness"],
    [data-id="anp-alt-tab-custom-height"],
    [data-id="anp-depth-tab-gap"],
    [data-id="anp-safari-tab-radius"],
    [data-id="anp-safari-tab-gap"],
    [data-id="anp-safari-border-width"],
    [data-id="anp-stacked-header-width"],
    [data-id="anp-border-radius"],
    [data-id="anp-border-padding"]) .setting-item-control::after {
    content: 'px';
}

.style-settings-container .setting-item:is([data-id="h1-size"],
    [data-id="h2-size"],
    [data-id="h3-size"],
    [data-id="h4-size"],
    [data-id="h5-size"],
    [data-id="h6-size"],
    [data-id="list-indent"],
    [data-id="list-spacing"]) .setting-item-control::after {
    content: 'em';
}

.style-settings-container .setting-item:is([data-id="anp-preview-width-pct"],
    [data-id="anp-table-width-pct"]) .setting-item-control::after {
    content: '%';
}

.setting-item[data-id*="anp-kanban-"]:is([data-id$="spacing"], [data-id$="radius"]) .setting-item-description small::after {
    content: 'px';
}


.setting-item[data-id="anp-colors-section-header"]>.setting-item-info>.setting-item-name {
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, rgb(var(--ctp-rosewater)) 7%, rgb(var(--ctp-flamingo)) 7%, rgb(var(--ctp-flamingo)) 14%, rgb(var(--ctp-mauve)) 14%, rgb(var(--ctp-mauve)) 21%, rgb(var(--ctp-pink)) 21%, rgb(var(--ctp-pink)) 28%, rgb(var(--ctp-red)) 28%, rgb(var(--ctp-red)) 35%, rgb(var(--ctp-maroon)) 35%, rgb(var(--ctp-maroon)) 42%, rgb(var(--ctp-peach)) 42%, rgb(var(--ctp-peach)) 49%, rgb(var(--ctp-yellow)) 49%, rgb(var(--ctp-yellow)) 56%, rgb(var(--ctp-green)) 56%, rgb(var(--ctp-green)) 63%, rgb(var(--ctp-teal)) 63%, rgb(var(--ctp-teal)) 70%, rgb(var(--ctp-sky)) 70%, rgb(var(--ctp-sky)) 77%, rgb(var(--ctp-sapphire)) 77%, rgb(var(--ctp-sapphire)) 85%, rgb(var(--ctp-blue)) 85%, rgb(var(--ctp-blue)) 92%, rgb(var(--ctp-lavender))) 5;
}

.setting-item:is([data-id^="anuppuccin-url-"]) {
    .setting-item-control {
        display: none;
    }

    .setting-item-name::before {
        display: inline-flex;
        font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        height: fit-content;
        padding-right: var(--size-4-2);
        width: var(--size-4-4);
    }
}

.setting-item-heading>.setting-item-info>.setting-item-name>.style-settings-collapse-indicator {
    &::after {
        font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        height: fit-content;
        margin-left: var(--size-4-3);
        width: var(--size-4-4);
    }
}

$linkEmojis: (
    "anuppuccin-url-donate": '\2615',
    //coffee
    "anuppuccin-url-star-repo": '\2b50',
    // star
    "anuppuccin-url-submit-issue": '\1f41e',
    // bug
    "anuppuccin-url-minimal-cards-snippet": '\2b07',
    //down
);

@each $link-data, $link-emoji in $linkEmojis {
    .setting-item[data-id="#{$link-data}"] .setting-item-name::before {
        content: "#{" " + $link-emoji}";
    }
}

//custom heading icons
//heading icon list + selector
$headingIcons: (
    "anuppuccin-theme-settings": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' data-darkreader-inline-stroke='' style='--darkreader-inline-stroke:currentColor;'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'%3E%3C/circle%3E%3Ccircle cx='17.5' cy='10.5' r='.5'%3E%3C/circle%3E%3Ccircle cx='8.5' cy='7.5' r='.5'%3E%3C/circle%3E%3Ccircle cx='6.5' cy='12.5' r='.5'%3E%3C/circle%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'%3E%3C/path%3E%3C/svg%3E"),
    "anuppuccin-theme-settings-extended": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z'%3E%3C/path%3E%3Cpath d='M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7'%3E%3C/path%3E%3Cpath d='M14.5 17.5 4.5 15'%3E%3C/path%3E%3C/svg%3E"),
    "anp-colors-section-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08'%3E%3C/path%3E%3Cpath d='M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z'%3E%3C/path%3E%3C/svg%3E"),
    "anp-editor-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z'%3E%3C/path%3E%3Cpath d='M15 3v6h6'%3E%3C/path%3E%3C/svg%3E"),
    "anp-preview-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E"),
    "anp-plugin-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'%3E%3C/path%3E%3Cpath d='M9 7V2'%3E%3C/path%3E%3Cpath d='M15 7V2'%3E%3C/path%3E%3Cpath d='M6 13V8h12v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4Z'%3E%3C/path%3E%3C/svg%3E"),
    "anp-misc-element-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'%3E%3C/line%3E%3Cline x1='10' y1='22' x2='14' y2='22'%3E%3C/line%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'%3E%3C/path%3E%3C/svg%3E"),
    "anp-show-hide-elements-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z'%3E%3C/path%3E%3Cpath d='m14 7 3 3'%3E%3C/path%3E%3Cpath d='M5 6v4'%3E%3C/path%3E%3Cpath d='M19 14v4'%3E%3C/path%3E%3Cpath d='M10 2v2'%3E%3C/path%3E%3Cpath d='M7 8H3'%3E%3C/path%3E%3Cpath d='M21 16h-4'%3E%3C/path%3E%3Cpath d='M11 3H9'%3E%3C/path%3E%3C/svg%3E"),
    "anp-typography-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 4 4 20 4 20 7'%3E%3C/polyline%3E%3Cline x1='9' y1='20' x2='15' y2='20'%3E%3C/line%3E%3Cline x1='12' y1='4' x2='12' y2='20'%3E%3C/line%3E%3C/svg%3E"),
    "anp-workspace-header": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='5' rx='2'%3E%3C/rect%3E%3Cpath d='M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9'%3E%3C/path%3E%3Cpath d='M10 13h4'%3E%3C/path%3E%3C/svg%3E"),
    "anuppuccin-support": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z'%3E%3C/path%3E%3C/svg%3E"),
    "anp-custom-rainbow-colors": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 19.9V16h3a2 2 0 0 0 2-2v-2H5v2c0 1.1.9 2 2 2h3v3.9a2 2 0 1 0 4 0Z'%3E%3C/path%3E%3Cpath d='M6 12V2h12v10'%3E%3C/path%3E%3Cpath d='M14 2v4'%3E%3C/path%3E%3Cpath d='M10 2v2'%3E%3C/path%3E%3C/svg%3E"),
);

@each $headingName, $headingIcon in $headingIcons {
    .setting-item:is([data-id*=#{$headingName}])>.setting-item-info>.setting-item-name {
        margin-left: -3px;

        >.style-settings-collapse-indicator {
            &::after {
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                background-color: var(--color-accent);
                content: " ";
                display: inline-flex;
                flex-shrink: 0;
                height: calc(var(--font-ui-medium) + 3px);
                width: calc(var(--font-ui-medium) + 3px);
                margin-left: calc(-0.5*var(--size-4-1));
                margin-right: calc(var(--size-4-2) - 3px);
                transition: transform 0.1s;
                vertical-align: text-top;
                margin-right: 0;
            }

            margin-right: 4px;

            &>svg {
                display: none;
            }
        }
    }
}

//custom color styling
.setting-item:is([data-id*="anp-custom-rainbow-colors"])>.setting-item-info>.setting-item-name>.style-settings-collapse-indicator::after {
    background: linear-gradient(to right, rgb(var(--ctp-rosewater)) 7%, rgb(var(--ctp-flamingo)) 7%, rgb(var(--ctp-flamingo)) 14%, rgb(var(--ctp-mauve)) 14%, rgb(var(--ctp-mauve)) 21%, rgb(var(--ctp-pink)) 21%, rgb(var(--ctp-pink)) 28%, rgb(var(--ctp-red)) 28%, rgb(var(--ctp-red)) 35%, rgb(var(--ctp-maroon)) 35%, rgb(var(--ctp-maroon)) 42%, rgb(var(--ctp-peach)) 42%, rgb(var(--ctp-peach)) 49%, rgb(var(--ctp-yellow)) 49%, rgb(var(--ctp-yellow)) 56%, rgb(var(--ctp-green)) 56%, rgb(var(--ctp-green)) 63%, rgb(var(--ctp-teal)) 63%, rgb(var(--ctp-teal)) 70%, rgb(var(--ctp-sky)) 70%, rgb(var(--ctp-sky)) 77%, rgb(var(--ctp-sapphire)) 77%, rgb(var(--ctp-sapphire)) 85%, rgb(var(--ctp-blue)) 85%, rgb(var(--ctp-blue)) 92%, rgb(var(--ctp-lavender)));
}

//collapse animations
//clockwise
.setting-item:is([data-id="anuppuccin-theme-settings"],
    [data-id="anp-colors-section-header"],
    [data-id="anp-editor-header"],
    [data-id="anp-misc-element-header"],
    [data-id="anp-show-hide-elements-header"],
    [data-id="anp-typography-header"],
    [data-id="anp-plugin-header"],
    [data-id="anp-workspace-header"],
    [data-id="anuppuccin-support"],
    [data-id="anp-custom-rainbow-colors"]):not(.is-collapsed)>.setting-item-info>.setting-item-name>.style-settings-collapse-indicator::after {
    transform: rotate(90deg);
    transition: transform 0.1s;
}

//anticlockwise
.setting-item:is([data-id="anuppuccin-theme-settings-extended"],
    [data-id="anp-preview-header"]):not(.is-collapsed)>.setting-item-info>.setting-item-name>.style-settings-collapse-indicator::after {
    transform: rotate(-90deg);
    transition: transform 0.1s;
}

//set icon per selector
@each $headingName, $headingIcon in $headingIcons {
    .setting-item:is([data-id=#{$headingName}])>.setting-item-info>.setting-item-name>.style-settings-collapse-indicator::after {
        -webkit-mask-image: $headingIcon;
    }
}