// ============================================================================
// Components | Icon Bar
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../head_layout" as *;

@use "../../soul_type" as *;

///
/// Mixin for creating a basic icon bar.
/// Sets up a grid display for icons with configurable gap, alignment, and justification.
/// @group IconBar
///
@mixin icon_bar {
    display: grid;
    gap: calc(q(16));
    justify-items: center;
    align-items: center;
}

///
/// Mixin for creating a horizontal icon bar.
/// This arranges icons in a single row with a specified height and minimal column width.
/// @group IconBar
///
@mixin icon_bar--horizontal {
    @include icon_bar;
    grid-template-rows: baseline(4);
    grid-auto-columns: min-content;
    grid-auto-flow: column;
    // Optional: customize the gap if needed
    // gap: $ribbon_spacing;
}

///
/// Mixin for creating a vertical icon bar.
/// This arranges icons in a single column with a specified width and minimal row height.
/// @group IconBar
///
@mixin icon_bar--vertical {
    @include icon_bar;
    grid-template-columns: baseline(4);
    grid-auto-rows: min-content;
    grid-auto-flow: row;
}

/// Icon bar item base styling
/// @group IconBar
@mixin icon_bar--item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: q(12);
    text-align: center;
    text-decoration: none;
    color: var(--color_text_primary);
    transition: background-color 0.2s ease;

    &:hover {
        background-color: var(--color_fill_secondary);
    }
}

/// Active state for icon bar items
/// @group IconBar
@mixin icon_bar--item-active {
    background-color: var(--color_accent_primary);
    color: var(--color_fill_primary);
}