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

///
/// Menu button with specific dimensions and transparent background
/// @group Button
///
@mixin ribbon__button {
    // background-color: var(--color_text_primary);
    // color: var(--color_fill_primary);
    @include reset_bleed;

    // position: relative;
    // overflow: visible;

    width: q(20);
    height: q(20);
    font-size: q(20);

    .i,
    .i::before,
    [class^="i_"]::before,
    [class*=" i_"]::before {
        color: var(--color_fill_primary) !important;
        // margin: 0;
        // font-size: q(25);
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // text-align: center;
        // vertical-align: middle;
        // font-weight: bold;
    }

    svg {
        stroke-width: 0;
    }
}

.ribbon__button {
    @include ribbon__button;
}

// .ribbon--inverted .ribbon__button {
//     @include ribbon__button(true); // inverted scheme
// }