@use '../../compiled/tokens/scss/color';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/theme';

/**
 * Themed properties
 */

@include theme.props {
  --theme-color-background-avatar: #{color.$base-gray-light};
}

@include theme.props(dark) {
  --theme-color-background-avatar: #{color.$brand-primary-dark};
}

/**
 * Containing element
 *
 * 1. Because avatars are a good thing to lazy-load, we want to show a
 *    background color that will make that transition less jarring. This also
 *    lets this function as a placeholder if desired.
 * 2. Prevent this element from squashing or stretching within a flex container.
 * 3. The most common use cases for avatars use a consistent width, so we set
 *    that here.
 * 4. Ensures the image fills the full dimensions of the avatar container.
 */

.c-avatar {
  aspect-ratio: 1;
  background: var(--theme-color-background-avatar); /* 1 */
  border-radius: size.$border-radius-full;
  flex: none; /* 2 */
  inline-size: size.$square-avatar-medium; /* 3 */
  overflow: hidden;

  > img,
  > picture > img {
    block-size: 100%; /* 4 */
    inline-size: 100%; /* 4 */
  }
}

/**
 * Size modifiers
 */

.c-avatar--small {
  inline-size: size.$square-avatar-small;
}

.c-avatar--full {
  inline-size: size.$square-avatar-full;
}

/**
 * Shape modifiers
 */

// Round the corners of the square and squircle shapes by default
.c-avatar--square,
.c-avatar--squircle {
  border-radius: size.$border-radius-medium;
}

// Relatively lean squircle/superellipse, drawn with the help of this tool:
// https://svercle.netlify.app/
$_squircle: svg-load('masks/squircle.svg');

// Where masks are supported, use a true squircle/superellipse shape
.c-avatar--squircle {
  @supports (-webkit-mask: url('example.svg')) or (mask: url('example.svg')) {
    border-radius: 0;

    // Chromium still has issues with the non-prefixed mask property when using
    // inline SVG, but it works fine with the prefixed version.
    // stylelint-disable-next-line
    -webkit-mask: $_squircle;
    mask: $_squircle;
  }
}