////
///
/// Badge Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `badge` module,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module rather than
/// from this module's index, so at equal specificity the native rules win.
///
/// 26 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.Badge
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "../../01-core/external" as *;

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- tag  (from site-scape_ventures/src/static/scss/components/_tags.scss) --
    .ss-c-tag {
        display: inline-block;
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-medium);
        padding: var(--ss-spacing-1) var(--ss-spacing-3);
        background: var(--ss-color-gray-100);
        border-radius: var(--ss-radius-none);
        color: var(--ss-color-gray-600);
    }

    // -- tag-outline  (from site-scape_ventures/src/static/scss/components/_tags.scss) --
    .ss-c-tag-outline {
        background: transparent;
        border: q(1) solid var(--ss-color-gray-200);
    }

    // -- badge  (from site-geoid_org/src/static/scss/index.scss) --
    // Scoped under .ss-c-geoid: bare selector used undefined --color-accent
    // (transparent bg) + white text, rendering every badge invisible.
    .ss-c-geoid .ss-c-badge {
      padding-block: var(--ss-spacing-2);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;

      &--secondary {
        background: var(--ss-color-surface-alt);
        color: var(--ss-color-text);
        border: q(1) solid var(--ss-color-border);
      }



    }

    // -- pill  (from site-geoid_org/src/static/scss/index.scss) --
    .ss-c-pill {
        // (stripped @include)
      &:hover {
        border-color: var(--ss-color-accent);
        background: color-mix(in srgb, var(--ss-color-accent) 5%, transparent);
      }
    }

    // -- tag--dark  (from site-matter_tech/src/static/scss/components/_tags.scss) --
    .ss-c-tag--dark {
        background-color: var(--ss-color-black);
        color: var(--ss-color-white);
    }

    // -- tag--accent  (from site-matter_tech/src/static/scss/components/_tags.scss) --
    .ss-c-tag--accent {
        background-color: var(--ss-color-primary);
        color: var(--ss-color-white);
    }

    // -- tag--outline  (from site-matter_tech/src/static/scss/components/_tags.scss) --
    .ss-c-tag--outline {
        background-color: transparent;
        border: q(1) solid var(--ss-color-border);
        color: var(--ss-color-gray-600);
    }

    // -- type-badge  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-type-badge {
        display: inline-block;
        font-size: var(--ss-font-size-xs);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: var(--ss-spacing-1) var(--ss-spacing-2);
        border-radius: 0;

        &--taxonomy {
            background: unset;
            color: unset;
        }

        &--plant {
            background: unset;
            color: unset;
        }

        &--eco {
            background: unset;
            color: unset;
        }
    }

    // -- compliance-badges  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-compliance-badges {
        display: flex;
        flex-wrap: wrap;
        gap: unset;
    }

    // -- compliance-badge  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-compliance-badge {
        padding: var(--ss-spacing-2) var(--ss-spacing-4);
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-medium);
        background: var(--ss-color-gray-100);
        color: var(--ss-color-gray-600);
        border-radius: var(--ss-radius-none);
    }

    // -- trait-tag  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-trait-tag {
        padding: var(--ss-spacing-1) var(--ss-spacing-2);
        font-size: var(--ss-font-size-xs);
        font-weight: var(--ss-font-weight-medium);
        color: var(--ss-color-white);
        background: color-mix(in srgb, var(--ss-color-white) 20%, transparent);
        backdrop-filter: blur(q(8));
        border-radius: var(--ss-radius-none);
        border: q(1) solid color-mix(in srgb, var(--ss-color-white) 10%, transparent);
    }

    // -- theme-tag  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-theme-tag {
      font-family: var(--ss-font-family-mono);
      font-size: var(--ss-font-size-sm);
      padding: var(--ss-spacing-2) var(--ss-spacing-4);
      background: var(--ss-color-surface-alt);
      border: q(1) solid var(--ss-color-border);
      color: var(--ss-color-secondary);
      transition: all var(--ss-duration-150);

      &:hover {
        border-color: var(--ss-color-accent);
        color: var(--ss-color-accent);
      }
    }

    // -- badge--sm  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--lg  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--pill  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--square  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--circle  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--circle {
        --badge-radius: 50%;
        --badge-padding: #{q(1)};
        aspect-ratio: 1;
    }

    // -- badge--primary  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--primary {
        --badge-bg: var(--ss-color-primary);
        --badge-color: var(--ss-color-white);
    }

    // -- badge--accent  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--success  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--warning  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--danger  (from site-starling_studio/src/static/scss/app/_badge.scss) --

    // -- badge--muted  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--muted {
        --badge-bg: var(--ss-color-surface-alt);
        --badge-color: var(--ss-color-muted);
    }

    // -- badge--outline  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--outline {
        --badge-bg: transparent;
        --badge-border: 1px solid currentColor;
    }

    // -- badge--outline-primary  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge--outline-primary {
        --badge-bg: transparent;
        --badge-color: var(--ss-color-primary);
        --badge-border: 1px solid currentColor;
    }

    // -- badge-group  (from site-starling_studio/src/static/scss/app/_badge.scss) --
    .ss-c-badge-group {
        display: inline-flex;
        flex-wrap: wrap;
        gap: q(1);
    }
}