/* Shared newsroom button appearance. Loaded after page styles so every page
   uses the same visual treatment; layout-specific widths and sizes still apply. */
:root {
    --button-radius: 6px;
    --button-font-size: 13px;
    --button-weight: 500;
    --button-border: #dedfdb;
    --button-primary: #183028;
}

:is(.button, .btn, .icon-button) {
    --button-background: #fff;
    --button-foreground: #20292d;
    --button-edge: var(--button-border);
    --button-hover-background: #f5f6f3;
    --button-hover-edge: #b8c4bd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--button-edge);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.35;
    /* These appearance properties intentionally supersede page-specific skins. */
    border-radius: var(--button-radius) !important;
    font-family: var(--font-ui) !important;
    font-size: var(--button-font-size) !important;
    font-weight: var(--button-weight) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: var(--button-background) !important;
    color: var(--button-foreground) !important;
    border-color: var(--button-edge) !important;
    box-shadow: none !important;
}

:is(.button--pine, .admin-button-primary, .btn-primary) {
    --button-background: var(--button-primary);
    --button-foreground: #fff;
    --button-edge: var(--button-primary);
    --button-hover-background: #234338;
    --button-hover-edge: #234338;
}

:is(.button--danger, .btn-danger, .admin-button-danger) {
    --button-background: #a33b2f;
    --button-foreground: #fff;
    --button-edge: #a33b2f;
    --button-hover-background: #842d24;
    --button-hover-edge: #842d24;
}

.button--danger-outline {
    --button-foreground: #a33b2f;
    --button-edge: #dbb6b1;
    --button-hover-background: #fff0ee;
    --button-hover-edge: #a33b2f;
}

.btn-warning {
    --button-background: #fff5e9;
    --button-foreground: #934b0b;
    --button-edge: #ecd5b9;
    --button-hover-background: #ffead1;
    --button-hover-edge: #d8b68f;
}

:is(.button, .btn, .icon-button):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
    background: var(--button-hover-background) !important;
    border-color: var(--button-hover-edge) !important;
    text-decoration: none;
}

:is(.button, .btn, .icon-button):focus-visible {
    outline: 2px solid #40715f !important;
    outline-offset: 3px;
}

:is(.button, .btn, .icon-button):is(:disabled, [aria-disabled="true"]) {
    opacity: .5;
    cursor: not-allowed;
}

.button--danger.is-confirming {
    --button-background: #842d24;
    --button-edge: #842d24;
}

:is(.button--compact, .btn-compact) {
    min-height: 32px;
    padding-inline: 10px;
    --button-font-size: 12px;
}

.icon-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
}