// ============================================================================
// 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;
}

// Vertical Example
// .icon-bar {
//   width: 90px; /* Set a specific width */
//   background-color: #555; /* Dark-grey background */
// }

// .icon-bar a {
//   display: block; /* Make the links appear below each other instead of side-by-side */
//   text-align: center; /* Center-align text */
//   padding: 16px; /* Add some padding */
//   transition: all 0.3s ease; /* Add transition for hover effects */
//   color: white; /* White text color */
//   font-size: 36px; /* Increased font-size */
// }

// .icon-bar a:hover {
//   background-color: #000; /* Add a hover color */
// }

// .active {
//   background-color: #04AA6D; /* Add an active/current color */
// }

// Horizontal Example
// .icon-bar {
//   width: 100%; /* Full-width */
//   background-color: #555; /* Dark-grey background */
//   overflow: auto; /* Overflow due to float */
// }

// .icon-bar a {
//   float: left; /* Float links side by side */
//   text-align: center; /* Center-align text */
//   width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
//   padding: 12px 0; /* Some top and bottom padding */
//   transition: all 0.3s ease; /* Add transition for hover effects */
//   color: white; /* White text color */
//   font-size: 36px; /* Increased font size */
// }

// .icon-bar a:hover {
//   background-color: #000; /* Add a hover color */
// }

// .active {
//   background-color: #04AA6D; /* Add an active/current color */
// }