// This contains all of the styles for the badge
// rather than just the color/theme because of
// no style sheet support for directives.
@use 'sass:color';
@use 'sass:map';
@use 'sass:meta';
@use 'sass:math';
@use '../core/theming/theming';
@use '../core/typography/typography';
@use '../core/typography/typography-utils';
@use '../../cdk/a11y';

$font-size: 12px;
$font-weight: 600;
$default-size: 22px !default;
$small-size: $default-size - 6;
$large-size: $default-size + 6;
$_badge-structure-emitted: false !default;

// Mixin for building offset given different sizes
@mixin _badge-size($size) {
  // This mixin isn't used in the context of a theme so we can disable the ampersand check.
  // stylelint-disable material/no-ampersand-beyond-selector-start
  .mat-badge-content {
    width: $size;
    height: $size;
    line-height: $size;
  }

  &.mat-badge-above {
    .mat-badge-content {
      top: math.div(-$size, 2);
    }
  }

  &.mat-badge-below {
    .mat-badge-content {
      bottom: math.div(-$size, 2);
    }
  }

  &.mat-badge-before {
    .mat-badge-content {
      left: -$size;
    }
  }

  [dir='rtl'] &.mat-badge-before {
    .mat-badge-content {
      left: auto;
      right: -$size;
    }
  }

  &.mat-badge-after {
    .mat-badge-content {
      right: -$size;
    }
  }

  [dir='rtl'] &.mat-badge-after {
    .mat-badge-content {
      right: auto;
      left: -$size;
    }
  }

  &.mat-badge-overlap {
    &.mat-badge-before {
      .mat-badge-content {
        left: math.div(-$size, 2);
      }
    }

    [dir='rtl'] &.mat-badge-before {
      .mat-badge-content {
        left: auto;
        right: math.div(-$size, 2);
      }
    }

    &.mat-badge-after {
      .mat-badge-content {
        right: math.div(-$size, 2);
      }
    }

    [dir='rtl'] &.mat-badge-after {
      .mat-badge-content {
        right: auto;
        left: math.div(-$size, 2);
      }
    }
  }
  // stylelint-enable
}

// Structural styles for the badge. They have to be included as a part of the theme,
// because the badge is a directive and we have no other way of attaching styles to it.
@mixin _badge-structure {
  .mat-badge {
    position: relative;
  }

  .mat-badge-hidden {
    .mat-badge-content {
      display: none;
    }
  }

  .mat-badge-content {
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: transform 200ms ease-in-out;
    transform: scale(0.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  .ng-animate-disabled .mat-badge-content,
  .mat-badge-content._mat-animation-noopable {
    transition: none;
  }

  // The active class is added after the element is added
  // so it can animate scale to default
  .mat-badge-content.mat-badge-active {
    // Scale to `none` instead of `1` to avoid blurry text in some browsers.
    transform: none;
  }

  .mat-badge-small {
    @include _badge-size($small-size);
  }

  .mat-badge-medium {
    @include _badge-size($default-size);
  }

  .mat-badge-large {
    @include _badge-size($large-size);
  }
}

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $accent: map.get($config, accent);
  $warn: map.get($config, warn);
  $primary: map.get($config, primary);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

  .mat-badge-content {
    color: theming.get-color-from-palette($primary, default-contrast);
    background: theming.get-color-from-palette($primary);

    @include a11y.high-contrast(active, off) {
      outline: solid 1px;
      border-radius: 0;
    }
  }

  .mat-badge-accent {
    .mat-badge-content {
      background: theming.get-color-from-palette($accent);
      color: theming.get-color-from-palette($accent, default-contrast);
    }
  }

  .mat-badge-warn {
    .mat-badge-content {
      color: theming.get-color-from-palette($warn, default-contrast);
      background: theming.get-color-from-palette($warn);
    }
  }

  .mat-badge-disabled {
    .mat-badge-content {
      $app-background: theming.get-color-from-palette($background, 'background');
      $badge-color: theming.get-color-from-palette($foreground, disabled-button);

      // The disabled color usually has some kind of opacity, but because the badge is overlayed
      // on top of something else, it won't look good if it's opaque. If it is a color *type*,
      // we convert it into a solid color by taking the opacity from the rgba value and using
      // the value to determine the percentage of the background to put into foreground when
      // mixing the colors together.
      @if (meta.type-of($badge-color) == color and meta.type-of($app-background) == color) {
        $badge-opacity: opacity($badge-color);
        background: color.mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
      }
      @else {
        background: $badge-color;
      }

      color: theming.get-color-from-palette($foreground, disabled-text);
    }
  }
}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2014-config(
      theming.get-typography-config($config-or-theme));
  .mat-badge-content {
    font-weight: $font-weight;
    font-size: $font-size;
    font-family: typography-utils.font-family($config);
  }

  .mat-badge-small .mat-badge-content {
    // Set the font size to 75% of the original.
    font-size: $font-size * 0.75;
  }

  .mat-badge-large .mat-badge-content {
    font-size: $font-size * 2;
  }
}

@mixin _density($config-or-theme) {}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);

    // Try to reduce the number of times that the structural styles are emitted.
    @if not $_badge-structure-emitted {
      @include _badge-structure;

      // Only flip the flag if the mixin is included at the top level. Otherwise the first
      // inclusion might be inside of a theme class which will exclude the structural styles
      // from all other themes.
      @if not & {
        $_badge-structure-emitted: true !global;
      }
    }

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include _density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }
}