/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use 'sass:math';
@use '../../../styling/defs.scss' as bk;

@layer baklava.components {
  .bk-icon {
    @include bk.component-base(bk-icon);
    
    --bk-icon-size: 1.3em; // For example: if 1em ~ 14px, an icon by default would be ~18px
    --bk-icon-accent-color: color-mix(in sRGB, currentColor 30%, transparent);
    
    box-sizing: content-box; // Use content-box so that we can set a padding on an icon without it shrinking the width
    
    vertical-align: -15%; // In inline flow, position the icon on the baseline, shifted downwards a little bit
    align-self: center;
    flex: none; // Prevent icons from shrinking or growing in flexbox
    
    display: inline-flex;
    
    inline-size: var(--bk-icon-size);
    // https://github.com/stylelint-scss/stylelint-scss/issues/1080
    /* stylelint-disable-next-line scss/no-global-function-names */
    inline-size: round(var(--bk-icon-size), 1px);
    
    aspect-ratio: 1; // Baklava icon pack all have square aspect ratio
    fill: currentColor; // Use the current font color by default
    
    // By default, use a stroke width of `0`. Most icons rely on `fill` instead, because apps like IcoMoon use `fill`
    // to generate fonts from SVG. If we do have an icon with stroke then we at least want to set the color to current.
    stroke: currentColor;
    stroke-width: 0;
    
    &.bk-icon--background-circle {
      // Note: use this instead of `border-radius: 50%`, because that causes a bug in Safari where the icon is cut off
      // at the padding box even if we set `overflow: visible`.
      clip-path: circle();
      
      aspect-ratio: 1;
      padding: 0.9em;
      background: var(--bk-icon-accent-color, currentColor);
      
      align-items: center;
      justify-content: center;
    }
  }

  .bk-icon-event--warning-filled {
    color: bk.$theme-icon-warning;
  }
}
