/*!
 * Sidebar menu — presentation layer.
 *
 * Loaded after theme-dashtrap.css so it can refine the menu without editing
 * the skin. Scoped to #side-bar, so it reaches the application menu and
 * nothing else.
 *
 * The menu has no icons. That is the change this file is written around: a row
 * that used to be recognised by its glyph now has to be recognised by its
 * words, so the type carries a little more weight, the rows have more room to
 * breathe, and the group a row belongs to is said by spacing and alignment
 * rather than by a column of pictures.
 */

/* ------------------------------------------------------------------
   Rows
   ------------------------------------------------------------------ */

/* Relative so the active marker on a sub-item has something to sit against. */
#side-bar .sidebar-item,
#side-bar .sidebar-subitem {
    position: relative;
    letter-spacing: .01em;
}

/* A row is now a word, and a word needs a moment to be read as a target.
   Slightly slower than the 200ms the markup asks for, and on the properties
   that actually change -- transitioning `all` also animates the text colour
   swap on the active pill, which reads as a smear. */
#side-bar .sidebar-item,
#side-bar .sidebar-subitem {
    transition: background-color .18s ease, color .18s ease;
}

/* The label itself. `tw-truncate` on the anchor clips a long menu name at the
   sidebar's edge; the span keeps it from pushing the chevron off the row. */
#side-bar .sidebar-item > span {
    min-width: 0;
}

/* ------------------------------------------------------------------
   Section labels
   ------------------------------------------------------------------
   MENU / CUSTOM / COMPONENTS. With no icons, these are the only thing
   dividing one group of rows from the next, so they are given a hairline
   above them -- except the first, which needs no divider from the search
   box it already sits under.
   ------------------------------------------------------------------ */
#side-bar .sidebar-section {
    margin-top: 6px;
    border-top: 1px solid rgba(148, 133, 178, .16);
    padding-top: 14px;
}

#side-bar .sidebar-section:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 8px;
}

/* ------------------------------------------------------------------
   Sub-menu
   ------------------------------------------------------------------
   Children are their own rows now rather than bare text: each takes the
   same rounded shape as its parent, so hovering one gives the same
   feedback anywhere in the menu.
   ------------------------------------------------------------------ */
#side-bar .chiled .sidebar-subitem:hover,
#side-bar .chiled .sidebar-subitem:focus {
    background-color: rgba(255, 255, 255, .06);
}

/* The current child.

   It was not marked at all before this. theme-dashtrap.css does set a colour
   and weight for .theme-sidebar-child-active, but every child link also
   carries .theme-sidebar-child-hover, and the rule that colours that one --
   `body.skin-purple #side-bar a.theme-sidebar-child-hover`, at (1,2,2) --
   out-specifies the active rule at (1,2,1). So the open sub-item rendered in
   exactly the same grey as its siblings. The same trap is called out in that
   file for the top-level active item, where it was handled; the child was
   missed.

   Named here with both classes so it wins on specificity rather than on load
   order alone. */
body.skin-purple #side-bar a.sidebar-subitem.theme-sidebar-child-active {
    color: #FFFFFF;
    font-weight: 500;
    background-color: rgba(255, 255, 255, .08);
}

/* Marked on the guide rail as well as by colour.

   The rail is at 0.75rem from the item's leading edge and the child's own box
   starts at 1.25rem, so -0.5rem from the child lands exactly on the line. On a
   rail of near-identical words colour alone is a weak signal; the dot gives
   the eye somewhere to land. */
#side-bar .chiled .sidebar-subitem.theme-sidebar-child-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.5rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: currentColor;
}

/* ------------------------------------------------------------------
   The chevron on a parent row
   ------------------------------------------------------------------ */
#side-bar .drop_down > svg {
    opacity: .55;
    transition: opacity .18s ease;
}

/* A closed row points along the reading direction, which means the other way
   under a right-to-left language. Mirroring here keeps one set of paths in the
   presenter and in the toggle script rather than three; the open state is a
   chevron pointing down, and mirroring that leaves it pointing down. */
[dir="rtl"] #side-bar .drop_down > svg {
    transform: scaleX(-1);
}

#side-bar .drop_down:hover > svg,
#side-bar .drop_down.theme-sidebar-active > svg {
    opacity: 1;
}

/* ------------------------------------------------------------------
   Light skins
   ------------------------------------------------------------------
   Everything above is skin-neutral except the two colours that assume a
   dark sidebar. On a light one they would be invisible, so they are
   restated against the theme colour instead.
   ------------------------------------------------------------------ */
body:not(.skin-purple) #side-bar .sidebar-section {
    border-top-color: rgba(0, 0, 0, .07);
}

body:not(.skin-purple) #side-bar .chiled .sidebar-subitem:hover,
body:not(.skin-purple) #side-bar .chiled .sidebar-subitem:focus {
    background-color: color-mix(in srgb, var(--theme-700) 8%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #side-bar .sidebar-item,
    #side-bar .sidebar-subitem,
    #side-bar .drop_down > svg {
        transition: none;
    }
}