/* © 2025 Spwig. All rights reserved. */

/**
 * Icon Element Styles
 *
 * Theme tokens provide defaults. Merchant overrides are applied as
 * direct inline styles on the <i> element (font-size, color).
 *
 * Theme Element Tokens (from tokens.json elements.icon):
 *   --element-icon-size     Theme default icon size
 *   --element-icon-color    Theme default icon color
 */

/* ==========================================================================
   Base Icon Container
   ========================================================================== */

.pb-icon {
    display: block;
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   Icon Element
   ========================================================================== */

.pb-icon i,
.pb-icon svg {
    display: inline-block;
    font-size: var(--element-icon-size, 24px);
    color: var(--element-icon-color, var(--theme-color-text, #374151));
    line-height: 1;
    vertical-align: middle;
}

/* ==========================================================================
   Icon Link Wrapper
   ========================================================================== */

.pb-icon a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: opacity var(--theme-transition-duration-fast, 150ms) var(--theme-transition-easing-default, ease),
                transform var(--theme-transition-duration-fast, 150ms) var(--theme-transition-easing-default, ease);
}

.pb-icon a:hover {
    opacity: 0.8;
}

.pb-icon a:focus {
    outline: 2px solid var(--theme-color-primary, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Alignment Variants
   ========================================================================== */

.pb-icon--left {
    text-align: left;
}

.pb-icon--center {
    text-align: center;
}

.pb-icon--right {
    text-align: right;
}

/* ==========================================================================
   Size Preset Variants (Optional)
   ========================================================================== */

.pb-icon--sm i,
.pb-icon--sm svg {
    font-size: var(--element-icon-size-sm, 16px);
}

.pb-icon--md i,
.pb-icon--md svg {
    font-size: var(--element-icon-size-md, 24px);
}

.pb-icon--lg i,
.pb-icon--lg svg {
    font-size: var(--element-icon-size-lg, 32px);
}

.pb-icon--xl i,
.pb-icon--xl svg {
    font-size: var(--element-icon-size-xl, 48px);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

/* Mobile: Scale icons to 87.5% */
@media (max-width: 640px) {
  .pb-icon {
    font-size: 0.875em;
  }

  .pb-icon svg,
  .pb-icon i {
    width: 0.875em;
    height: 0.875em;
  }
}