/* ============================================================================================
   Bortable demo - the styles of the live samples.

   The site's chrome, tokens and shared surfaces live in app.css (the site kit every Utilities demo
   shares); this file only draws what is Bortable's own - the lists, their items and the drag
   states - and it is written against the kit's --bb-* names, so it follows the light/dark theme
   with no rules of its own for either.
   ============================================================================================ */

/* The library's drag states, tinted with the site's brand color. html:root rather than :root:
   bit-bortable.css declares the same property on :root and is linked after this file, so a plain
   :root here would lose. It has to be set on the root itself, too: the library derives its state
   colors from it there, and those derived values are what every list inherits. */
html:root {
    --bit-bortable-accent-rgb: 18, 118, 198;
}

html:root[bit-theme="dark"] {
    --bit-bortable-accent-rgb: 79, 163, 244;
}

/* Side-by-side lists. They wrap under each other once the column is too narrow for two. */
.demo-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.demo-columns > .demo-col {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Fluent's Overline over each list. */
.demo-col-title {
    margin-bottom: .5rem;
    font-size: var(--fl-font-size-100);
    font-weight: var(--fl-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bb-text-soft);
}

.demo-col-title--spaced {
    margin-top: 1.75rem;
}

/* The live readout of a bound list. The span holds just the items, joined with ", ". */
.demo-order {
    margin: .875rem 0 0;
    font-size: var(--fl-font-size-200);
    color: var(--bb-text-muted);
    overflow-wrap: anywhere;
}

.demo-order + .demo-order {
    margin-top: .25rem;
}

.demo-order strong {
    margin-inline-end: .25rem;
    color: var(--bb-text);
}

.demo-order span {
    color: var(--bb-text);
    font-family: var(--bb-mono);
    font-size: .8125rem;
}

/* A list: a recessed tray of cards. Padding and a minimum height leave an area to drop into even
   when it is empty. */
.demo-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 520px;
    min-height: 3.5rem;
    padding: .5rem;
    background: var(--bb-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

/* In a column the tray fills it, so the shorter of two lists is as easy to drop into as the longer. */
.demo-col > .demo-list {
    flex: 1;
    max-width: none;
}

/* An item: a Fluent card at rest, raised a step on hover. */
.demo-item {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .625rem .875rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-medium);
    cursor: grab;
    transition: border-color var(--bb-motion-duration-short) var(--bb-motion-easing),
                box-shadow var(--bb-motion-duration-short) var(--bb-motion-easing);
}

.demo-item:hover {
    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
    box-shadow: var(--fl-shadow-4);
}

.demo-item.tinted {
    border-color: color-mix(in srgb, var(--bb-primary) 30%, transparent);
    background: var(--bb-primary-soft);
}

/* Locked by the Filter page's predicate. */
.demo-item.filtered {
    border-color: color-mix(in srgb, var(--bb-danger) 40%, transparent);
    background: var(--bb-danger-soft);
    color: var(--bb-danger-text);
    cursor: not-allowed;
}

/* The ghost: the dragged item in its list, and the placeholder that previews where it lands in another. */
.demo-ghost {
    opacity: 1 !important;
    border-style: dashed !important;
    border-color: var(--bb-primary) !important;
    background: var(--bb-primary-soft) !important;
    box-shadow: none !important;
}

/* The library's swap and selection states, restated for the cards: .demo-item paints its own
   background, border and shadow, and these have to win over it, over .tinted and over :hover. */
.demo-item.bit-bortable-swap-highlight,
.nested-item.bit-bortable-swap-highlight {
    background: linear-gradient(var(--bit-bortable-swap-bg), var(--bit-bortable-swap-bg)), var(--bb-surface);
    outline: var(--bit-bortable-swap-outline);
    outline-offset: -2px;
}

.demo-item.bit-bortable-selected {
    border-color: transparent;
    background: linear-gradient(var(--bit-bortable-selected-bg), var(--bit-bortable-selected-bg)), var(--bb-surface);
    box-shadow: var(--bit-bortable-selected-ring);
}

/* The drag handle of the Handle page: the only part of a row that starts a drag. */
.handle {
    margin-inline-end: .625rem;
    padding: 0 .125rem;
    color: var(--bb-text-soft);
    font-size: 1.0625rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.handle:hover {
    color: var(--bb-primary);
}

.handle:active {
    cursor: grabbing;
}

#handle-list .demo-item {
    cursor: default;
}

/* Grid example: the list is a CSS grid; each item wraps a square. */
.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .625rem;
    max-width: 520px;
}

.grid-square {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    border-radius: var(--bb-radius-lg);
    background: linear-gradient(135deg, var(--bb-primary) 0%, var(--bb-primary-active) 100%);
    box-shadow: var(--bb-shadow-card);
    color: var(--bb-primary-text);
    font-size: var(--fl-font-size-400);
    font-weight: var(--fl-weight-semibold);
    cursor: grab;
}

.demo-grid > .bit-bortable-item:hover .grid-square {
    box-shadow: var(--bb-shadow-raised);
}

