/* Fluent look: its signature touches (plan 09). Values come from fluent.tokens.css. */

/* Fields: a darker bottom stroke, and an accent underline instead of a focus ring */
:root[data-look="fluent"] :is(.form-control, .form-select) {
    border-bottom-color: var(--opdms-text-secondary);
}
:root[data-look="fluent"] :is(.form-control, .form-select):focus {
    border-color: var(--opdms-border-strong);
    border-bottom-color: var(--opdms-primary);
    box-shadow: inset 0 -2px 0 var(--opdms-primary);
}

/* Buttons: the black-and-white keyboard focus ring */
:root[data-look="fluent"] .btn:focus-visible {
    box-shadow: var(--opdms-focus);
}

:root[data-look="fluent"] .form-label {
    font-weight: 600;
    font-size: var(--opdms-fs-sm);
}

/* The brand-coloured top bar: everything on it reads in the bar's foreground colour */
:root[data-look="fluent"] #div4TopNavBarComp,
:root[data-look="fluent"] #div4TopNavBarComp :is(a, .btn-link, .topnav-menu-btn, .topnav-icon, .topnav-label) {
    color: var(--opdms-nav-fg);
}
:root[data-look="fluent"] #div4TopNavBarComp {
    border-bottom-color: var(--opdms-nav-line);
}
:root[data-look="fluent"] .topnav-link {
    border-color: color-mix(in srgb, var(--opdms-nav-fg) 45%, transparent);
}
:root[data-look="fluent"] #div4TopNavBarComp .btn {
    --bs-btn-color: var(--opdms-nav-fg);
    --bs-btn-hover-color: var(--opdms-nav-fg);
    --bs-btn-active-color: var(--opdms-nav-fg);
}
:root[data-look="fluent"] .topnav-link:hover {
    background-color: color-mix(in srgb, var(--opdms-nav-fg) 15%, transparent);
}
:root[data-look="fluent"] .topnav-link.topnav-active {
    background-color: var(--opdms-nav-fg);
}
:root[data-look="fluent"] :is(.topnav-link.topnav-active, .topnav-link.topnav-active span, .topnav-link.topnav-active .topnav-icon) {
    color: var(--opdms-nav-bg) !important;
}

/* Section switchers (Comps/OPSegmentedButtons): Fluent's pivot -- plain text tabs, a soft
   fill on hover, and a short rounded accent bar under the chosen one. */
:root[data-look="fluent"] .op-seg.btn-group {
    gap: 2px;
}
:root[data-look="fluent"] .op-seg.btn-group > .btn {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--opdms-muted-strong);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--opdms-fill);
    --bs-btn-hover-color: var(--opdms-text);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--opdms-fill);
    --bs-btn-active-color: var(--opdms-text);
    --bs-btn-active-border-color: transparent;
    margin-left: 0;
    border-radius: var(--opdms-radius-btn);
}
:root[data-look="fluent"] .op-seg.btn-group > .btn[aria-pressed="true"] {
    --bs-btn-color: var(--opdms-text);
}
:root[data-look="fluent"] .op-seg.btn-group > .btn[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 1px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--opdms-primary);
}