chromium/ash/webui/common/resources/cr_elements/md_select.css

/* Copyright 2022 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
 * #import=./cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

.md-select {
  --md-arrow-width: 10px;
  --md-select-bg-color: var(--cros-sys-input_field_on_base);
  --md-select-focus-shadow-color: var(--cros-sys-primary);
  --md-select-option-bg-color: var(--cros-sys-base_elevated);
  --md-select-side-padding: 8px;
  --md-select-text-color: var(--cros-sys-on_surface);

  -webkit-appearance: none;
  background: url(//resources/images/arrow_down.svg)
      calc(100% - var(--md-select-side-padding))
      center no-repeat;
  background-color: var(--md-select-bg-color);
  background-size: var(--md-arrow-width);
  border: none;
  border-radius: 4px;
  color: var(--md-select-text-color);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  max-width: 100%;
  outline: none;
  padding-bottom: 6px;
  /* Ensures 3px space between text and arrow */
  padding-inline-end: calc(var(--md-select-side-padding) +
      var(--md-arrow-width) + 3px);
  padding-inline-start: var(--md-select-side-padding);
  padding-top: 6px;
  width: var(--md-select-width, 200px);
}

@media (prefers-color-scheme: dark) {
  .md-select {
    background-image: url(//resources/images/dark/arrow_down.svg);
  }
}

:host-context([chrome-refresh-2023]) .md-select {
  --md-select-bg-color: transparent;
  --md-arrow-width: 7px;
  --md-select-side-padding: 10px;
  --md-select-text-color: inherit;
  border: solid 1px var(--color-combobox-container-outline,
      var(--cr-fallback-color-neutral-outline));
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 12px;
  height: 36px;
  line-height: 36px;
  padding-bottom: 0;
  padding-top: 0;
}

:host-context([chrome-refresh-2023]) .md-select:hover {
  background-color: var(--color-comboxbox-ink-drop-hovered,
      var(--cr-hover-on-subtle-background-color));
}

/* Makes sure anything within the dropdown menu has a background. */
.md-select :-webkit-any(option, optgroup) {
  background-color: var(--md-select-option-bg-color);
}

.md-select[disabled] {
  opacity: var(--cr-disabled-opacity);
  pointer-events: none;
}

:host-context([chrome-refresh-2023]) .md-select[disabled] {
  background-color: var(--color-combobox-background-disabled,
      var(--cr-fallback-color-disabled-background));
  border-color: transparent;
  color: var(--color-textfield-foreground-disabled,
      var(--cr-fallback-color-disabled-foreground));
  opacity: 1;
}

.md-select:focus {
  box-shadow: 0 0 0 2px var(--md-select-focus-shadow-color);
}

:host-context([chrome-refresh-2023]) .md-select:focus {
  box-shadow: none;
  outline: solid 2px var(--cr-focus-outline-color);
  outline-offset: -1px;
}

@media (forced-colors: active) {
  .md-select:focus {
    /* Use outline instead of box-shadow (which does not work) in Windows
       HCM. */
    outline: var(--cr-focus-outline-hcm);
  }
}

/* Should not have an outline if opened by mouse click. */
.md-select:active {
  box-shadow: none;
}

:host-context([dir=rtl]) .md-select {
  background-position-x: var(--md-select-side-padding);
}