////
///
/// Ribbon Base Styles
/// ===========================================================================
///
/// @group Ribbon
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @todo None
/// @access public
///
////

// ============================================================================
// Imports
// ============================================================================

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

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

// ============================================================================
// Mixins
// ============================================================================

@mixin ribbon__nav {
    @include icon_bar--horizontal;
    @include character--hyperlink--clean;
    @include justify--center;
    align-content: center;
    height: 100%;
    @media screen and (min-width: $media_md) {
        @include justify--center;
        // grid-area: ribbon--center;
    }
}

@mixin ribbon__nav_button {
    @include visible;
    display: inherit;
    @media screen and (min-width: $media_md) {
        @include invisible;
        display: none;
    }
}

@mixin ribbon__nav__list {
    // @include color_scheme_dark;
    align-content: left;
    position: absolute;
    z-index: 9999;
    top: $ribbon_height;
    left: 0;
    width: 100%;
    padding-top: $ribbon_spacing;
    padding-bottom: 2 * $ribbon_spacing;

    display: grid !important;
    gap: 2 * $ribbon_spacing;
    justify-items: center;
    align-items: center;
    grid-auto-rows: min-content;
    grid-auto-flow: column;
    // @include invisible;

    padding: 0;
    margin: 0;

    max-width: 100%;
    width: max-content;

    list-style-type: none;
    list-style-position: none;
    list-style-type: none;

    &.active {
        // @include visible;
    }

    @media screen and (min-width: $media_md) {
        // @include visible;
        // @include icon_bar--horizontal;
        display: grid;
        grid-auto-flow: column;
        gap: 2 * $ribbon_spacing;
        justify-items: center;
        align-items: center;

        align-content: center;
        top: auto;
        left: auto;
        padding: 0;

        position: static;
        width: max-content;
        max-width: 100%;
        overflow: hidden;
    }
}

@mixin ribbon__nav__list__item--in-ribbon {
    // @include flex--col;
    // @include align--center;
    // @include justify--center;
    padding-left: calc($ribbon_spacing / 2);
    padding-right: calc($ribbon_spacing / 2);
    height: 100%;
    display: block;
}

@mixin ribbon__nav__list__item {
    @include justify--end;
    align-content: center;
    height: 100%;
}

@mixin ribbon__nav__list__item__text {
    @include font--size("03");
    white-space: nowrap;
    overflow: hidden;
}