/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Select input elements.
 */

.form-element--type-select {
  padding-inline-end: calc(var(--admin-space-xs) + var(--admin-space-xl) - 1px);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */

  /**
   * Select states.
   */
  &:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
  }
  &[disabled] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%238e929c'/%3e%3c/svg%3e");
  }

  &:dir(rtl) {
    background-position: 0 50%;
  }

  .gin--dark-mode & {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
  }

  .no-touchevents & {
    &.form-element--extrasmall,
    &[name$="][_weight]"] {
      min-height: 1.75rem;
      padding-inline-end: calc(1.5rem - var(--input-border-size));
      background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
      font-size: var(--admin-font-size-s);
      line-height: 1.5;
    }
  }
}

@media (forced-colors: active) {
  .form-element--type-select,
  .form-element--type-select:focus,
  .form-element--type-select[disabled] {
    padding-inline-end: var(--input-padding-horizontal);
    background-image: none;
    appearance: revert; /* Revert <select> appearance value for modern browsers. */
  }
}

.form-element--type-select--small {
  min-height: 2.25rem;
  background-position: 100% 52%;
  font-size: var(--admin-font-size-xs);
  line-height: 1.4;
  padding-block: 0.474rem;
  /* 0.79rem * 1.2 / 2 */

  &:dir(rtl) {
    background-position: 0% 52%;
  }
}