/* ==========================================================================
   MOULDSHOP LIST TOOLBAR — the SORT DROPDOWN. Skin for mouldshop-listbar-sort.js.

   Operator, 2026-09-24: the native list ("this dropdown we have") against the live
   Mouldshop picker ("this one we want to have"), "and same problem with borders as a
   moment ago". Built to the reference screenshot:
     - trigger: the toolbar pill's box (2.5rem, fully rounded, .9375rem), BLUE fill,
       WHITE text, no border, and nothing changes on focus - no outline, no ring;
     - panel: white, rounded, soft shadow, a small gap under the trigger;
     - options: separated by light rules, the selected one blue, the others grey.
   Everything here only applies once the JS has enhanced the control
   (.ms-listbar-sort.is-enhanced); without it the native select is untouched.

   The grey option ink is the reference's light grey, about 2.4:1 on white - below
   WCAG AA, by the design. The trigger is white on Blue 02, about 2.3:1, likewise.
   ========================================================================== */

:root {
  --ms-sort-bg:          var(--ms-blue, #6CB2DE);
  --ms-sort-fg:          var(--ms-white, #FFFFFF);
  --ms-sort-panel-bg:    var(--ms-white, #FFFFFF);
  --ms-sort-panel-radius: 1.5rem;
  --ms-sort-panel-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  --ms-sort-option-ink:  #A6A6A6;                    /* the reference's grey */
  --ms-sort-option-on:   var(--ms-blue, #6CB2DE);    /* the selected option */
  --ms-sort-option-hover: var(--ms-navy, #0A2979);   /* pointer / keyboard highlight */
  --ms-sort-rule:        var(--ms-grey-20, #E4E7EC);
}

/* ABOVE THE CARDS WHILE OPEN (operator, 2026-09-24: "conflict with product and z-index"). A
   hovered card lifts to z-index 100 + its stack order (mouldshop-card-surfaces.css, up to about
   220 on a long listing) and painted over the panel's 20. The open control goes to 900: above
   any card, still under the sticky header's 1000. */
.ms-listbar-sort.is-open {
  z-index: 900;
}

/* The wrapper's CSS chevron belonged to the native select; the button draws its own. */
.ms-listbar-sort.is-enhanced::after {
  content: none;
}

.ms-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding-block: .375rem;
  padding-inline: 1.5rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--ms-sort-bg);
  color: var(--ms-sort-fg);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

/* "Same problem with borders": nothing changes on focus, as on both search pills. */
.ms-sort-btn:focus,
.ms-sort-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The PANEL loses only the outline. It takes focus when it opens (the JS focuses it for the
   keyboard), and this rule once also said box-shadow: none - which wiped the panel's own shadow
   the moment it opened; a right-click, which moves focus away, brought it back (operator,
   2026-09-24). Only the ring goes; the shadow is the panel's. */
.ms-sort-list:focus,
.ms-sort-list:focus-visible {
  outline: none;
}

.ms-sort-btn-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The chevron: a border triangle in the button's own colour, turned up when open. */
.ms-sort-chev {
  flex: 0 0 auto;
  width: .4rem;
  height: .4rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .15s ease;
}

.ms-listbar-sort.is-open .ms-sort-chev {
  transform: translateY(25%) rotate(-135deg);
}

/* THE PANEL. Anchored to the trigger's RIGHT edge: the sort sits at the right end of
   the toolbar, so a panel wider than the trigger grows leftwards, never off-screen. */
.ms-sort-list {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  background: var(--ms-sort-panel-bg);
  border-radius: var(--ms-sort-panel-radius);
  box-shadow: var(--ms-sort-panel-shadow);
}

.ms-sort-list[hidden] {
  display: none;
}

.ms-sort-option {
  position: relative;
  padding: .75rem 1.5rem;
  color: var(--ms-sort-option-ink);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

/* The rule between options, inset from the panel's rounded ends. */
.ms-sort-option + .ms-sort-option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: .625rem;
  height: 1px;
  background: var(--ms-sort-rule);
}

.ms-sort-option.is-active {
  color: var(--ms-sort-option-hover);
}

.ms-sort-option[aria-selected="true"] {
  color: var(--ms-sort-option-on);
}