/* Shared application select language: one calm, recognizable control affordance. */
/*
 * Keep every caret background longhand authoritative in interactive states.
 * Shared form focus rules intentionally use the `background` shorthand; without
 * these state selectors that shorthand can reset background-repeat to `repeat`
 * while the higher-specificity hover rule restores the SVG, tiling the caret.
 */
/*
 * The shared date/time picker owns its compact hour, minute, and period
 * selects.  Applying this full-size field caret to those controls consumes
 * most of their value area (for example, clipping `45` or `AM`).
 */
body.la-app-page select:not([multiple]):not([size]):not([data-time]),
body.la-app-page select:not([multiple]):not([size]):not([data-time]):focus,
body.la-app-page select:not([multiple]):not([size]):not([data-time]):focus-visible,
body.la-app-page select:not([multiple]):not([size]):not([data-time]):active,
body.la-app-page .la-timezone-trigger,
body.la-app-page .la-timezone-trigger:focus,
body.la-app-page .la-timezone-trigger:focus-visible,
body.la-app-page .la-timezone-trigger:active {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect x='.5' y='.5' width='29' height='29' rx='9.5' fill='%23f5f3ff' stroke='%23ded8fb'/%3E%3Cpath d='m11 13 4 4 4-4' fill='none' stroke='%235846d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

body.la-app-page select:not([multiple]):not([size]):not([data-time]):hover:not(:disabled),
body.la-app-page .la-timezone-trigger:hover:not(:disabled) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect x='.5' y='.5' width='29' height='29' rx='9.5' fill='%23eeebff' stroke='%23cfc7fa'/%3E%3Cpath d='m11 13 4 4 4-4' fill='none' stroke='%234a38ca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

body.la-app-page select:not([multiple]):not([size]):not([data-time]):disabled {
  cursor: not-allowed;
  filter: saturate(.55);
}

[dir="rtl"] body.la-app-page select:not([multiple]):not([size]):not([data-time]),
body.la-app-page[dir="rtl"] select:not([multiple]):not([size]):not([data-time]) {
  background-position: left 8px center;
}

/* Searchable timezone buttons use the exact same caret artwork as native selects.
   Reserve its value space even in workspaces with narrower field padding. */
body.la-app-page .la-timezone-trigger { padding-inline-end: 3rem !important; }
body.la-app-page .la-timezone-trigger > .la-timezone-arrow { display: none; }
[dir="rtl"] body.la-app-page .la-timezone-trigger,
body.la-app-page[dir="rtl"] .la-timezone-trigger { background-position: left 8px center; }

/* The saved-reply picker is a peer of the composer buttons, not a larger field. */
body.la-app-page.la-console-page .la-compose-tools .la-tool-select {
  height: 38px;
  min-height: 38px;
  padding: 0 7px 0 12px;
  gap: 7px;
}

body.la-app-page.la-console-page .la-compose-tools .la-tool-select select:not([multiple]):not([size]) {
  align-self: stretch;
  width: auto;
  height: 36px;
  min-height: 0;
  padding: 0 34px 0 0;
  padding-inline-end: 34px;
  border: 0;
  border-radius: 10px;
  background-color: transparent;
  background-position: right 2px center;
  background-size: 26px 26px;
  box-shadow: none;
  line-height: 1;
}

body.la-app-page.la-console-page .la-compose-tools .la-tool-select:focus-within {
  border-color: #a99cf1;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(101, 87, 236, .075), 0 7px 18px rgba(61, 47, 145, .08);
}

body.la-app-page.la-console-page .la-compose-tools .la-tool-select select:focus {
  outline: 0;
}