/* The square covers its wrapper, so the ghost state is drawn on the square, and the wrapper -
   square where the square is rounded - stays clear. */
.demo-grid > .demo-ghost {
    background: transparent !important;
}

.demo-ghost .grid-square {
    outline: 2px dashed var(--bb-primary);
    outline-offset: -2px;
    background: var(--bb-primary-soft);
    box-shadow: none;
    color: var(--bb-primary);
}

/* Nested example. Every item holds a list of its own; the padding and minimum height keep an empty
   branch big enough to drop into. */
.nested-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-height: 2.5rem;
    padding: .4375rem;
    background: color-mix(in srgb, var(--bb-primary) 4%, transparent);
    border: 1px dashed color-mix(in srgb, var(--bb-primary) 35%, transparent);
    border-radius: var(--bb-radius);
}

#nested-root {
    max-width: 640px;
}

.nested-item {
    padding: .5rem .5rem .5625rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow-card);
    cursor: grab;
}

/* Only the innermost item under the pointer lights up, not every item around it. */
.nested-item:hover:not(:has(.nested-item:hover)) {
    border-color: color-mix(in srgb, var(--bb-primary) 45%, transparent);
}

.nested-item__name {
    margin: 0 0 .375rem .1875rem;
    color: var(--bb-text);
    font-size: var(--fl-font-size-200);
    font-weight: var(--fl-weight-medium);
}

/* Events example: the log itself is the kit's .bb-log. */
.event-log {
    margin: 1rem 0 0;
    max-height: 220px;
}

/* Thresholds example. */
.threshold-controls {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-bottom: 1.25rem;
    padding: .875rem 1rem;
    background: var(--bb-surface-sunken);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
}

.threshold-controls label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    font-size: var(--fl-font-size-200);
    color: var(--bb-text);
}

.threshold-controls strong {
    min-width: 2.6rem;
    font-family: var(--bb-mono);
    font-variant-numeric: tabular-nums;
}

.threshold-controls input[type="range"] {
    flex: 1 1 160px;
    max-width: 260px;
}

.threshold-controls .threshold-check {
    gap: .5rem;
}

.threshold-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 300px;
}

/* The swap-zone visualizer. Each item draws its active zones, sized by the --zone and
   --inverted-zone the page sets on the list: one band of --zone across the middle, or with
   InvertSwap two bands of --inverted-zone / 2 at the edges - the geometry bit-bortable.js
   hit-tests against. The list is measured top to bottom, the grid left to right
   (Direction="Horizontal"). */
.show-zones > .bit-bortable-item {
    position: relative;
}

.show-zones > .bit-bortable-item::before,
.show-zones > .bit-bortable-item::after {
    content: "";
    position: absolute;
    border: 1px dashed color-mix(in srgb, var(--bb-primary) 60%, transparent);
    border-radius: var(--bb-radius-sm);
    background: color-mix(in srgb, var(--bb-primary) 14%, transparent);
    pointer-events: none;
}

.show-zones > .bit-bortable-item::after {
    display: none;
}

.threshold-list.show-zones > .bit-bortable-item::before {
    left: 3px;
    right: 3px;
    top: calc((1 - var(--zone)) * 50%);
    bottom: calc((1 - var(--zone)) * 50%);
}

.threshold-list.show-zones.zones-inverted > .bit-bortable-item::before,
.threshold-list.show-zones.zones-inverted > .bit-bortable-item::after {
    display: block;
    left: 3px;
    right: 3px;
    height: calc(var(--inverted-zone) * 50%);
}

.threshold-list.show-zones.zones-inverted > .bit-bortable-item::before {
    top: 0;
    bottom: auto;
}

.threshold-list.show-zones.zones-inverted > .bit-bortable-item::after {
    bottom: 0;
}

.threshold-grid.show-zones > .bit-bortable-item::before,
.threshold-grid.show-zones > .bit-bortable-item::after {
    border-color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .26);
}

.threshold-grid.show-zones > .bit-bortable-item::before {
    top: 3px;
    bottom: 3px;
    left: calc((1 - var(--zone)) * 50%);
    right: calc((1 - var(--zone)) * 50%);
}

.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::before,
.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::after {
    display: block;
    top: 3px;
    bottom: 3px;
    width: calc(var(--inverted-zone) * 50%);
}

.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::before {
    left: 0;
    right: auto;
}

.threshold-grid.show-zones.zones-inverted > .bit-bortable-item::after {
    right: 0;
}

/* The "View code" toggle: the kit's secondary button, with the caret and the code glyph in it. */
.demo-code__caret {
    font-size: .8em;
    color: var(--bb-text-soft);
}

.demo-code__glyph {
    font-family: var(--bb-mono);
    color: var(--bb-primary);
}

/* The landing page's hero: the live list under the sample's markup, inside the window frame. */
.home-hero-live {
    padding: 1rem;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-border);
}

.home-hero-live .demo-list {
    max-width: none;
}