/* Copyright (c) 2025-2026 Spwig contributors. Licensed under AGPL-3.0. */

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