_mixins.scss

////
/// @group avatar
////

@import '~@react-md/icon/dist/mixins';
@import '~@react-md/theme/dist/helpers';
@import '~@react-md/typography/dist/mixins';
@import './variables';

/// Creates the styles for one of the avatar's theme values. This is mostly
/// going to be an internal helper mixin util.
///
/// @param {String} property - The property to set a `rmd-avatar-theme-values`
/// value to.
/// @param {String} theme-style - One of the keys of `rmd-avatar-theme-values`
/// to extract a value from.
/// @param {Color|String|Number} fallback [null] - A fallback value to use if
/// the css variable isn't set somehow. This will default to automatically
/// retrieving the default value from the `rmd-avatar-theme-values` map when
/// `null`.
@mixin rmd-avatar-theme($property, $theme-style: $property, $fallback: null) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-avatar-theme-values,
    avatar
  );
}

/// Updates one of the avatar's theme variables with the new value for the
/// section of your app.
///
/// @param {String} theme-style - The avatar theme style type to update. This
/// should be one of the `$rmd-avatar-theme-values` keys.
/// @param {Color|String|Number} value - The new value to use.
@mixin rmd-avatar-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-avatar-theme-values,
    avatar
  );
}

/// A mixin for updating the avatar's theme colors.
///
/// @example scss - Example Usage SCSS
/// .my-red-avatar {
///   @include rmd-avatar-color($rmd-red-500, $rmd-black-base);
/// }
///
/// .my-orange-avatar {
///   @include rmd-avatar-color($rmd-orange-500, $rmd-black-base);
/// }
///
/// @param {Color} background-color - The background color to apply
/// @param {Color} color - The text color to apply
@mixin rmd-avatar-color($background-color, $color) {
  @include rmd-avatar-theme-update-var(background-color, $background-color);
  @include rmd-avatar-theme-update-var(color, $color);
}

/// A mixin for creating the avatar color suffix class names from a color map.
/// It is not recommended to use this mixin for creating additional colors.
/// Instead use the `rmd-avatar-color` mixin with custom class names instead.
///
/// @param {Map} color-map [$rmd-avatar-colors] a map of color name suffixes and
/// a list of the background-color and color to apply
@mixin rmd-avatar-colors($color-map: $rmd-avatar-colors) {
  @each $color-name, $values in $color-map {
    @if length($values) != 2 {
      @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
    }

    $class-name: 'rmd-avatar--' + $color-name;

    .#{$class-name} {
      @include rmd-avatar-color(nth($values, 1), nth($values, 2));
    }
  }
}

/// Creates all the styles for the avatar package as well as the root css
/// variable theme.
@mixin react-md-avatar {
  @include rmd-theme-create-root-theme($rmd-avatar-theme-values, avatar);

  .rmd-avatar {
    @include rmd-typography-base;
    @include rmd-icon-theme-update-var(color, currentColor);
    @include rmd-avatar-theme(border-radius);
    @include rmd-avatar-theme(font-size);
    @include rmd-avatar-theme(height, size);
    @include rmd-avatar-theme(width, size);
    @include rmd-avatar-theme(border-color);
    @include rmd-avatar-theme(background-color);
    @include rmd-avatar-theme(color);

    align-items: center;
    border: 1px solid;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    line-height: $rmd-avatar-line-height;
    overflow: hidden;

    &__image {
      height: 100%;
      width: auto;
    }
  }

  // stylelint-disable order/order
  @include rmd-avatar-colors;
}