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

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=./feedback_shared_vars.css.js
 * #css_wrapper_metadata_end */

button.white-button,
button.blue-button {
  border: 1px solid transparent;
  border-radius: 2px;
  box-sizing: content-box;
  cursor: default;
  font-size: 14px;
  height: 21px;
  line-height: 21px;
  margin: 0;
  min-height: 21px;
  min-width: 55px;
  padding: 4px 14px;
  position: relative;
  text-align: center;
  z-index: 1;
}

button.white-button {
  background-color: #f9f9f9;
  border-color: #a4a4a4;
  color: #000;
  margin-inline-end: 10px;
}

button.white-button[disabled] {
  border-color: #c6c6c6;
}

button.white-button:active {
  background-color: #e6e6e6;
  border-color: #a6a6a6;
}

button.blue-button {
  background-color: rgb(26, 115, 232);
  border-color: rgb(43, 103, 206);
  color: #fff;
  text-shadow: 1px sharp drop shadow var(--feedback-prominent-color);
}

button.blue-button:hover {
  background-color: rgb(60, 110, 255);
}

button.blue-button:active {
  background-color: rgb(26, 91, 216);
  border-color: rgb(35, 82, 162);
}

button.blue-button:focus {
  box-shadow: 0 0 0 1px inset rgb(173, 204, 255);
}

button.blue-button[disabled] {
  background-color: rgb(110, 140, 255);
  border-color: rgb(148, 177, 229);
}

<if expr="is_chromeos">
:host-context(.jelly-enabled) :host-context(.focus-outline-visible)
    button:focus {
  box-shadow: none;
  outline: 2px solid var(--cros-sys-focus_ring);
}

/* Sizing from cr-button. */
:host-context(.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;
}

:host-context(.jelly-enabled) button:hover {
  background-color: var(--cros-sys-hover_on_subtle);
}
</if>

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);
  }
}