.btn {
    display: var(--button-display);
    padding: var(--button-padding-y) var(--button-padding-x);
    font-family: var(--font-family-base);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: var(--button-line-height);
    text-align: var(--button-text-align);
    text-decoration: var(--button-text-decoration);
    vertical-align: var(--button-vertical-align);
    cursor: var(--button-cursor);
    user-select: var(--button-user-select);
    border: var(--button-border-width) solid var(--color-border-default);
    border-radius: var(--button-border-radius);
    background-color: var(--color-bg-panel);
    color: var(--color-text-primary);
    transition:
        color var(--transition-speed),
        background-color var(--transition-speed),
        border-color var(--transition-speed),
        box-shadow var(--transition-speed);
}
.btn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}
.btn--primary {
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent-primary);
}
.btn--primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent-hover);
}
.btn--secondary {
    background-color: var(--color-bg-hover);
}
.btn--secondary:hover {
    background-color: var(--surface-level-4);
}
.btn--danger {
    background-color: var(--color-feedback-danger);
    color: var(--color-text-on-danger);
    border-color: var(--color-feedback-danger);
}
.btn--danger:hover {
    background-color: var(--danger-60);
    color: var(--color-text-on-danger);
    border-color: var(--danger-60);
}
.btn--outline-primary {
    background-color: transparent;
    color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}
.btn--outline-primary:hover {
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
}
.btn--outline-danger {
    background-color: transparent;
    color: var(--color-feedback-danger);
    border-color: var(--color-feedback-danger);
}
.btn--outline-danger:hover {
    background-color: var(--color-feedback-danger);
    color: var(--color-text-on-danger);
}
.btn--lg {
    padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
    font-size: var(--button-lg-font-size);
}
.btn--sm {
    padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
    font-size: var(--button-sm-font-size);
}

.button-group {
    display: var(--button-group-display);
    vertical-align: var(--button-group-vertical-align);
}
.button-group > .btn {
    position: var(--button-group-btn-position);
    border-radius: var(--button-group-btn-border-radius);
}
.button-group > .btn:not(:first-child) {
    margin-left: var(--button-group-btn-margin-left);
}
.button-group > .btn:first-child {
    border-top-left-radius: var(--button-border-radius);
    border-bottom-left-radius: var(--button-border-radius);
}
.button-group > .btn:last-child {
    border-top-right-radius: var(--button-border-radius);
    border-bottom-right-radius: var(--button-border-radius);
}