.hds-icon-control{position:relative;display:inline-grid;place-items:center;width:1.25rem;height:1.25rem}.hds-icon-control__icon,.hds-icon-control__icon svg{display:block;width:100%;height:100%}.hds-icon-control__icon svg{fill:none;stroke:currentColor}.hds-icon-control__control{position:absolute;display:inline-flex}.hds-icon-control__control--left{right:100%;top:50%;transform:translateY(-50%)}.hds-icon-control__control--right{left:100%;top:50%;transform:translateY(-50%)}.hds-icon-control__control--top{bottom:100%;left:50%;transform:translateX(-50%)}.hds-icon-control__control--bottom{top:100%;left:50%;transform:translateX(-50%)}.hds-icon-control__control--center{inset:0;place-items:center}

/* ==========================================================================
   ---> Badge (IconControl::badge() · T3.7, 2026-10-19)
   Dekoratif dairesel rozet; glif (metin / SVG) kutunun ortasında.
   Hook'lar: --hds-icon-control-badge-size, -surface, -ink, -font-size, -icon-size (23.10.2026).
   ========================================================================== */

.hds-icon-control--badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--hds-icon-control-badge-size, 1.85rem);
  height: var(--hds-icon-control-badge-size, 1.85rem);
  min-width: var(--hds-icon-control-badge-size, 1.85rem);
  min-height: var(--hds-icon-control-badge-size, 1.85rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--hds-icon-control-badge-surface, #eef7fa);
  color: var(--hds-icon-control-badge-ink, #073343);
  font-size: var(--hds-icon-control-badge-font-size, 0.9rem);
}

.hds-icon-control--badge .hds-icon-control__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hds-icon-control-badge-icon-size, 100%);
  height: var(--hds-icon-control-badge-icon-size, 100%);
}

/* <--- Badge */

/* ==========================================================================
   ---> Filled (IconControl::filled() · T4.4, 2026-10-19)
   SVG gövdesi currentColor ile dolu; köşeler yuvarlak birleşir.
   ========================================================================== */

.hds-icon-control--filled .hds-icon-control__icon svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-linejoin: round;
}

/* <--- Filled */