/*
 * Grouped covering order bar — Figma frame 5158:22443, shown above the grid while at least one kit
 * is ticked: a 2px action border on the light action surface, 16px padding, 24px between the three
 * items, all left-aligned — "Tout déselectionner", the count, then the order button.
 */

.mo-covering-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mo-spacing-sm);
    margin-bottom: var(--mo-spacing-sm);
    padding: var(--mo-scale-200);
    border: var(--mo-border-width-xs) solid var(--mo-border-action);
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-action-light);
}

.mo-covering-group[hidden] {
    display: none;
}

/* "Selection" (5194:22419), ticked variant: filled tick, then the underlined action-coloured label. */
.mo-covering-group__clear {
    display: inline-flex;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    padding: 0;
    border: 0;
    background: none;
    color: var(--mo-text-action);
    font: inherit;
    font-size: var(--mo-font-size-body-lg);
    line-height: var(--mo-line-height-body-lg);
    cursor: pointer;
}

.mo-covering-group__clear-label {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Same disc as the ticked card box (`tick`, 4257:956), but only drawn: the button is the control. */
.mo-covering-group__tick {
    flex: none;
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    box-sizing: border-box;
    border: 1.5px solid var(--mo-white);
    border-radius: var(--mo-radius-round);
    background-color: var(--mo-surface-action-dark);
}

.mo-covering-group__label {
    margin: 0;
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-lg);
    line-height: var(--mo-line-height-body-lg);
}