/*
  BRK Select
  Public class: .brk-select

  Replaces the browser's own dropdown list - the one part of a <select> that
  cannot be styled - with the BRK Chat suggestion treatment: a translucent slab
  under the field, hairline dividers, RDRLedger text, no OS chrome.

  The native <select> stays in the DOM inside .brk-select and keeps the value.
  It is hidden rather than removed so forms, labels and existing JS still work.
*/

.brk-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

/* Kept for the value and for form submission, never seen. Not display:none, so
   a <label for> still focuses something real and validation can still anchor. */
.brk-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

/* --- the closed field ----------------------------------------------------- */

.brk-select .brk-select-button {
  position: relative;
  /* Host panels that style bare `button` must not paint a plate behind this. */
  background-image: none;
  box-shadow: none;
  filter: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px 9px;
  appearance: none;
  border: 1px solid rgba(204, 213, 216, .16);
  background: rgba(5, 5, 5, .46);
  color: rgba(238, 229, 210, .94);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 15px;
  letter-spacing: .2px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.brk-select .brk-select-button:hover,
.brk-select .brk-select-button:focus-visible,
.brk-select.is-open .brk-select-button {
  outline: none;
  border-color: rgba(197, 32, 7, .62);
  background: rgba(14, 5, 4, .62);
  color: #f4ead6;
}

.brk-select .brk-select-button:disabled {
  color: rgba(204, 213, 216, .38);
  cursor: not-allowed;
}

/* Nothing chosen yet reads as a prompt rather than an answer. */
.brk-select.is-empty .brk-select-value {
  color: rgba(204, 213, 216, .48);
}

.brk-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brk-select-arrow {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(214, 179, 106, .82);
  transition: transform 160ms ease, border-top-color 140ms ease;
}

.brk-select.is-open .brk-select-arrow {
  transform: rotate(180deg);
  border-top-color: #e8c169;
}

/* --- the open list --------------------------------------------------------

   One panel, not a stack of buttons. The list is a single sheet of the same
   inkroller artwork the BRK menu shells are built from, and the options are
   drawn straight onto it as text. A row only grows chrome when it is the one
   you are on, and that chrome is the site's real selected treatment: the
   selected.png frame with the animated red/gold ring riding on top of it.

   Every rule here is written with the list or the shell in front of it. Some
   of these selects live inside panels whose own `button` rules would
   otherwise paint a grey plate behind each row - that is exactly what this
   component exists to get rid of.
   -------------------------------------------------------------------------- */

.brk-select .brk-select-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  max-height: 300px;
  padding: 8px;
  overflow-y: auto;
  border: 0;
  background:
    linear-gradient(rgba(8, 4, 4, .50), rgba(8, 4, 4, .68)),
    url('../../assets/ui/inkroller_1a.png') top center / 100% auto repeat-y;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .66);
}

.brk-select.is-open .brk-select-list {
  display: block;
}

.brk-select .brk-select-option {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 9px 16px 10px;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  color: rgba(226, 216, 197, .78);
  font-family: 'RDRLedger', Georgia, serif;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: .15px;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: color 130ms ease;
}

.brk-select .brk-select-option-label {
  position: relative;
  z-index: 4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The value already chosen reads gold even when you are not on it. */
.brk-select .brk-select-option.is-selected {
  color: #e8c169;
}

.brk-select .brk-select-option:is(:hover, :focus-visible, .is-active) {
  outline: none;
  background: transparent;
  color: rgba(255, 250, 238, .99);
}

/* Same wash the menu rows use under their selected frame. */
.brk-select .brk-select-option:is(:hover, :focus-visible, .is-active)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)),
    url('../../assets/ui/brk_selected_bg.jpg') center 50% / 100% auto no-repeat;
}

.brk-select .brk-select-option:is(:hover, :focus-visible, .is-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .44);
}

/* --- the selected frame ---------------------------------------------------- */

.brk-select .brk-select-option > .row-border-flow {
  display: none;
}

/* selected.png stretched to the row rather than a drawn border, so the frame
   lands on the row edges instead of floating inside them. */
.brk-select .brk-select-option:is(:hover, :focus-visible, .is-active) > .row-border-flow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* selected.png is a 432x52 frame: a hard edge a few pixels thick on each
     side and a near-empty middle. Scaled to 100% 100% those edges thin out or
     fatten with the row. Slicing them keeps every edge at its drawn thickness
     and stretches only the empty middle, so a 40px row and a 52px row get the
     same frame. */
  background: none;
  border-style: solid;
  border-width: 6px 5px 8px 4px;
  border-image-source: url('../../assets/ui/selected.png');
  border-image-slice: 6 5 8 4 fill;
  border-image-width: 6px 5px 8px 4px;
  border-image-repeat: stretch;
  opacity: 1;
  filter:
    drop-shadow(0 0 3px var(--browse-highlight))
    drop-shadow(0 0 1px rgba(0, 0, 0, .85));
  -webkit-mask: none;
  mask: none;
  animation: none;
  pointer-events: none;
}

/* The animated red/gold ring rides on top of the static artwork, exactly as it
   does on a focused menu row. */
.brk-select .brk-select-option:is(:hover, :focus-visible, .is-active) > .row-border-flow::after {
  content: '';
  position: absolute;
  /* Cancels the sliced border so the ring lands on the row edge. */
  inset: -6px -5px -8px -4px;
  z-index: 2;
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(
      from var(--browse-angle),
      var(--browse-primary) 0deg,
      var(--browse-primary) 82deg,
      var(--browse-deep) 128deg,
      var(--browse-highlight) 158deg,
      var(--browse-primary) 198deg,
      var(--browse-accent) 250deg,
      var(--browse-primary) 306deg,
      var(--browse-primary) 360deg
    );
  animation: menu-border-flow var(--browse-duration) linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--browse-opacity);
}

.brk-select .brk-select-option[disabled] {
  color: rgba(204, 213, 216, .3);
  cursor: default;
}

.brk-select .brk-select-option[disabled]:hover {
  color: rgba(204, 213, 216, .3);
}

.brk-select .brk-select-option[disabled]:hover::before,
.brk-select .brk-select-option[disabled]:hover::after,
.brk-select .brk-select-option[disabled]:hover > .row-border-flow {
  display: none;
  content: none;
}

/* --- fitting into existing fields ----------------------------------------- */

/* The ticket console draws its own bar around inputs, so the select inside one
   contributes no chrome of its own. */
.tk-bar .brk-select .brk-select-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
}

.tk-bar .brk-select .brk-select-list {
  top: calc(100% + 10px);
  left: -14px;
  right: -14px;
}

/* Staff controls sit in a tight two-column grid. */
.ta-staff-controls .brk-select .brk-select-button {
  min-height: 36px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .brk-select .brk-select-list { max-height: 244px; }
}