.v2.button-outer {
    display: flex;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.1s;
    color: black;
}

.v2.button-outer.fit {
    height: auto;
}

.v2.button-outer.loading {
    cursor: progress;
}

.v2.button-outer.disabled {
    color: #aaa;
}

.v2.button-outer > .button-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    font-size: 11px;
    font-family: Tahoma, Helvetica, Verdana, Arial, sans-serif;
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    grid-gap: 2px;
    border-radius: 3px;
}

.v2.button-group .v2.button-outer > .button-inner {
    justify-content: flex-start;
}

.v2.button-outer > .button-inner:focus-visible {
    outline: 4px solid black;
}


/* button-group */

.v2.button-group {
    display: flex;
    flex-direction: row;
}

.v2.button-group .button-outer .button-inner {
    border-radius: 0;
}


/* button-group row */

.v2.button-group.row .button-outer:first-child .button-inner {
    border-radius: 3px 0 0 3px;
}

.v2.button-group.row .button-outer:last-child .button-inner {
    border-radius: 0 3px 3px 0;
}


/* button-group column */

.v2.button-group.column {
    display: flex;
    flex-direction: column;
}

.v2.button-group.column .button-outer:first-child .button-inner {
    border-radius: 3px 3px 0 0;
}

.v2.button-group.column .button-outer:last-child .button-inner {
    border-radius: 0 0 3px 3px;
}


/* style-primary */

.v2.v2-button-style-primary .button-inner {
    background-color: var(--v2-theme-primary-color);
}

.v2.v2-button-style-primary:not(.disabled) .button-inner {
    color: var(--v2-theme-primary-foreground-color);
}

.v2.v2-button-style-primary.disabled .button-inner {
    background-color: #eee;
}

.v2.v2-button-style-primary:hover:not(.disabled) .button-inner {
    background-color: var(--v2-theme-primary-highlight-color);
}

.v2.button-group.row .v2-button-style-primary:not(:last-child) .button-inner {
    border-right: var(--v2-scaled-border-width) solid white;
}

.v2.button-group.column .v2-button-style-primary:not(:last-child) .button-inner {
    border-bottom: var(--v2-scaled-border-width) solid white;
}


/* style-default */

.v2.v2-button-style-default:hover:not(.disabled) .button-inner {
    background-color: #eee;
}

.v2.v2-button-style-default > .button-inner {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-strong-color);
}

.v2.v2-button-style-default.disabled > .button-inner {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-light-color);
    background-color: white;
}

.v2.button-group.row .v2-button-style-default:not(:first-child) .button-inner {
    border-left: 0;
}

.v2.button-group.column .v2-button-style-default:not(:first-child) .button-inner {
    border-top: 0;
}

/* style-required */
.v2.v2-button-style-required:hover:not(.disabled) .button-inner {
    background-color: #eee;
}

.v2.v2-button-style-required > .button-inner {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-validation-failed-color);
}

.v2.v2-button-style-required.disabled > .button-inner {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-light-color);
    background-color: white;
}

.v2.v2-button-style-required:not(.disabled) > .button-inner {
    box-shadow: 0 0 1px var(--v2-theme-validation-failed-color);
}

.v2.button-group.row .v2-button-style-required:not(:first-child) .button-inner {
    border-left: 0;
}

.v2.button-group.column .v2-button-style-required:not(:first-child) .button-inner {
    border-top: 0;
}

/* style-table */

.v2.v2-button-style-table:hover:not(.disabled) .button-inner {
    box-shadow: 2px 2px 3px #aaa;
}

.v2.v2-button-style-table > .button-inner {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-light-color);
    box-shadow: 1px 1px 2px #ccc;
    margin: 0;
}

.v2.v2-button-style-table.disabled > .button-inner {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-light-color);
    background-color: white;
}

.v2.v2-button-style-table.alternate > .button-inner {
    background-color: var( --v2-theme-table-alternate-row-color );
}

.v2.button-group.row .v2-button-style-table:not(:first-child) .button-inner {
    border-left: 0;
}

.v2.button-group.column .v2-button-style-table:not(:first-child) .button-inner {
    border-top: 0;
}


/* style-minimal */

.v2.button-outer.v2-button-style-minimal {
    height: 28px;
}

.v2.v2-button-style-minimal:hover:not(.disabled) .button-inner {
    background-color: #eee;
}

.v2.v2-button-style-minimal > .button-inner {
    border: none;
    padding: 0 4px;
    background-color: transparent;
}

.v2.v2-button-style-minimal.disabled > .button-inner {
    border: none;
    background-color: white;
}

.v2.button-group.row .v2-button-style-minimal:not(:first-child) .button-inner {
    border-left: 0;
}

.v2.button-group.column .v2-button-style-minimal:not(:first-child) .button-inner {
    border-top: 0;
}

/* style-compact */

.v2.button-outer.v2-button-style-compact {
    height: 22px;
    width:max-content;
}

.v2.v2-button-style-compact:hover:not(.disabled) .button-inner {
    background-color: #eee;
}

.v2.v2-button-style-compact > .button-inner {
    border: none;
    padding: 0;
    background-color: transparent;
}

.v2.v2-button-style-compact.disabled > .button-inner {
    border: none;
    background-color: white;
}

.v2.button-group.row .v2-button-style-compact:not(:first-child) .button-inner {
    border-left: 0;
}

.v2.button-group.column .v2-button-style-compact:not(:first-child) .button-inner {
    border-top: 0;
}


/* disabled, loading */


/* .v2.button-outer.default:not(.disabled)>.button-inner:hover {
    border-top: var(--border-width) solid transparent;
    border-bottom: var(--border-width) solid var(--primarycolorgrey);
} */

.v2-button-style-primary:not(.loading) .v2-icon {
    filter: var(--v2-theme-primary-foreground-icon-filter);
}

.v2.button-outer.disabled:not(.loading) .v2-icon {
    filter: opacity(0.2)
}

.v2.button-outer.loading .v2-icon {
    animation: v2-button-icon-rotation 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.v2.button-outer.disabled>.button-inner {
    color: #aaa;
    cursor: not-allowed;
}

@keyframes v2-button-icon-rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}