////
///
/// Button Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `button` 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.
///
/// 35 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.Button
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

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

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

@layer ss.components {
    // -- btn  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--ss-spacing-2);
        font-family: var(--ss-font-family-sans);
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-medium);
        padding: var(--ss-spacing-3) var(--ss-spacing-6);
        border-radius: var(--ss-radius-none);
        transition: all var(--ss-duration-200) ease;
        cursor: pointer;
        white-space: nowrap;
    }

    // -- btn-icon  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-icon {
        width: q(16);
        height: q(16);
        transition: transform var(--ss-duration-200) ease;
    }

    // -- btn-primary  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-primary {
        color: var(--ss-color-white);
        background: var(--ss-color-primary);

        &:hover {
            background: var(--ss-color-primary);
        }
    }

    // -- btn-secondary  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-secondary {
        color: var(--ss-color-primary);
        background: var(--ss-color-gray-100);

        &:hover {
            background: var(--ss-color-gray-200);
        }
    }

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

        &:hover {
            border-color: var(--ss-color-primary);
            background: var(--ss-color-primary);
            color: var(--ss-color-white);
        }
    }

    // -- btn-lg  (from site-scape_ventures/src/static/scss/components/_buttons.scss) --
    .ss-c-btn-lg {
        font-size: var(--ss-font-size-base);
        padding: var(--ss-spacing-4) var(--ss-spacing-8);
        border-radius: var(--ss-radius-none);
    }

    // -- button  (from site-scape_foundation/src/static/scss/app/_button.scss) --
    .ss-c-button {
        // NOTE: removed `border-radius: 0 !important` — it outranked the
        // button module's --rounded/--pill variants (this layer > components).
    }

    // -- btn--primary  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--primary {
      background: var(--ss-color-accent);
      color: var(--ss-color-white);
      border-color: var(--ss-color-accent);
      box-shadow: 0 q(4) q(6) q(-1) color-mix(in srgb, var(--ss-color-accent) 20%, transparent);

      &:hover:not(:disabled) {
        background: var(--ss-color-accent-highlight);
        border-color: var(--ss-color-accent-highlight);
        box-shadow: 0 q(10) q(15) q(-3) color-mix(in srgb, var(--ss-color-accent) 30%, transparent);
        transform: translateY(q(-2));
      }

      &:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 q(4) q(6) q(-1) color-mix(in srgb, var(--ss-color-accent) 20%, transparent);
      }
    }

    // -- btn--outline  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--outline {
      background: transparent;
      color: var(--ss-color-text);
      border-color: var(--ss-color-border);

      &:hover:not(:disabled) {
        border-color: var(--ss-color-accent);
        color: var(--ss-color-accent);
        background: color-mix(in srgb, var(--ss-color-accent) 5%, transparent);
      }

      &:active:not(:disabled) {
        background: color-mix(in srgb, var(--ss-color-accent) 10%, transparent);
      }
    }

    // -- btn--secondary  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--secondary {
      background: var(--ss-color-surface-alt);
      color: var(--ss-color-text);
      border-color: var(--ss-color-border);

      &:hover:not(:disabled) {
        background: var(--ss-color-surface);
        border-color: var(--ss-color-accent);
      }

      &:active:not(:disabled) {
        background: var(--ss-color-surface);
      }
    }

    // -- btn--ghost  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--ghost {
      background: transparent;
      color: var(--ss-color-accent);
      border-color: transparent;

      &:hover:not(:disabled) {
        background: color-mix(in srgb, var(--ss-color-accent) 10%, transparent);
        color: var(--ss-color-accent-highlight);
      }

      &:active:not(:disabled) {
        background: color-mix(in srgb, var(--ss-color-accent) 15%, transparent);
      }
    }

    // -- btn--success  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--success {
      background: var(--ss-color-success);
      color: var(--ss-color-white);
      border-color: var(--ss-color-success);

      &:hover:not(:disabled) {
        opacity: 0.9;
        transform: translateY(q(-2));
      }
    }

    // -- btn--warning  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--warning {
      background: var(--ss-color-warning);
      color: var(--ss-color-white);
      border-color: var(--ss-color-warning);

      &:hover:not(:disabled) {
        opacity: 0.9;
        transform: translateY(q(-2));
      }
    }

    // -- btn--error  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--error {
      background: var(--ss-color-error);
      color: var(--ss-color-white);
      border-color: var(--ss-color-error);

      &:hover:not(:disabled) {
        opacity: 0.9;
        transform: translateY(q(-2));
      }
    }

    // -- btn--sm  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--sm {
      padding: var(--ss-spacing-2) var(--ss-spacing-4);
      font-size: q(14);
      border-radius: var(--ss-radius-sm);
    }

    // -- btn--md  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--md {
      padding: var(--ss-spacing-4) var(--ss-spacing-6);
      font-size: q(15);
    }

    // -- btn--lg  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--lg {
      padding: var(--ss-spacing-6) var(--ss-spacing-12);
      font-size: q(16);
      border-radius: var(--ss-radius-lg);
    }

    // -- btn--xl  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--xl {
      padding: var(--ss-spacing-12) var(--ss-spacing-24);
      font-size: q(18);
      border-radius: var(--ss-radius-lg);
    }

    // -- btn--block  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--block {
      width: 100%;
      display: flex;
    }

    // -- btn--fullwidth  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--fullwidth {
      width: 100%;
    }

    // -- btn-group  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn-group {
      display: flex;
      gap: 0;

      .ss-c-btn {
        border-radius: 0;
        flex: 1;

        &:first-child {
          border-top-left-radius: var(--ss-radius-md);
          border-bottom-left-radius: var(--ss-radius-md);
        }

        &:last-child {
          border-top-right-radius: var(--ss-radius-md);
          border-bottom-right-radius: var(--ss-radius-md);
        }

        &:not(:last-child) {
          border-right: q(1) solid var(--ss-color-border);
        }
      }

      // (stripped @include block)

    }

    // -- btn--icon  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--icon {
      padding: var(--ss-spacing-4);
      border-radius: var(--ss-radius-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;

      &.ss-c-btn--sm {
        padding: q(4);
      }

      &.ss-c-btn--lg {
        padding: var(--ss-spacing-6);
      }
    }

    // -- btn--animated  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn--animated {
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: color-mix(in srgb, var(--ss-color-white) 30%, transparent);
        transform: translate(-50%, -50%);
        // (stripped @include block)

      }

      &:active::before {
        width: q(300);
        height: q(300);
      }
    }

    // -- btn-spinner  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn-spinner {
      display: inline-block;
      width: 1em;
      height: 1em;
      border: q(2) solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      // (stripped @include block)

    }

    // -- btn-loading  (from site-geoid_org/src/static/scss/components/_button.scss) --
    .ss-c-btn-loading {
      .ss-c-btn-label {
        visibility: hidden;
        position: absolute;
      }

      .ss-c-btn-spinner {
        display: inline-block;
      }
    }

    // -- btn--link  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--link {
        background-color: transparent;
        color: var(--ss-color-text);
        border-color: transparent;
        padding: 0;
        font-weight: var(--ss-font-weight-normal);
        letter-spacing: unset;
        text-transform: uppercase;

        &::after {
            content: '→';
            margin-left: unset;
            transition: transform var(--ss-duration-200) ease;
        }

        &:hover:not(:disabled) {
            color: var(--ss-color-gray-500);

            &::after {
                transform: translateX(q(4));
            }
        }
    }

    // -- btn--accent  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--accent {
        background-color: var(--ss-color-primary);
        color: var(--ss-color-white);
        border-color: var(--ss-color-primary);

        &:hover:not(:disabled) {
            background-color: var(--ss-color-primary);
            border-color: var(--ss-color-primary);
            color: var(--ss-color-white);
        }
    }

    // -- btn--small  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--small {
        padding: var(--ss-spacing-3) var(--ss-spacing-6);
        font-size: var(--ss-font-size-xs);
    }

    // -- btn--large  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--large {
        padding: var(--ss-spacing-6) var(--ss-spacing-12);
        font-size: var(--ss-font-size-sm);

        // (stripped @include block)

    }

    // -- btn__icon  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn__icon {
        width: q(14);
        height: q(14);

        svg {
            width: 100%;
            height: 100%;
        }
    }

    // -- btn--icon-only  (from site-matter_tech/src/static/scss/components/_buttons.scss) --
    .ss-c-btn--icon-only {
        padding: unset;

        .ss-c-btn__icon {
            width: q(18);
            height: q(18);
        }
    }

    // -- btn-sm  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-btn-sm {
        padding: var(--ss-spacing-2) var(--ss-spacing-4);
        font-size: var(--ss-font-size-xs);
    }

    // -- btn-ghost  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-btn-ghost {
        background: transparent;
        color: var(--ss-color-gray-700);

        &:hover {
            background: var(--ss-color-gray-100);
        }
    }

    // -- button--primary  (from site-zoo_foo/src/static/scss/index.scss) --
    // Scoped under .ss-c-zoo so the site-specific palette (redefined
    // $color-accent = #000 at this point in the file) doesn't override the
    // button module's --primary/--ghost variants globally.

    // -- button--ghost  (from site-zoo_foo/src/static/scss/index.scss) --
    .ss-c-zoo .ss-c-button--ghost {
        border: q(1) solid var(--ss-color-primary);
    }
}