import { css } from '@genesislcap/web-core';

export const styles = css`
  :host {
    display: block;
  }

  :host([hidden]) {
    display: none;
  }

  .picker {
    position: relative;
    padding: 6px calc(var(--design-unit) * 3px);
    background-color: var(--neutral-layer-2);
  }

  /* Clipping wrapper. The inner segmented-control is naturally inline-flex
     and auto-sizes to its segments, so it would overflow the panel without
     ever reporting scrollWidth > clientWidth. By giving the wrapper a
     constrained width (flex+min-width:0) and overflow:hidden, the wrapper's
     scrollWidth reflects the segments' natural width while clientWidth is
     the available width — that's what we measure to decide on the fallback. */
  .segmented-row {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* When the fallback select is showing, take the segmented row out of layout
     but keep it in the DOM so the ResizeObserver can re-measure when the
     container grows back and we can swap back to segmented-control. */
  .picker[data-effective='select'] .segmented-row {
    position: absolute;
    inset: 6px calc(var(--design-unit) * 3px);
    visibility: hidden;
    pointer-events: none;
  }

  .segmented-control {
    flex: 0 0 auto;
  }

  .select-fallback {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .select-label {
    font-family: var(--body-font);
    font-size: 0.8em;
    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
  }

  .select-control {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font-family: var(--body-font);
    font-size: 0.85em;
    cursor: pointer;
  }

  .select-control:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
  }
`;
