/*
 * @file: Source\themes\blocksy-child\assets\css\photocka-icons.css
 * @version: 1.0.0
 * @updated: 2026-03-15 12:03:57
 * @size: 5059
 */
/* =====================================================================
   Photocka Icons System v1.0
   File: /assets/css/photocka-icons.css
   Depends on: photocka-variables.css
   Purpose: sprite icons, size modes, color modes, badge carriers
   ===================================================================== */


/* =========================================================
   1. BASE ICON
   ========================================================= */

svg.phc-icon {
  display: inline-block;
  inline-size: var(--phc-icon-size-md);
  block-size: var(--phc-icon-size-md);
  flex-shrink: var(--phc-num-0);
  vertical-align: middle;
  color: var(--phc-icon-color-default);
  line-height: var(--phc-num-1);
  pointer-events: none;
}

svg.phc-icon [fill]:not([fill="none"]) {
  fill: currentColor;
}

svg.phc-icon [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

svg.phc-icon[aria-disabled="true"],
svg.phc-icon.is-disabled {
  opacity: var(--phc-icon-opacity-disabled);
}


/* =========================================================
   2. SIZE MODIFIERS
   ========================================================= */

.phc-icon--sm {
  inline-size: var(--phc-icon-size-sm);
  block-size: var(--phc-icon-size-sm);
}

.phc-icon--md {
  inline-size: var(--phc-icon-size-md);
  block-size: var(--phc-icon-size-md);
}

.phc-icon--lg {
  inline-size: var(--phc-icon-size-lg);
  block-size: var(--phc-icon-size-lg);
}


/* =========================================================
   3. COLOR MODES
   ========================================================= */

.phc-icon--default {
  color: var(--phc-icon-color-default);
}

.phc-icon--white {
  color: var(--phc-icon-color-white);
}

.phc-icon--accent {
  color: var(--phc-icon-color-accent);
}

.phc-icon--service {
  color: var(--phc-icon-color-service);
}

.phc-icon--soft-accent {
  color: var(--phc-icon-color-soft-accent);
}


/* =========================================================
   4. BADGE CARRIER
   ========================================================= */

.phc-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--phc-icon-badge-size-md);
  block-size: var(--phc-icon-badge-size-md);
  min-inline-size: var(--phc-icon-badge-size-md);
  min-block-size: var(--phc-icon-badge-size-md);
  padding: var(--phc-icon-badge-padding);
  border: 1px solid var(--phc-icon-badge-border-soft);
  border-radius: var(--phc-icon-badge-radius);
  background: var(--phc-icon-badge-bg-soft);
  box-shadow: var(--phc-icon-badge-shadow-soft);
  flex-shrink: var(--phc-num-0);
  line-height: var(--phc-num-1);
  transition:
    background-color var(--phc-transition-fast) var(--phc-ease-in-out),
    border-color var(--phc-transition-fast) var(--phc-ease-in-out),
    box-shadow var(--phc-transition-fast) var(--phc-ease-in-out),
    transform var(--phc-transition-fast) var(--phc-ease-in-out),
    color var(--phc-transition-fast) var(--phc-ease-in-out);
}

.phc-icon-badge > .phc-icon {
  inline-size: var(--phc-icon-size-md);
  block-size: var(--phc-icon-size-md);
}


/* =========================================================
   5. BADGE COLOR MODES
   ========================================================= */

.phc-icon-badge--soft {
  background: var(--phc-icon-badge-bg-soft);
  border-color: var(--phc-icon-badge-border-soft);
  box-shadow: var(--phc-icon-badge-shadow-soft);
}

.phc-icon-badge--accent {
  background: var(--phc-icon-badge-bg-accent);
  border-color: var(--phc-icon-badge-border-accent);
  box-shadow: var(--phc-icon-badge-shadow-accent);
}

.phc-icon-badge--service {
  background: var(--phc-icon-badge-bg-service);
  border-color: var(--phc-icon-badge-border-service);
  box-shadow: var(--phc-icon-badge-shadow-service);
}


/* =========================================================
   6. INTERACTION STATES
   ========================================================= */

a .phc-icon-badge,
button .phc-icon-badge,
.phc-icon-badge[tabindex] {
  pointer-events: auto;
}

a:hover .phc-icon-badge,
button:hover .phc-icon-badge {
  transform: translateY(calc(var(--phc-space-1) / -8));
}

a:focus-visible .phc-icon-badge,
button:focus-visible .phc-icon-badge,
.phc-icon-badge:focus-visible {
  outline: var(--phc-icon-badge-focus-outline);
  outline-offset: var(--phc-icon-badge-focus-outline-offset);
  box-shadow: var(--phc-icon-badge-focus-ring);
}


/* =========================================================
   7. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .phc-icon-badge {
    transition: none;
  }

  a:hover .phc-icon-badge,
  button:hover .phc-icon-badge {
    transform: none;
  }
}