////
///
/// 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;
    @include flex;
    @include align--center;
    @include justify--center;

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

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

    color: inherit;

    ::before {
        color: inherit;
    }

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