/* Copyright 2021 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

@import url(./feedback_shared_vars.css);

html:has(body.jelly-enabled) :host-context(.focus-outline-visible)
    button:focus {
  box-shadow: none;
  outline: 2px solid var(--cros-sys-focus_ring);
}

/* Sizing from cr-button. */
html:has(body.jelly-enabled) button {
  background-color: var(--cros-sys-primary_container);
  border: none;
  border-radius: 4px;
  color: var(--cros-sys-on_primary_container);
  min-width: 5.14em;
  padding: 8px 16px;
}

html:has(body.jelly-enabled) button:hover {
  background-color: var(--cros-sys-hover_on_subtle);
}

html,
body {
  background-color: var(--feedback-bg-color);
  color: var(--feedback-primary-color);
}

a[href] {
  color: var(--feedback-link-color);
}

a[href]:focus,
button.blue-button:focus,
button.white-button:focus {
  outline: 2px solid var(--feedback-focus-color);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  button.blue-button,
  button.white-button {
    outline-width: 0;
  }

  button.blue-button {
    background-color: var(--feedback-prominent-color);
    border: none;
    color: var(--google-grey-900);
  }

  button.blue-button:hover {
    background: var(--feedback-prominent-color) linear-gradient(
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08));
  }

  button.white-button {
    background-color: var(--feedback-bg-color);
    border-color: var(--google-grey-700);
    color: var(--feedback-prominent-color);
  }

  button.white-button:hover {
    background-color: rgba(var(--google-blue-300-rgb), 0.08);
  }
}