/* ============================================================================
   SELECTGROUP — segmented radio/checkbox control.

   Currently UNUSED: its only consumers were the CDR and analytics date-range
   pickers, which now use the shared .time-range-select segmented control
   (css/components/time-range-select.css). Kept for now pending removal of the
   file and its css.html registration; no markup references these classes.

   Consolidated from theme.css (vendor) and theme-override.css (app).
   Loaded after theme.css. Values are the resolved
   cascade result as of the consolidation — no intended visual change.
   ============================================================================ */

.selectgroup {
    display: inline-flex;
}

.selectgroup-item {
    flex-grow: 1;
    position: relative;
    /* !important is load-bearing: `.form-group label` (0,1,1) in both
       theme.css and theme-override.css sets font-weight 600/500 and would
       otherwise beat this (0,1,0) selector on the <label> wrapper. */
    font-weight: 400 !important;
}

.selectgroup-item + .selectgroup-item {
    margin-left: -1px;
}

.selectgroup-item:not(:first-child) .selectgroup-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.selectgroup-item:not(:last-child) .selectgroup-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.selectgroup-input {
    opacity: 0;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

.selectgroup-button {
    display: block;
    border: 1px solid rgba(0, 40, 100, 0.12);
    text-align: center;
    padding: 0.375rem 1rem;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #9aa0ac;
    user-select: none;
    font-size: 14px;
    line-height: 1.5rem;
    min-width: 2.375rem;
}

/* Dark chrome swaps the button hairline to the shared input border token.
   The light theme sets body[data-background-color="white"], so the rule above
   keeps its vendor border there — same as today. */
body[data-background-color="dark"] .selectgroup-button {
    border: 1px solid var(--input-border);
}

.selectgroup-button-icon {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: 1rem;
}

.selectgroup-input:checked + .selectgroup-button {
    border-color: var(--color-blue);
    z-index: 1;
    color: var(--color-blue);
    background: rgba(var(--color-blue-rgb), 0.15);
}

/* Alt-bg groups (the CDR/analytics pickers) use a deeper checked fill. */
.selectgroup.selectgroup-alt-bg .selectgroup-input:checked + .selectgroup-button {
    background: rgba(var(--color-blue-rgb), 0.23);
}

.selectgroup-input:focus + .selectgroup-button {
    border-color: var(--color-blue);
    z-index: 2;
    color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(var(--color-blue-rgb), 0.25);
}

/* ---------------------------------- PILLS --------------------------------- */

.selectgroup-pills {
    flex-wrap: wrap;
    align-items: flex-start;
}

.selectgroup-pills .selectgroup-item {
    margin-right: .5rem;
    flex-grow: 0;
}

.selectgroup-pills .selectgroup-button {
    /* !important is load-bearing: the .selectgroup-item:not(:first-child|
       :last-child) .selectgroup-button corner-flattening rules above are
       (0,3,0) and would beat this (0,2,0) selector, squaring off the pills. */
    border-radius: 50px !important;
}

/* -------------------------------- VERTICAL -------------------------------- */

/* No template usage as of this consolidation; carried over verbatim. */
.selectgroup-vertical .selectgroup-item {
    margin-left: 0;
}

.selectgroup-vertical .selectgroup-button {
    color: #31353d;
}