/* Licensed to the Chroma Control Contributors under one or more agreements. */
/* The Chroma Control Contributors licenses this file to you under the MIT license. */
/* See the LICENSE file in the project root for more information. */

.button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size);
    padding: 0 var(--spacing);
    height: 25px;
    border-radius: 2px;
    min-width: 120px;
}

    .button[aria-disabled=true] {
        opacity: .6;
        pointer-events: none;
    }

.button-primary {
    border: 1px solid var(--border-color-accent);
    color: var(--foreground-color-inset);
    background-color: var(--background-color-accent);
}

    .button-primary:not([aria-disabled=true]):hover {
        border: 1px solid var(--border-color-accent-muted);
        background-color: var(--background-color-accent-muted);
    }

    .button-primary:not([aria-disabled=true]):active {
        border: 1px solid var(--border-color-accent-emphasis);
        background-color: var(--background-color-accent-emphasis);
    }

.button-secondary {
    border: 1px solid var(--border-color-neutral);
    color: var(--foreground-color-white);
    background-color: var(--background-color-neutral);
}

    .button-secondary:not([aria-disabled=true]):hover {
        border: 1px solid var(--border-color-neutral-muted);
        background-color: var(--background-color-neutral-muted);
    }

    .button-secondary:not([aria-disabled=true]):active {
        border: 1px solid var(--border-color-neutral-emphasis);
        background-color: var(--background-color-neutral-emphasis);
    }

.button-danger {
    border: 1px solid var(--border-color-neutral);
    color: var(--foreground-color-white);
    background-color: var(--background-color-neutral);
}

    .button-danger:not([aria-disabled=true]):hover {
        border: 1px solid var(--border-color-danger);
        background-color: var(--background-color-danger);
    }

    .button-danger:not([aria-disabled=true]):active {
        border: 1px solid var(--border-color-danger-emphasis);
        background-color: var(--background-color-danger-emphasis);
    }
