@use '../../sass/variables' as *;

// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/partial/_planning_toolbar.scss
// A rounded "pill" action bar: a full-width flex row split into groups
// (buttons, a segmented "track" control, an expandable search field) laid
// out with space-between, sitting inline above the content it controls -
// not fixed/sticky, just a normal flex row like the source component.
//
// :not(.fixed-action-btn) - "toolbar" is already a FAB display mode
// (.fixed-action-btn.toolbar, see components/button/_buttons.scss); this
// guards against also painting pill styles onto that unrelated element.
.toolbar:not(.fixed-action-btn):not(.code-toolbar > .toolbar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 5px 5px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 20px;
  background-color: var(--md-sys-color-surface-variant);

  // Default overflow behavior: more groups than fit on one line stay on
  // that one line and become horizontally scrollable, rather than
  // squeezing/wrapping - a plain, unobtrusive scroll, no visible
  // scrollbar chrome by default. This is a real native overflow (not a
  // faked one), so every native way of scrolling it already works with
  // no extra JS: trackpad/touch swipe, shift+wheel, and middle-click
  // drag-to-pan (Chrome/Firefox/Edge on Windows) all just work.
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }

  // Groups (and their contents) keep their natural size instead of being
  // squashed to fit - that's what makes the row scroll instead of
  // cramming everything in.
  > .toolbar-group {
    flex-shrink: 0;
  }

  // Opt-in alternative to scrolling: wrap onto as many lines as needed
  // instead. `overflow-x` reverts to visible since there's nothing left
  // to scroll horizontally once wrapped, and the row gap matches the
  // column gap above so wrapped lines aren't crammed together.
  //
  // flex-wrap only rearranges its own direct children - a toolbar
  // usually has just one or two big .toolbar-group children, each
  // holding many buttons, so the group itself has to be told to wrap
  // too or nothing visibly changes.
  &.toolbar-wrap {
    flex-wrap: wrap;
    height: auto;
    overflow-x: visible;
    overflow-y: visible;
    row-gap: 8px;

    > .toolbar-group {
      flex-wrap: wrap;
      row-gap: 8px;
      // Undo the scroll-mode flex-shrink: 0 (see above) and let the
      // group shrink to fit .toolbar's own width - flex-wrap only
      // triggers once a flex container is actually constrained to less
      // than its content's natural width; without this the group just
      // grows past .toolbar's max-width instead of wrapping inside it.
      flex-shrink: 1;
      min-width: 0;
    }
  }
}

// A cluster of controls inside the toolbar (buttons, a track, a search
// field, ...) kept together and spaced from the next group.
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/// Separator
///////////////////////////////////////////////////////
///

// A thin vertical divider between groups - for when the gap between
// .toolbar-group elements isn't enough and you want an explicit "these
// are unrelated" line. Just drop it between two groups as a sibling.
.toolbar-separator {
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  margin: 4px 2px;
  // Not --md-sys-color-outline-variant: it's the exact same color as
  // --md-sys-color-surface-variant (the toolbar's own background) in the
  // dark theme, making the separator invisible. on-surface-variant is
  // guaranteed to contrast against surface-variant by design (that's
  // what the on-*/* pairing is for) - mixed in low instead of used
  // solid, for a subtle line rather than a harsh one.
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface-variant) 32%);
}

/// Freeze (pinned group)
///////////////////////////////////////////////////////
///

// Keeps a group in place at the left/right edge of a scrolling toolbar
// (see Overflow) while the rest scrolls underneath it - e.g. a "refresh"
// or "close" button that should always stay reachable. Needs its own
// opaque background to actually cover the content scrolling behind it,
// a matching end radius so it doesn't show a square corner poking past
// the pill's own rounded edge, and a small shadow on the scrolling side
// so it doesn't look like content just abruptly stops.
.toolbar-freeze-left,
.toolbar-freeze-right {
  position: sticky;
  z-index: 1;
  flex-shrink: 0;
  background-color: var(--md-sys-color-surface-variant);
}
.toolbar-freeze-left {
  left: 0;
  padding-right: 8px;
  border-radius: 20px 0 0 20px;
  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.25);
}
.toolbar-freeze-right {
  right: 0;
  padding-left: 8px;
  border-radius: 0 20px 20px 0;
  box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.25);
}

/// Track (segmented control)
///////////////////////////////////////////////////////
///

// A pill-shaped segmented control - e.g. "Today / Previous / Next" or a
// "Week / Month / Year" range picker - with a sliding highlight behind
// whichever item is active.
.toolbar-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 3px;
  border-radius: 999px;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}

// A track with no background/border of its own - just for spacing a group
// of items that don't need the pill-within-a-pill look.
.toolbar-track.toolbar-track-bare {
  padding: 3px 0;
  background-color: transparent;
  border-color: transparent;
}

