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

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

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

@layer ss.components {
    // -- social-links-inline  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-social-links-inline {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ss-spacing-4);
    }

    // -- social-link-inline  (from site-scape_ventures/src/static/scss/sections/_contact.scss) --
    .ss-c-social-link-inline {
        font-weight: var(--ss-font-weight-medium);
        color: var(--ss-color-gray-600);

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

    // -- social-link  (from site-speckle_org/src/static/scss/components/_cards.scss) --
    .ss-c-social-link {
      width: q(44);
      height: q(44);
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--ss-color-surface-alt);
      border: q(1) solid var(--ss-color-border);
      color: var(--ss-color-text-muted);
      font-size: var(--ss-font-size-lg);
      transition: all var(--ss-duration-150);

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

    // -- social-links  (from site-suell_org/src/static/scss/components/_social-links.scss) --
    .ss-c-social-links {
        display: flex;
        gap: q(24);
        list-style: none;
        padding: 0;
        margin: 0;

        &__item a {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ss-color-gray-500);
            text-decoration: none;
            font-size: q(20);
            transition: color var(--ss-duration-300) ease, transform var(--ss-duration-300) ease;

            &:hover {
                color: var(--ss-color-primary);
                transform: translateY(q(-2));
            }
        }
    }
}