/**
 * Global style for user-defined avatars
 * Used for user, team member, and org avatars.
 */
.avatar {
    .avatar-icon,
    .icon {
        height: 100%;
        fill: currentColor;
        border-radius: 50%;
    }
}

// Formats an icon so that it appears inline in the text
// with height matching the text
.icon-inline {
    // SVGs already include padding to account for text baseline,
    // so align with the bottom of the text
    vertical-align: bottom;
    display: inline-flex;
    align-items: center;
}

svg.icon-inline,
img.icon-inline,
.icon-inline svg,
.icon-inline .avatar-icon {
    // TODO find a better way to scale icons that is not proportional to the font size
    // 14px font size -> 20px icon size
    // stylelint-disable-next-line declaration-property-unit-whitelist
    width: (20em / 14);
    // stylelint-disable-next-line declaration-property-unit-whitelist
    height: (20em / 14);
    // Match color of the text
    fill: currentColor;
}

// Special case for the loader
.icon-inline > .icon-loader {
    stroke: currentColor;
}

// @sourcegraph/react-loading-spinner coloring
.theme-light {
    --loading-spinner-outer-color: #{rgba($body-color-light, 0.3)};
    --loading-spinner-inner-color: #{rgba($body-color-light, 1)};
}
.theme-dark {
    --loading-spinner-outer-color: #{rgba($body-color-dark, 0.3)};
    --loading-spinner-inner-color: #{rgba($body-color-dark, 1)};
}