/* Distinguish project details from support actions in every municipal theme. */
@layer govtech {
  :is(#city-vote, .city-vote-page) .city-vote-footer {
    --city-action: var(--site-button, var(--primary-color, #4f46e5));
    --city-action-ink: var(--site-accent, var(--primary-dark, #3730a3));
    --city-action-soft: var(--site-soft, var(--theme-light, #eef2ff));
    --city-action-border: var(--site-soft-border, var(--theme-border, #c7d2fe));
  }
  :is(#city-vote, .city-vote-page) .city-vote-footer .city-vote-button {
    min-height: 48px;
    border: 1px solid transparent !important;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  }
  :is(#city-vote, .city-vote-page) .city-vote-footer .city-vote-button.city-project-details-link {
    margin-bottom: 12px !important;
    background: var(--city-action-soft) !important;
    color: var(--city-action-ink) !important;
    border-color: var(--city-action-border) !important;
    box-shadow: none !important;
    filter: none !important;
  }
  :is(#city-vote, .city-vote-page) .city-vote-footer .city-vote-button.city-project-details-link:hover {
    background: var(--city-action-soft) !important;
    border-color: var(--city-action-ink) !important;
    box-shadow: inset 0 0 0 1px var(--city-action-ink) !important;
  }
  :is(#city-vote, .city-vote-page) .city-vote-footer button[data-city-vote]:not(.is-success) {
    background: var(--city-action) !important;
    color: #fff !important;
    border-color: var(--city-action) !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--city-action) 18%, transparent) !important;
  }
  :is(#city-vote, .city-vote-page) .city-vote-footer button[data-city-vote]:hover:not(:disabled):not(.is-success) {
    background: var(--city-action-ink) !important;
    border-color: var(--city-action-ink) !important;
  }
  :is(#city-vote, .city-vote-page) .city-vote-footer button[data-city-vote].is-success {
    background: #166534 !important;
    color: #fff !important;
    border-color: #166534 !important;
    box-shadow: none !important;
  }
  :is(#city-vote, .city-vote-page) .city-vote-footer .city-vote-button:focus-visible {
    outline: 3px solid var(--city-action-ink) !important;
    outline-offset: 3px !important;
  }
}