@layer platform {

    button,
    .menu-item,
    a.button-like,
    .toolbar .icon-button,
    .icon-button,
    button.basic {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 0;
        border-radius: 0.25rem;
        overflow: clip;
        font-weight: 500;
        font-size: 0.875rem;
        font-family: var(--theme-body-font-family);
        line-height: 1rem;
        text-overflow: ellipsis;
        user-select: none;
        transition: 100ms linear;
        transition-property: background, color, border;
        /** Button padding and density */
        /** Icon in buttons */
    }

    button:disabled,
    .menu-item:disabled,
    a.button-like:disabled,
    .icon-button:disabled {
        cursor: unset;
        background-color: var(--theme-bg-disabled-button) !important;
        color: var(--theme-fg-disabled-text) !important;
    }

    button.btn--active,
    .btn--active.menu-item,
    a.btn--active.button-like,
    .btn--active.icon-button {
        background-color: var(--theme-primary-lighter) !important;
        /* z-index: 1; */
    }

    button .ripple,
    .menu-item .ripple,
    a.button-like .ripple,
    .icon-button .ripple {
        opacity: 0.1;
        background-color: var(--ripple-color, currentColor);
    }

    button:not(.icon-button),
    .menu-item:not(.icon-button),
    a.button-like:not(.icon-button),
    .icon-button:not(.icon-button) {
        gap: 0.5rem;
        padding: 0.25rem 1rem;
        min-height: 2rem;
    }

    button:not(.icon-button):has(> .material-icons:first-child),
    .menu-item:not(.icon-button):has(> .material-icons:first-child),
    a.button-like:not(.icon-button):has(> .material-icons:first-child),
    .toolbar .icon-button:not(.icon-button):has(> .material-icons:first-child),
    .icon-button:not(.icon-button):has(> .material-icons:first-child),
    a.basic.button-like:not(.icon-button):has(> .material-icons:first-child),
    .toolbar .basic.icon-button:not(.icon-button):has(> .material-icons:first-child),
    .basic.icon-button:not(.icon-button):has(> .material-icons:first-child),
    button.basic:not(.icon-button):has(> .material-icons:first-child) {
        padding-left: 0.625rem;
    }

    button:not(.icon-button):has(> .material-icons:last-child),
    .menu-item:not(.icon-button):has(> .material-icons:last-child),
    a.button-like:not(.icon-button):has(> .material-icons:last-child),
    .toolbar .icon-button:not(.icon-button):has(> .material-icons:last-child),
    .icon-button:not(.icon-button):has(> .material-icons:last-child),
    a.basic.button-like:not(.icon-button):has(> .material-icons:last-child),
    .toolbar .basic.icon-button:not(.icon-button):has(> .material-icons:last-child),
    .basic.icon-button:not(.icon-button):has(> .material-icons:last-child),
    button.basic:not(.icon-button):has(> .material-icons:last-child) {
        padding-right: 0.625rem;
    }

    button:not(.icon-button).density-m1,
    .menu-item:not(.icon-button).density-m1,
    a.button-like:not(.icon-button).density-m1,
    .icon-button:not(.icon-button).density-m1 {
        gap: 0.5rem;
        padding: 0.5rem 1.5rem;
        min-height: auto;
    }

    button:not(.icon-button).density-m1:has(> .material-icons:first-child),
    .menu-item:not(.icon-button).density-m1:has(> .material-icons:first-child),
    a.button-like:not(.icon-button).density-m1:has(> .material-icons:first-child),
    .toolbar .icon-button:not(.icon-button).density-m1:has(> .material-icons:first-child),
    .icon-button:not(.icon-button).density-m1:has(> .material-icons:first-child),
    a.basic.button-like:not(.icon-button).density-m1:has(> .material-icons:first-child),
    .toolbar .basic.icon-button:not(.icon-button).density-m1:has(> .material-icons:first-child),
    .basic.icon-button:not(.icon-button).density-m1:has(> .material-icons:first-child),
    button.basic:not(.icon-button).density-m1:has(> .material-icons:first-child) {
        padding-left: 1.25rem;
    }

    button:not(.icon-button).density-m1:has(> .material-icons:last-child),
    .menu-item:not(.icon-button).density-m1:has(> .material-icons:last-child),
    a.button-like:not(.icon-button).density-m1:has(> .material-icons:last-child),
    .toolbar .icon-button:not(.icon-button).density-m1:has(> .material-icons:last-child),
    .icon-button:not(.icon-button).density-m1:has(> .material-icons:last-child),
    a.basic.button-like:not(.icon-button).density-m1:has(> .material-icons:last-child),
    .toolbar .basic.icon-button:not(.icon-button).density-m1:has(> .material-icons:last-child),
    .basic.icon-button:not(.icon-button).density-m1:has(> .material-icons:last-child),
    button.basic:not(.icon-button).density-m1:has(> .material-icons:last-child) {
        padding-right: 1.25rem;
    }

    button:not(.icon-button).density-1,
    .menu-item:not(.icon-button).density-1,
    a.button-like:not(.icon-button).density-1,
    .icon-button:not(.icon-button).density-1 {
        gap: 0.25rem;
        padding: 0.25rem 0.75rem;
        min-height: auto;
    }

    button:not(.icon-button).density-1:has(> .material-icons:first-child),
    .menu-item:not(.icon-button).density-1:has(> .material-icons:first-child),
    a.button-like:not(.icon-button).density-1:has(> .material-icons:first-child),
    .toolbar .icon-button:not(.icon-button).density-1:has(> .material-icons:first-child),
    .icon-button:not(.icon-button).density-1:has(> .material-icons:first-child),
    a.basic.button-like:not(.icon-button).density-1:has(> .material-icons:first-child),
    .toolbar .basic.icon-button:not(.icon-button).density-1:has(> .material-icons:first-child),
    .basic.icon-button:not(.icon-button).density-1:has(> .material-icons:first-child),
    button.basic:not(.icon-button).density-1:has(> .material-icons:first-child) {
        padding-left: 0.375rem;
    }

    button:not(.icon-button).density-1:has(> .material-icons:last-child),
    .menu-item:not(.icon-button).density-1:has(> .material-icons:last-child),
    a.button-like:not(.icon-button).density-1:has(> .material-icons:last-child),
    .toolbar .icon-button:not(.icon-button).density-1:has(> .material-icons:last-child),
    .icon-button:not(.icon-button).density-1:has(> .material-icons:last-child),
    a.basic.button-like:not(.icon-button).density-1:has(> .material-icons:last-child),
    .toolbar .basic.icon-button:not(.icon-button).density-1:has(> .material-icons:last-child),
    .basic.icon-button:not(.icon-button).density-1:has(> .material-icons:last-child),
    button.basic:not(.icon-button).density-1:has(> .material-icons:last-child) {
        padding-right: 0.375rem;
    }

    button:not(.icon-button).density-2,
    .menu-item:not(.icon-button).density-2,
    a.button-like:not(.icon-button).density-2,
    .icon-button:not(.icon-button).density-2 {
        gap: 0.125rem;
        padding: 0.25rem 0.5rem;
        min-height: auto;
    }

    button:not(.icon-button).density-2:has(> .material-icons:first-child),
    .menu-item:not(.icon-button).density-2:has(> .material-icons:first-child),
    a.button-like:not(.icon-button).density-2:has(> .material-icons:first-child),
    .toolbar .icon-button:not(.icon-button).density-2:has(> .material-icons:first-child),
    .icon-button:not(.icon-button).density-2:has(> .material-icons:first-child),
    a.basic.button-like:not(.icon-button).density-2:has(> .material-icons:first-child),
    .toolbar .basic.icon-button:not(.icon-button).density-2:has(> .material-icons:first-child),
    .basic.icon-button:not(.icon-button).density-2:has(> .material-icons:first-child),
    button.basic:not(.icon-button).density-2:has(> .material-icons:first-child) {
        padding-left: 0.25rem;
    }

    button:not(.icon-button).density-2:has(> .material-icons:last-child),
    .menu-item:not(.icon-button).density-2:has(> .material-icons:last-child),
    a.button-like:not(.icon-button).density-2:has(> .material-icons:last-child),
    .toolbar .icon-button:not(.icon-button).density-2:has(> .material-icons:last-child),
    .icon-button:not(.icon-button).density-2:has(> .material-icons:last-child),
    a.basic.button-like:not(.icon-button).density-2:has(> .material-icons:last-child),
    .toolbar .basic.icon-button:not(.icon-button).density-2:has(> .material-icons:last-child),
    .basic.icon-button:not(.icon-button).density-2:has(> .material-icons:last-child),
    button.basic:not(.icon-button).density-2:has(> .material-icons:last-child) {
        padding-right: 0.25rem;
    }

    button:not(.icon-button) .material-icons,
    .menu-item:not(.icon-button) .material-icons,
    a.button-like:not(.icon-button) .material-icons,
    .icon-button:not(.icon-button) .material-icons {
        flex: none;
    }

    .toolbar .icon-button,
    .toolbar button,
    a.stroked.button-like,
    .stroked.icon-button,
    button.stroked {
        border: 1px solid var(--theme-fg-divider);
    }

    .menu-item,
    a.button-like,
    .toolbar .icon-button,
    .icon-button,
    button.basic {
        background-color: transparent;
        color: var(--theme-fg-text);
        --hover-color: var(--theme-fg-text);
        --focus-ring-color: var(--theme-hint);
    }

    .primary.menu-item,
    a.primary.button-like,
    .primary.icon-button,
    button.primary.basic {
        background-color: transparent;
        color: var(--theme-primary);
        --hover-color: var(--theme-primary);
        --focus-ring-color: var(--theme-primary-light);
    }

    .accent.menu-item,
    a.accent.button-like,
    .accent.icon-button,
    button.accent.basic {
        background-color: transparent;
        color: var(--theme-accent);
        --hover-color: var(--theme-accent);
        --focus-ring-color: var(--theme-accent-light);
    }

    .danger.menu-item,
    a.danger.button-like,
    .danger.icon-button,
    button.danger.basic,
    .warn.menu-item,
    a.warn.button-like,
    .warn.icon-button,
    button.warn.basic {
        background-color: transparent;
        color: var(--theme-warn);
        --hover-color: var(--theme-warn);
        --focus-ring-color: var(--theme-warn);
    }

    .menu-item:disabled,
    a.button-like:disabled,
    .icon-button:disabled,
    button.basic:disabled {
        background-color: transparent !important;
    }

    .toolbar button,
    button,
    a.raised.button-like,
    .raised.icon-button,
    button.raised,
    a.flat.button-like,
    .flat.icon-button,
    button.flat {
        background-color: var(--theme-bg-raised-button, white);
        color: var(--theme-fg-text);
        --hover-color: var(--theme-fg-text);
        --focus-ring-color: var(--theme-hint);
    }

    button.accent,
    a.accent.raised.button-like,
    .accent.raised.icon-button,
    a.accent.flat.button-like,
    .accent.flat.icon-button {
        background-color: var(--theme-accent, green);
        color: var(--theme-accent-contrast);
        --hover-color: var(--theme-accent-contrast);
        --focus-ring-color: var(--theme-accent-light);
    }

    button.danger,
    a.danger.raised.button-like,
    .danger.raised.icon-button,
    a.danger.flat.button-like,
    .danger.flat.icon-button,
    button.warn,
    a.warn.raised.button-like,
    .warn.raised.icon-button,
    a.warn.flat.button-like,
    .warn.flat.icon-button {
        background-color: var(--theme-warn, red);
        color: var(--theme-warn-contrast);
        --hover-color: var(--theme-warn-contrast);
        --focus-ring-color: var(--theme-warn);
    }

    button:disabled,
    a.raised.button-like:disabled,
    .raised.icon-button:disabled,
    a.flat.button-like:disabled,
    .flat.icon-button:disabled {
        background-color: var(--theme-bg-disabled-button, grey) !important;
        color: var(--theme-fg-disabled-text) !important;
    }

    button,
    button.primary,
    a.primary.raised.button-like,
    .primary.raised.icon-button,
    a.primary.flat.button-like,
    .primary.flat.icon-button {
        background-color: var(--theme-primary, blue);
        color: var(--theme-primary-contrast);
        --hover-color: var(--theme-primary-contrast);
        --focus-ring-color: var(--theme-primary-light);
    }

    a.raised.button-like,
    .raised.icon-button,
    button.raised {
        transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0px calc(1px * (clamp(0, var(--elevation, 1), 1) + clamp(0, var(--elevation, 1) - 3, 1) + 2 * clamp(0, var(--elevation, 1) - 4, 1))) calc(1px * (2 * clamp(0, var(--elevation, 1), 1) + clamp(0, var(--elevation, 1) - 2, 1) + clamp(0, var(--elevation, 1) - 4, 1))) 0px RGBA(var(--elevation-color-rgb, var(--theme-shadow-rgb, 0 0 0))/30%), 0px calc(1px * (clamp(0, var(--elevation, 1), 1) + clamp(0, var(--elevation, 1) - 1, 1) + 2 * clamp(0, var(--elevation, 1) - 2, 3))) calc(1px * (3 * clamp(0, var(--elevation, 1), 2) + 2 * clamp(0, var(--elevation, 1) - 2, 3))) calc(1px * (clamp(0, var(--elevation, 1), 4) + 2 * clamp(0, var(--elevation, 1) - 4, 1))) RGBA(var(--elevation-color-rgb, var(--theme-shadow-rgb, 0 0 0))/15%) !important;
    }

    a.raised.button-like:not(:disabled):hover,
    .raised.icon-button:not(:disabled):hover,
    button.raised:not(:disabled):hover,
    a.raised.button-like:not(:disabled):focus,
    .raised.icon-button:not(:disabled):focus,
    button.raised:not(:disabled):focus {
        box-shadow: 0px calc(1px * (clamp(0, var(--elevation, 2), 1) + clamp(0, var(--elevation, 2) - 3, 1) + 2 * clamp(0, var(--elevation, 2) - 4, 1))) calc(1px * (2 * clamp(0, var(--elevation, 2), 1) + clamp(0, var(--elevation, 2) - 2, 1) + clamp(0, var(--elevation, 2) - 4, 1))) 0px RGBA(var(--elevation-color-rgb, var(--theme-shadow-rgb, 0 0 0))/30%), 0px calc(1px * (clamp(0, var(--elevation, 2), 1) + clamp(0, var(--elevation, 2) - 1, 1) + 2 * clamp(0, var(--elevation, 2) - 2, 3))) calc(1px * (3 * clamp(0, var(--elevation, 2), 2) + 2 * clamp(0, var(--elevation, 2) - 2, 3))) calc(1px * (clamp(0, var(--elevation, 2), 4) + 2 * clamp(0, var(--elevation, 2) - 4, 1))) RGBA(var(--elevation-color-rgb, var(--theme-shadow-rgb, 0 0 0))/15%) !important;
    }

    .toolbar .icon-button,
    .icon-button {
        width: var(--icon-button-size, 2rem);
        height: var(--icon-button-size, 2rem);
        aspect-ratio: 1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .toolbar .icon-button,
    .icon-button,
    .icon-button .material-icons {
        font-size: 24px;
        text-align: center;
        box-sizing: border-box;
    }

    .density-m1.icon-button {
        padding: 0.5rem;
        height: auto;
    }

    .density-1.icon-button {
        padding: 0.25rem;
        height: auto;
    }

    .density-2.icon-button {
        padding: 0.25rem;
        height: auto;
    }

    /*
    This stylesheet should be loaded together with AllStyles.scss
    (best would be if we could @import in that file, but currently the engine does not pick up changes from sub referenced scss-s)
*/
    /* Buttons *******************************************************************************************************************************/
    :host,
    {
    /* HACK we should not have/rely on .hstack containers in buttons ***************************************************************/
    /* Button Group *******************************************************************************************************************************/
    /* Toolbar *******************************************************************************************************************************/
}

.basic-icon-button {
    border-radius: 4px;
    text-align: center;
    padding: 3px;
    width: 24px;
}

.basic-icon-button:not(:disabled) {
    cursor: pointer;
}

.basic-icon-button:hover {
    background-color: var(--theme-bg-hover);
}

.with-focus-layer,
button,
.menu-item,
a.button-like,
button.basic,
.toolbar .icon-button,
.icon-button {
    /** Focus layer */
    --hover-color: var(--theme-fg-text);
    --focus-ring-color: var(--theme-hint);
}

.with-focus-layer:not(:disabled),
button:not(:disabled),
.menu-item:not(:disabled),
a.button-like:not(:disabled),
.icon-button:not(:disabled) {
    cursor: pointer;
}

.with-focus-layer:not(:disabled)::before,
button:not(:disabled)::before,
.menu-item:not(:disabled)::before,
a.button-like:not(:disabled)::before,
.icon-button:not(:disabled)::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 100ms;
    background: var(--hover-color);
}

.with-focus-layer:not(:disabled):hover::before,
button:not(:disabled):hover::before,
.menu-item:not(:disabled):hover::before,
a.button-like:not(:disabled):hover::before,
.icon-button:not(:disabled):hover::before {
    opacity: 0.04;
}

.with-focus-layer:not(:disabled):focus::before,
button:not(:disabled):focus::before,
.menu-item:not(:disabled):focus::before,
a.button-like:not(:disabled):focus::before,
.icon-button:not(:disabled):focus::before {
    opacity: 0.1;
}

.with-focus-layer:not(:disabled):active::before,
button:not(:disabled):active::before,
.menu-item:not(:disabled):active::before,
a.button-like:not(:disabled):active::before,
.icon-button:not(:disabled):active::before {
    opacity: 0.14;
}

.with-focus-layer:not(:disabled):focus:hover::before,
button:not(:disabled):focus:hover::before,
.menu-item:not(:disabled):focus:hover::before,
a.button-like:not(:disabled):focus:hover::before,
.icon-button:not(:disabled):focus:hover::before {
    opacity: 0.14;
}

.with-focus-layer:not(:disabled):active:hover::before,
button:not(:disabled):active:hover::before,
.menu-item:not(:disabled):active:hover::before,
a.button-like:not(:disabled):active:hover::before,
.icon-button:not(:disabled):active:hover::before {
    opacity: 0.2;
}

button {
    /****************************************************************/
    /* legacy */
}

button.remove {
    background-color: #d33131;
}

button.add {
    background-color: #5b31d3;
}

button.expert-mode {
    background: linear-gradient(42deg, red 0%, #ff9a00 10%, #d0de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, red 100%);
    color: black;
    font-weight: bold;
}

button .hstack {
    align-items: center;
}

.btn-group {
    display: flex;
    align-items: stretch;
}

.btn-group>.icon-button:not(:last-child),
.btn-group>button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.btn-group>.icon-button:not(:first-child),
.btn-group>button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group.divider {
    margin: 0 0.5rem;
    height: 30px;
    border-left: 1px solid currentColor;
    white-space: nowrap;
    flex: none;
}

.toolbar,
.statusbar {
    flex: none;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    user-select: none;
    background-color: var(--theme-bg-app-bar);
    height: 32px;
    gap: 10px;
}

.statusbar {
    border-top: 1px solid var(--theme-fg-divider);
}

.toolbar {
    border-bottom: 1px solid var(--theme-fg-divider);
    border-top: 1px solid var(--theme-fg-divider);
}

.toolbar input {
    height: 22px;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid var(--theme-fg-divider);
    font: 14px Arial;
}

.toolbar button {
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
}

.toolbar button.active {
    background-color: var(--theme-primary-lighter);
    z-index: 1;
}

.toolbar .icon-button {
    background-color: var(--theme-bg-background);
}

.toolbar .divider {
    margin: 0 0.5rem;
    height: 30px;
}

.toolbar .btn-group {
    align-items: center;
    white-space: nowrap;
    margin-right: 1px;
}

.toolbar .btn-group .container:not(:last-child) span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.toolbar .btn-group .container:not(:first-child) span {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.toolbar .btn-group:disabled,
.toolbar .btn-group.disabled {
    pointer-events: none;
    opacity: 0.5;
}

a.button-like {
    text-decoration: none;
}

.menu-item {
    padding: 0.75rem 1rem !important;
    gap: 0.75rem;
    margin: -2.5px -5px;
    justify-content: start !important;
}

.ripple-container,
.with-focus-layer,
button,
button.basic,
.icon-button,
.toolbar .icon-button,
a.button-like,
.menu-item {
    position: relative;
    overflow: clip;
}

a.icon-button[disabled=disabled],
a.icon-button[disabled=true],
a.icon-button[download][href=""],
a.button-line[disabled=disabled],
a.button-line[disabled=true],
a.button-line[download][href=""] {
    color: var(--theme-fg-disabled-text) !important;
    pointer-events: none;
}
}