// Positioned/sized by Toolbar's JS (offsetLeft/offsetWidth of the active
// .toolbar-track-item), not by CSS - the transition below is what makes
// that JS-driven move/resize animate instead of jumping.
.toolbar-track-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: 999px;
  background-color: var(--md-sys-color-primary);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), width .22s cubic-bezier(.2, .7, .3, 1), opacity .14s ease;

  // Only fade in once Toolbar's JS has measured and placed it for the
  // first time - otherwise it flashes at 0 width in the top-left corner
  // for a frame before the first real position is set.
  .toolbar-track.is-armed & {
    opacity: 1;
  }
}

.toolbar-track-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease;

  &:hover {
    color: var(--md-sys-color-on-surface);
  }
  &.is-active {
    font-weight: 600;
    color: var(--md-sys-color-on-primary);
  }
  &:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
  }
}

/// Slider
///////////////////////////////////////////////////////
///

// A pill container for a range-field, matching .toolbar-track's look -
// also fixes two things a bare range-field has inside a .toolbar: the
// native track line is var(--md-sys-color-surface-variant), the exact
// same color as .toolbar's own background, so it's invisible without a
// container giving it something else to contrast against; and this also
// vertically centers any label text/icons placed next to it.
.toolbar-slider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);

  .range-field {
    width: 120px;
    margin-top: 18px;
  }

  // Material icons default to 24px, which crowds a 34px-tall pill and
  // reads a lot heavier than adjacent 13-14px text labels - match the
  // track item's scale instead.
  i.material-icons {
    font-size: 18px;
  }

  span {
    line-height: 1;
    // Measured against the actual track/thumb center: a "-"/"+" glyph's
    // ink sits a few px below the middle of its own line box in this
    // font, even though the box itself is perfectly flex-centered - nudge
    // the glyph up to compensate.
    position: relative;
    top: -3px;
  }
}

/// Expandable search
///////////////////////////////////////////////////////
///

// A search field that starts as just an icon button and expands into a
// full text input once focused (or once it has a value) - Toolbar's JS
// toggles the .is-expanded class.
.toolbar-search {
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 34px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: width .2s cubic-bezier(.2, .7, .3, 1);

  &.is-expanded {
    width: 190px;
  }

  .toolbar-search-toggle {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
  }

  .toolbar-search-input {
    width: 0;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    font-size: 12px;
    opacity: 0;
    transition: opacity .12s ease;
  }

  &.is-expanded .toolbar-search-input {
    width: 150px;
    padding-right: 5px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toolbar-track-indicator {
    transition: opacity .14s ease;
  }
}

// Compact zoom group: circular actions and a percentage reset inside one pill.
.toolbar.toolbar-zoom:not(.fixed-action-btn) {
  background-color: var(--md-sys-color-surface);
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  gap: 2px;
  padding: 2px;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  flex-shrink: 0;
  > crazy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 32px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    line-height: 0;
  }
  > crazy-button > .btn {
    --button-height: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    border-radius: 999px;
  }
  > crazy-button.toolbar-zoom-reset > .btn {
    align-self: center;
    margin-block: auto;
    --button-height: 28px;
    height: 28px;
    min-height: 28px;
    min-width: 46px;
    margin-inline-end: 2px;
    padding-inline: 8px;
    font-size: 11px;
    border: 0;
    background: var(--md-sys-color-surface-variant);
  }
}

// A nested zoom group uses the parent toolbar spacing.
.toolbar:not(.fixed-action-btn) .toolbar.toolbar-zoom {
  margin: 0;
}

// Draw the two simple zoom symbols without relying on font glyph rasterization.
.toolbar.toolbar-zoom {
  > crazy-button:is(.toolbar-zoom-out, .toolbar-zoom-in) > .btn > i {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    font-size: 0;
    line-height: 0;
    &::before {
      content: '';
      position: absolute;
      left: 3px;
      top: 8px;
      width: 12px;
      height: 2px;
      background: currentColor;
    }
  }
  > crazy-button.toolbar-zoom-in > .btn > i::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 2px;
    height: 12px;
    background: currentColor;
  }
}

/// Prism command toolbars
///////////////////////////////////////////////////////
/// Keep copy controls separate from the full-width Material action bar.

div.code-toolbar > .toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-width: calc(100% - 1rem);
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    opacity: 1;

    > .toolbar-item > button.copy-to-clipboard-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 4px 12px;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 16px;
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        box-shadow: none;
        cursor: pointer;

        &:hover {
            background: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
        }

        &:focus-visible {
            outline: 2px solid var(--md-sys-color-primary);
            outline-offset: 2px;
        }
    }
}