@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-badge-color: $ink-color-white !default;
$ink-badge-bg-color: $ink-color-red !default;
$ink-badge-font-size: $ink-font-size-sm !default;
$ink-badge-font-line-height: $ink-line-height-sm !default;
$ink-badge-dot-size: 16px !default;
$ink-badge-border-radius: $ink-badge-font-size * 0.7 !default;
$ink-badge-box-shadow: 0 4px 8px 0
  rgba(
    $color: $ink-badge-bg-color,
    $alpha: 0.2,
  ) !default;

.ink-badge {
  position: relative;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;

  /* elements */
  &__dot {
    position: absolute;
    right: -6px;
    top: -6px;
    width: $ink-badge-dot-size;
    height: $ink-badge-dot-size;
    border-radius: $ink-border-radius-circle;
    overflow: hidden;
    background: $ink-badge-bg-color;
    box-shadow: $ink-badge-box-shadow;
  }

  &__num {
    position: absolute;
    padding: 0 $ink-spacing-base;
    top: -$ink-badge-border-radius;
    right: -6px;
    color: $ink-badge-color;
    font-size: $ink-badge-font-size;
    line-height: $ink-badge-font-line-height;
    border-radius: $ink-badge-border-radius $ink-badge-border-radius $ink-badge-border-radius 0;
    background: $ink-badge-bg-color;
    box-shadow: $ink-badge-box-shadow;
    transform: translate(50%, 0);
    overflow: hidden;
    z-index: 1;
  }
}