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

/* These styles adjust the default styling for HTML elements as defined in
 * core/html/resources/html.css in order to provide an updated style when
 * using the refreshed controls UI.
 */

/* This sheet is appended to html.css before parsing which means the selectors
   below are in the default html namespace:

   @namespace "http://www.w3.org/1999/xhtml"
*/

select,
select:-internal-list-box,
input,
textarea {
  background-color: -internal-light-dark(#ffffff, #3B3B3B);
  border-color: -internal-light-dark(#767676, #858585);
}

a:-webkit-any-link:focus-visible {
  outline-offset: 1px;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: 0;
}

input[type="checkbox" i]:focus-visible,
input[type="radio" i]:focus-visible {
  outline-offset: 2px;
}

input,
input[type="email" i],
input[type="number" i],
input[type="password" i],
input[type="search" i],
input[type="tel" i],
input[type="text" i],
input[type="url" i] {
  padding: 1px 2px;
}

input:disabled,
select:disabled,
textarea:disabled {
  border-color: rgba(118, 118, 118, 0.3);
}

input:disabled,
textarea:disabled {
  background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
  color: -internal-light-dark(default, rgba(255, 255, 255, 0.6));
}

select:disabled {
  opacity: 0.7;
}

input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="color" i],
input[type="file" i]::-webkit-file-upload-button,
button {
  background-color: -internal-light-dark(#efefef, #3B3B3B);
  border-color: -internal-light-dark(#767676, #858585);
  color: -internal-light-dark(black, white);
}

input[type="button" i]:disabled,
input[type="submit" i]:disabled,
input[type="reset" i]:disabled,
input[type="color" i]:disabled,
input[type="file" i]:disabled::-webkit-file-upload-button,
button:disabled {
  background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
  border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
  color: -internal-light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
}

input[type="password" i]::-internal-reveal {
  width: 1.3em;
  height: 1.3em;
  cursor: default;
  flex: none;
  background-image: -webkit-image-set(url(images/password_reveal_on.svg) 1x);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 3px;
  margin-right: 3px;
}

input[type="password" i]::-internal-reveal.reveal {
  background-image: -webkit-image-set(url(images/password_reveal_off.svg) 1x);
}

input[type="password" i]::-internal-reveal:hover,
input[type="password" i]::-internal-reveal:focus {
  border-radius: 1px;
  cursor: pointer;
}

input[type="range" i] {
  color: -internal-light-dark(#101010, #ffffff);
}

input[type="range" i]:disabled {
  color: #c5c5c5;
}

meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance {
  display: grid;
  grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
}

meter::-webkit-meter-bar {
  background: -internal-light-dark(#efefef, #3B3B3B);
  border-width: thin;
  grid-row-start: line1;
  grid-row-end: line2;
  border-style: solid;
  border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), #858585);
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

meter::-webkit-meter-optimum-value {
  background: -internal-light-dark(#107c10, #74b374)
}

meter::-webkit-meter-suboptimum-value {
  background: -internal-light-dark(#ffb900, #f2c812)
}

meter::-webkit-meter-even-less-good-value {
  background: -internal-light-dark(#d83b01, #e98f6d)
}

input[type="date" i]::-webkit-calendar-picker-indicator,
input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
input[type="month" i]::-webkit-calendar-picker-indicator,
input[type="week" i]::-webkit-calendar-picker-indicator {
  background-image: -internal-light-dark(-webkit-image-set(url(images/calendar_icon.svg) 1x), -webkit-image-set(url(images/calendar_icon_white.svg) 1x));
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: contain;
  height: 1.2em;
  margin-inline-start: 24px;
  opacity: 1;
  outline: none;
  padding-bottom: 2px;
  padding-inline-start: 3px;
  padding-inline-end: 3px;
  padding-top: 2px;
  width: 1.2em;
}

input[type="date" i]::-webkit-calendar-picker-indicator:focus-visible,
input[type="datetime-local" i]::-webkit-calendar-picker-indicator:focus-visible,
input[type="month" i]::-webkit-calendar-picker-indicator:focus-visible,
input[type="week" i]::-webkit-calendar-picker-indicator:focus-visible {
  outline: solid 2px -webkit-focus-ring-color;
  outline-offset: -2px;
}

input[type="time" i]::-webkit-calendar-picker-indicator {
  background-image: -internal-light-dark(-webkit-image-set(url(images/time_icon.svg) 1x), -webkit-image-set(url(images/time_icon_white.svg) 1x));
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: contain;
  height: 1.05em;
  margin-inline-start: 8px;
  opacity: 1;
  outline: none;
  padding-bottom: 3px;
  padding-inline-start: 3px;
  padding-inline-end: 3px;
  padding-top: 3px;
  width: 1.05em;
}

input[type="time" i]::-webkit-calendar-picker-indicator:focus-visible {
  outline: solid 2px -webkit-focus-ring-color;
  outline-offset: -2px;
}

input::-webkit-calendar-picker-indicator:hover {
  background-color: initial;
}

/* -internal-list-box is how we specify select[multiple] */
/* select[multiple] is an exception to the prohibition on sizes here
   because it is one of the few controls with borders that grow on zoom
   (to solve a nasty scrollbar location problem) */
select:-internal-list-box {
  border-radius: 2px;
}

select:-internal-list-box option:hover {
  background-color: initial;
}

/* option selected, list-box not focused */
select:-internal-list-box option:checked,
select:-internal-list-box option:checked:hover {
  background-color: -internal-light-dark(#cecece, #545454) !important;
  color: -internal-light-dark(#101010, #FFFFFF) !important;
}

/* option selected, list-box focused */
select:-internal-list-box:focus option:checked,
select:-internal-list-box:focus option:checked:hover {
  /* TODO(crbug.com/1129658): The dark mode color here should be handled
     within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
  background-color: -internal-light-dark(-internal-active-list-box-selection, #99C8FF) !important;
  color: -internal-light-dark(-internal-active-list-box-selection-text, #3B3B3B) !important;
}

select:-internal-list-box:focus option:checked:disabled {
  /* TODO(crbug.com/1129658): The dark mode color here should be handled
     within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
  background-color: -internal-light-dark(-internal-inactive-list-box-selection, rgba(59, 59, 59, 0.3)) !important;
}

select:-internal-list-box:disabled option:checked,
select:-internal-list-box option:checked:disabled,
select:-internal-list-box option:checked:disabled:hover {
  color: -internal-light-dark(gray, #aaa) !important;
}

input::-webkit-datetime-edit-ampm-field:focus-visible,
input::-webkit-datetime-edit-day-field:focus-visible,
input::-webkit-datetime-edit-hour-field:focus-visible,
input::-webkit-datetime-edit-millisecond-field:focus-visible,
input::-webkit-datetime-edit-minute-field:focus-visible,
input::-webkit-datetime-edit-month-field:focus-visible,
input::-webkit-datetime-edit-second-field:focus-visible,
input::-webkit-datetime-edit-week-field:focus-visible,
input::-webkit-datetime-edit-year-field:focus-visible {
    background-color: -internal-light-dark(highlight, #99C8FF);
    color: -internal-light-dark(highlighttext, #000000);
    outline: none;
}

input::-webkit-datetime-edit-year-field[disabled],
input::-webkit-datetime-edit-month-field[disabled],
input::-webkit-datetime-edit-week-field[disabled],
input::-webkit-datetime-edit-day-field[disabled],
input::-webkit-datetime-edit-ampm-field[disabled],
input::-webkit-datetime-edit-hour-field[disabled],
input::-webkit-datetime-edit-millisecond-field[disabled],
input::-webkit-datetime-edit-minute-field[disabled],
input::-webkit-datetime-edit-second-field[disabled] {
    color: -internal-light-dark(GrayText, #000000);
}