/*
 * SPDX-License-Identifier: BSD-2-Clause
 * SPDX-FileCopyrightText: 2025 Arjen Hiemstra <ahiemstra@heimr.nl>
 */

/*
 * Buttons and button-like controls.
 */

:root {
    --button-active-text-color: custom-color("kcolorscheme", "active", "button", "foreground", "text");
    --button-active-background-color: custom-color("kcolorscheme", "active", "button", "background", "normal");
    --button-active-border-color: custom-color("kcolorscheme", "active", "button", "decoration", "frame");
    --button-active-highlight-color: mix(var(--button-active-background-color), var(--highlight-color), 0.333);
    --button-active-border-highlight-color: var(--highlight-color);
    --button-active-checked-color: mix(var(--button-active-background-color), var(--button-active-text-color), 0.125);
    --button-active-focus-color: modify-color(custom-color("kcolorscheme", "active", "button", "decoration", "focus") set-alpha var(--focus-outline-alpha));

    --button-active-header-border-color: custom-color("kcolorscheme", "active", "header", "decoration", "frame");
    --button-active-header-highlight-color: mix(var(--header-background-color), var(--highlight-color), 0.333);
    --button-active-header-checked-color: mix(var(--header-background-color), var(--header-text-color), 0.125);

    --button-inactive-text-color: custom-color("kcolorscheme", "inactive", "button", "foreground", "text");
    --button-inactive-background-color: custom-color("kcolorscheme", "inactive", "button", "background", "normal");
    --button-inactive-border-color: custom-color("kcolorscheme", "inactive", "button","decoration", "frame" );
    --button-inactive-highlight-color: mix(var(--button-inactive-background-color), var(--highlight-color), 0.5);
    --button-inactive-checked-color: mix(var(--button-inactive-background-color), var(--button-inactive-text-color), 0.2);

    --button-disabled-text-color: custom-color("kcolorscheme", "disabled", "button", "foreground", "text");
    --button-disabled-background-color: custom-color("kcolorscheme", "disabled", "button", "background", "normal");
    --button-disabled-border-color: custom-color("kcolorscheme", "disabled", "button", "decoration", "frame");
    --button-disabled-highlight-color: mix(var(--button-disabled-background-color), var(--highlight-color), 0.333);

    --button-border: 1px solid var(--button-active-border-color);
    --button-border-highlight: 1px solid var(--button-active-border-highlight-color);
    --button-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    --button-focus: 2px solid var(--button-active-focus-color);

    /* Values derived from Breeze QStyle metrics */
    --button-default-size: 32px; /* 16 + 2 * 6 + 2 * 2  */
    --button-padding: 8px; /* 6 + 2 */
    --button-spacing: 4px;

    --tab-background-color: mix(var(--view-background-color), var(--view-text-color), 0.17);
    --tab-text-color: var(--view-text-color);
    --tab-open-background-color: var(--window-background-color);
    --tab-open-text-color: var(--window-text-color);
    --tab-disabled-text-color: var(--button-disabled-text-color);
    --tab-disabled-background-color: var(--button-disabled-background-color);

    --tab-highlight-size: 3px;

    /* Match Breeze QStyle color */
    --combobox-popup-background-color: mix(var(--window-background-color), var(--view-background-color), 0.3);
    --combobox-popup-highlight-color: mix(var(--combobox-popup-background-color), var(--highlight-color), 0.333);
    --combobox-popup-text-color: var(--window-text-color);
}

button,
toolbutton,
combobox,
roundbutton,
delaybutton,
toolbutton.raised
{
    width: var(--button-default-size);
    height: var(--button-default-size);
    spacing: var(--button-spacing);
    padding: var(--button-padding);
    border-radius: var(--corner-radius);

    layout-alignment: content fill fill 0;
    text-alignment-horizontal: center;
    icon-alignment-horizontal: center;

    color: var(--button-active-text-color);
    border: var(--button-border);
    background-color: var(--button-active-background-color);

    &:checked
    {
        border: var(--button-border);
        background-color: var(--button-active-checked-color);
    }

    &:hovered
    {
        border-color: var(--button-active-border-highlight-color);
    }

    &:visual-focus
    {
        border-color: var(--button-active-border-highlight-color);
        outline: var(--button-focus);
    }

    &:disabled
    {
        color: var(--button-disabled-text-color);
        background-color: var(--button-disabled-background-color);
        border-color: var(--button-disabled-border-color);
        box-shadow: none;
    }

    &[display="text-under-icon"] {
        text-alignment-vertical: stack-center;
        icon-alignment-vertical: stack-center;
    }

    &.with-menu > indicator {
        layout-alignment: content end center 0;
        width: var(--icon-size-small);
        height: var(--icon-size-small);
        icon-name: "arrow-down";
        icon-color: var(--button-active-text-color)
    }
}

button,
roundbutton,
delaybutton
{
    box-shadow: var(--button-shadow);
}

button:pressed,
toolbutton:pressed,
combobox:pressed,
roundbutton:pressed,
delaybutton:pressed,
toolbutton.raised:pressed
{
    border-color: var(--button-active-border-highlight-color);
    background-color: var(--button-active-highlight-color);
    box-shadow: none;
}

