// This contains all of the styles for the badge
// rather than just the color/theme because of
// no style sheet support for directives.
@import '../core/theming/palette';
@import '../core/theming/theming';
@import '../core/theming/check-duplicate-styles';
@import '../core/typography/typography-utils';
@import '../../cdk/a11y/a11y';

$mat-badge-font-size: 12px;
$mat-badge-font-weight: 600;
$mat-badge-default-size: 22px !default;
$mat-badge-small-size: $mat-badge-default-size - 6;
$mat-badge-large-size: $mat-badge-default-size + 6;

// Mixin for building offset given different sizes
@mixin _mat-badge-size($size) {
  .mat-badge-content {
    width: $size;
    height: $size;
    line-height: $size;
  }

  &.mat-badge-above {
    .mat-badge-content {
      top: -$size / 2;
    }
  }

  &.mat-badge-below {
    .mat-badge-content {
      bottom: -$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: -$size / 2;
      }
    }

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

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

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

@mixin mat-badge-color($config-or-theme) {
  $config: mat-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: mat-color($primary, default-contrast);
    background: mat-color($primary);

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

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

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

  .mat-badge {
    position: relative;
  }

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

  .mat-badge-disabled {
    .mat-badge-content {
      $app-background: mat-color($background, 'background');
      $badge-color: mat-color($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 (type-of($badge-color) == color and type-of($app-background) == color) {
        $badge-opacity: opacity($badge-color);
        background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
      }
      @else {
        background: $badge-color;
      }

      color: mat-color($foreground, disabled-text);
    }
  }

  .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 _mat-badge-size($mat-badge-small-size);
  }
  .mat-badge-medium {
    @include _mat-badge-size($mat-badge-default-size);
  }
  .mat-badge-large {
    @include _mat-badge-size($mat-badge-large-size);
  }
}

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

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

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

@mixin _mat-badge-density($config-or-theme) {}

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

    @if $color != null {
      @include mat-badge-color($color);
    }
    @if $density != null {
      @include _mat-badge-density($density);
    }
    @if $typography != null {
      @include mat-badge-typography($typography);
    }
  }
}