/* 全ページの選択欄。見た目はここで管理し、ページ側は寸法だけを調整する。 */
:root {
  --select-background: var(--paper, #fffdf8);
  --select-color: var(--ink, #19352d);
  --select-border: 1px solid var(--ui-control-border, #becbc2);
  --select-radius: var(--ui-radius-control, 6px);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%2319352d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --select-arrow-size: 16px;
  --select-arrow-offset: 14px;
  --select-focus-outline: 3px solid var(--ui-focus-color, var(--green, #245445));
  --select-focus-offset: 3px;
  --select-disabled-background: var(--ui-control-disabled-background, #eceff1);
  --select-disabled-color: var(--ui-control-disabled-color, #66717c);
  --select-disabled-border: var(--ui-control-disabled-border, #c9cfd5);
  --select-min-height: var(--ui-control-height, 48px);
  --select-padding-block: 9px;
  --select-padding-start: 14px;
  --select-padding-end: 40px;
}

select,
[data-taxonomy-open] {
  box-sizing: border-box;
  max-width: 100%;
  min-height: var(--select-min-height);
  padding: var(--select-padding-block) var(--select-padding-end) var(--select-padding-block) var(--select-padding-start);
  border: var(--select-border);
  border-radius: var(--select-radius);
  background-color: var(--select-background);
  color: var(--select-color);
  font: inherit;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

select:not([multiple]):not([size]),
select[size="1"]:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right var(--select-arrow-offset) center;
  background-size: var(--select-arrow-size) var(--select-arrow-size);
}

/* 値と短い操作名を分け、長い選択値もアイコンへ重ならずに折り返す。 */
.ui-action[data-taxonomy-open]:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--select-arrow-size);
  align-items: center;
  column-gap: var(--ui-space-2, 8px);
  min-width: 0;
  padding-inline-end: var(--select-arrow-offset);
  background-image: none;
  text-align: start;
  white-space: normal;
}
.ui-action[data-taxonomy-open] > [data-taxonomy-value] {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-action[data-taxonomy-open] > .taxonomy-open-action {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}
.ui-action[data-taxonomy-open][data-ui-icon]::before {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: var(--select-arrow-size);
  height: var(--select-arrow-size);
  pointer-events: none;
}

select[multiple],
select[size]:not([size="1"]) {
  padding-right: var(--select-padding-start);
}

select:focus-visible,
[data-taxonomy-open]:focus-visible {
  outline: var(--select-focus-outline);
  outline-offset: var(--select-focus-offset);
}

select:disabled,
[data-taxonomy-open]:disabled {
  background-color: var(--select-disabled-background);
  color: var(--select-disabled-color);
  border-color: var(--select-disabled-border);
  cursor: not-allowed;
  opacity: 1;
}

@media (forced-colors: active) {
  select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
    appearance: auto;
    background-image: none;
  }
}