/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

rich-select {
  /* Include the padding in the max-width calculation so that we truncate rather
     than grow wider than 100% of the parent. */
  box-sizing: border-box;
  display: block;
  /* Has to be the same as `payment-method-picker > input`: */
  margin: 10px 0;
  /* Padding for the dropmarker (copied from common.css) */
  padding-inline-end: 24px;
  position: relative;
  /* Don't allow the <rich-select> to grow wider than the container so that we
     truncate with text-overflow for long options instead. */
  max-width: 100%;
}

/* Focusing on the underlying select element outlines the outer
   rich-select wrapper making it appear like rich-select is focused. */
rich-select:focus-within > select {
  outline: 1px dotted var(--in-content-text-color);
}

/*
 * The HTML select element is hidden and placed on the rich-option
 * element to make it look like clicking on the rich-option element
 * in the closed state opens the HTML select dropdown. */
rich-select > select {
  /* Hide the text from the closed state so that the text/layout from
     <rich-option> won't overlap it. The !important matches common.css. */
  color: transparent !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

rich-select > select > option {
  /* Reset the text color in the popup/open state */
  color: var(--in-content-text-color);
}

.rich-option {
  display: grid;
  padding: 8px;
}

.rich-select-selected-option {
  /* Clicks on the selected rich option should go to the <select> below to open the popup */
  pointer-events: none;
  /* Use position:relative so this is positioned on top of the <select> which
     also has position:relative. */
  position: relative;
}