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

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

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

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

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

// @mixin ribbon__title($slot: ribbon--center) {
//     @include reset_bleed;
//     @include icon_bar--horizontal;
//     @include align_self--start;
//     @include font--size('04');
//     @include align--center;
//     @include character--hyperlink--clean;
//     @include color_scheme_dark;
//     @include justify--center;

//     align-content: center;
//     height: 100%;
//     grid-area: $slot;

//     @media screen and (min-width: $media_md) {
//         @if $slot == ribbon--center {
//             grid-area: ribbon--left;
//             @include justify--start;
//         }
//     }
// }

/// Core wrapper for a ribbon title block
@mixin ribbon__title {
    @include reset_bleed;

    @include icon_bar--horizontal;
    @include align_self--start;
    // @include font--size('04');
    @include align--center;
    @include character--hyperlink--clean;
    // @include color_scheme_dark;
    @include justify--center;

    font-size: q(20);
    align-content: center;
    height: 100%;
    // grid-area: ribbon--center;
    gap: 0;

    @media screen and (min-width: $media_md) {
        // grid-area: ribbon--left;
        @include justify--start;
    }
}

/// Logo block inside a ribbon title
@mixin ribbon__title__logo {
    padding-left: calc($ribbon_spacing / 2);
    padding-right: calc($ribbon_spacing / 2);
    // @include icon--size(
    //     04
    // ); // } //     position: relative; //     height: 100%; //     width: 100%; //     // @include color_scheme_dark; //     @include icon--size(04) svg {

    min-width: calc((q(40)) - (q(8)));
}

/// Text block inside a ribbon title
@mixin ribbon__title__text {
    @include character--hyperlink--clean;
    @include invisible;
    // @include font--size('03');
    display: none;

    @media screen and (min-width: $media_md) {
        @include visible;
        display: inherit;
        white-space: nowrap;
        overflow: visible;
    }
}

@mixin ribbon__title__image {
    width: auto;
    height: auto;
    min-height: $ribbon_height_top;
    align-content: center;

    img {
        display: block;
        height: calc($ribbon_height_top - ($ribbon_padding * 2));
        width: auto;
        min-width: 100%;
    }
}

@mixin ribbon__title__logo--icon {
    .i,
    .i:before {
        color: var(--color_fill_primary);
    }
}