/* ==============================================
   ICON BUCKETS COMPONENT
   ============================================== */

:root {
    --icon-bucket-tile-size-compact: 40px;
    --icon-bucket-content-size-compact: 20px;
    --icon-bucket-tile-size-grid: clamp(
        var(--icon-bucket-tile-size-compact),
        calc((100vw - (2 * var(--spa-shell-inset-inline-mobile)) - (3 * var(--space-md))) / 4),
        calc(var(--space-xl) + var(--space-lg))
    );
    --icon-bucket-content-size-grid: calc(var(--icon-bucket-tile-size-grid) / 2);
}

:is(.icon-bucket-row, .workout-card__choice-summary) {
    --icon-bucket-row-gap: var(--space-xs);
    --icon-bucket-bucket-gap: var(--space-xs);
    --icon-bucket-tile-size: var(--icon-bucket-tile-size-compact);
    --icon-bucket-image-size: var(--icon-bucket-content-size-compact);
    --icon-bucket-tile-bg: var(--bg-tertiary);
    --icon-bucket-tile-border: var(--border-color);

    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--icon-bucket-row-gap);
    min-width: 0;
}

.icon-bucket-row {
    overflow: hidden;
}

:is(.workout-card__choice-summary) {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

:is(.icon-bucket, .workout-card__choice-bucket) {
    align-items: center;
    display: flex;
    gap: var(--icon-bucket-bucket-gap, var(--space-xs));
    min-width: 0;
}

.workout-card__choice-summary :is(.icon-bucket, .workout-card__choice-bucket) {
    flex: 0 0 auto;
}

:is(.icon-bucket__tile, .workout-card__choice-tile) {
    align-items: center;
    background-color: var(--icon-bucket-tile-bg, var(--bg-secondary));
    border: 1px solid var(--icon-bucket-tile-border, var(--border-color));
    border-radius: var(--radius-buttons);
    box-sizing: border-box;
    color: var(--text-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--icon-bucket-tile-size);
    justify-content: center;
    width: var(--icon-bucket-tile-size);
}


:is(.icon-bucket__image, .workout-card__choice-image) {
    display: block;
    filter: invert(1);
    height: var(--icon-bucket-image-size, calc(var(--space-md) + var(--space-xs)));
    object-fit: contain;
    width: var(--icon-bucket-image-size, calc(var(--space-md) + var(--space-xs)));
}

:is(.icon-bucket__tile, .workout-card__choice-tile).icon-bucket__tile--light :is(.icon-bucket__image, .workout-card__choice-image) {
    filter: none;
}

:is(.icon-bucket__text, .workout-card__choice-time-text) {
    color: var(--text-primary);
    font-family: var(--font-node);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}

:is(.icon-bucket__tile, .workout-card__choice-tile) > :is(.icon-bucket__text, .workout-card__choice-time-text) {
    font-family: var(--font-node) !important;
}

:is(.icon-bucket__tile, .workout-card__choice-tile).icon-bucket__tile--light :is(.icon-bucket__text, .workout-card__choice-time-text) {
    color: var(--bg-primary);
}

:is(.icon-bucket__tile--disclosure, .current-plan-bucket-tile--disclosure) {
    transition: transform var(--transition-fast);
}