button:checked,
roundbutton:checked
{
    box-shadow: none;
}

toolbutton,
button.flat,
combobox.flat,
roundbutton.flat
{
    border: none;
    background: none;
    box-shadow: none;

    &:hovered {
        border: var(--button-border-highlight);
    }

    &:visual-focus {
        border: var(--button-border-highlight);
    }

    &:pressed {
        border: var(--button-border-highlight);
        background-color: var(--button-active-highlight-color);
    }

    toolbar.header &:checked,
    applicationheader &:checked
    {
        border-color: var(--button-active-header-border-color);
        background-color: var(--button-active-header-checked-color);
    }

    toolbar.header &:pressed,
    applicationheader &:pressed
    {
        background-color: var(--button-active-header-highlight-color);
    }

    &:disabled {
        border: none;
        background: none;
    }
}

toolbutton
{
    /* Ensure default toolbuttons end up with 32px height, not 34px. */
    icon-size: 24px;
    padding: var(--medium-spacing) var(--small-spacing);
}

toolbutton.raised
{
    icon-size: var(--icon-size-small);
    padding: var(--button-padding);
}

roundbutton
{
    border-radius: var(--button-default-size);
}

combobox
{
    layout-alignment: content fill center 0;
    text-alignment: content fill center 0;
    icon-alignment: content start center 0;
    box-shadow: var(--button-shadow);

    & > indicator {
        layout-alignment: content end center 0;
        width: var(--icon-size-small);
        height: var(--icon-size-small);
        icon-name: "arrow-down-symbolic";
        icon-color: var(--button-active-text-color);
    }

    &.editable,
    &.flat.editable
    {
        background-color: var(--view-background-color);
        border: 1px solid var(--view-border-color);
        box-shadow: none;

        &:hovered {
            border-color: var(--button-active-border-highlight-color);
        }

        &:pressed {
            border-color: var(--button-active-border-highlight-color);

            & > indicator {
                icon-color: var(--button-active-border-highlight-color);
            }
        }

        &:visual-focus {
            border-color: var(--button-active-border-highlight-color);
        }

        &:disabled {
            background-color: var(--view-disabled-background-color);
            color: var(--view-disabled-text-color);
            border-color: var(--view-disabled-border-color);
        }
    }
}

popup.combobox
{
    padding: 0px;
    background-color: var(--combobox-popup-background-color);

    itemdelegate:highlight
    {
        background-color: var(--combobox-popup-highlight-color);
        border-color: var(--highlight-color);
        color: var(--combobox-popup-text-color);
    }
}

toolseparator {
    background-color: var(--button-active-border-color);

    &.horizontal {
        width: var(--large-element-size);
        height: 1px;
        inset: 0px var(--small-spacing);
    }

    &.vertical {
        width: 1px;
        height: var(--large-element-size);
        inset: var(--small-spacing) 0px;
    }

    toolbar.header &,
    applicationheader &
    {
        background-color: var(--button-active-header-border-color);
    }
}

tabbutton {
    width: var(--button-default-size);
    height: var(--button-default-size);
    spacing: 0px;
    padding: 0px;
    border-radius: var(--corner-radius);
    background-color: var(--tab-background-color);
    border: 1px solid var(--tab-background-color);
    color: var(--tab-text-color);

    icon-alignment: content start center 0;
    text-alignment-horizontal: center;
    icon-alignment-horizontal: center;

    &[direction="top"] {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: var(--button-border);
    }

    &[direction="bottom"] {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top: var(--button-border);
    }

    &:disabled {
        background-color: var(--tab-disabled-background-color);
        color: var(--button-disabled-text-color);
    }

    &:hovered
    {
        background-color: var(--button-active-highlight-color);
        border: 1px solid var(--button-active-highlight-color);
    }

    &:pressed
    {
        border-color: var(--button-active-border-highlight-color);
        background-color: var(--button-active-highlight-color);
        box-shadow: none;
    }

    &:checked
    {
        background-color: var(--tab-open-background-color);
        color: var(--tab-open-text-color);
        border: var(--button-border);

        &[direction="top"] {
            border-top-width: var(--tab-highlight-size);
            border-top-color: var(--highlight-color);
            border-bottom-color: var(--tab-open-background-color);
        }

        &[direction="bottom"] {
            border-bottom-width: var(--tab-highlight-size);
            border-bottom-color: var(--highlight-color);
            border-top-color: var(--tab-open-background-color);
        }
    }
}

tabbar {
    spacing: 0px;
}

delaybutton {
    & > fill {
        border-radius: var(--corner-radius);
        border: var(--button-border-highlight);
        background-color: var(--highlight-color);
    }
}

tumbler {
    width: 60px;
    height: 200px;
    background-color: var(--view-background-color);

    text {
        text-alignment-horizontal: center;
        color: mix(var(--view-background-color), var(--view-text-color), 0.75);

        &:highlighted {
            color: mix(var(--highlight-color), var(--view-text-color), 0.6);
        }
    }
}

button.changed,
toolbutton.changed,
combobox.changed,
roundbutton.changed,
delaybutton.changed {
    background-color: var(--changed-background);
    border: 1px solid var(--changed-foreground);
}
