/* Shared filled-button finish. Dimensions and typography belong to each component. */
.site-button-skin {
    background-color: var(--site-button-bottom) !important;
    background-image: linear-gradient(180deg, var(--site-button-top), var(--site-button-bottom)) !important;
    border-color: transparent !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 16px var(--site-button-shadow), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    transition: box-shadow .18s ease, transform .18s ease, filter .18s ease !important;
}

.site-button-skin:hover,
.site-button-skin:focus-visible {
    filter: brightness(1.045) !important;
    box-shadow: 0 13px 24px var(--site-button-hover-shadow), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    transform: translateY(-1px) !important;
}

.site-button-skin:active {
    filter: none !important;
    box-shadow: 0 6px 12px var(--site-button-shadow), inset 0 2px 4px rgba(0, 0, 0, .12) !important;
    transform: translateY(0) !important;
}

.site-button-skin:disabled,
.site-button-skin[aria-disabled="true"] {
    opacity: .72;
    filter: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .site-button-skin { transition: none !important; }
}