/*
 * Komponent: okrągła oprawa ikon.
 * Rozmiary są kontrolowane klasami modyfikującymi i zawsze zachowują proporcję 1:1.
 */
.icon-circle {
    --icon-circle-size: 56px;
    --icon-circle-icon-size: 31px;
    --icon-circle-accent: currentColor;
    --icon-circle-bg: color-mix(in srgb, var(--icon-circle-accent) 13%, #fff);

    display: inline-grid;
    width: var(--icon-circle-size);
    min-width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    min-height: var(--icon-circle-size);
    flex: 0 0 var(--icon-circle-size);
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background: var(--icon-circle-bg);
    color: var(--icon-circle-accent);
    line-height: 1;
    box-sizing: border-box;
}

.icon-circle--lg { --icon-circle-size: 72px; --icon-circle-icon-size: 40px; }
.icon-circle--md { --icon-circle-size: 64px; --icon-circle-icon-size: 35px; }
.icon-circle--sm { --icon-circle-size: 56px; --icon-circle-icon-size: 31px; }
.icon-circle--xs { --icon-circle-size: 44px; --icon-circle-icon-size: 24px; }

.icon-circle img,
.icon-circle svg {
    display: block;
    width: var(--icon-circle-icon-size);
    max-width: var(--icon-circle-icon-size);
    height: var(--icon-circle-icon-size);
    max-height: var(--icon-circle-icon-size);
    flex: 0 0 auto;
    object-fit: contain;
}

.icon-circle svg {
    fill: currentColor;
}


.icon-circle--solid{
  --icon-circle-bg: var(--icon-circle-accent);
  color:#fff;
  box-shadow:none;
}
.icon-circle--solid img,
.icon-circle--solid svg{
  filter:brightness(0) invert(1);
}