@import '../../styles/common';

$height: rem(20px);
$small-height: rem(18px);
$horizontal-padding: spacing(tight);

$pip-size: rem(10px);
$pip-spacing: ($height - $pip-size) / 2;

@mixin pip-color($color) {
  .Pip {
    color: $color;
  }
}

.Badge {
  @include pip-color(var(--p-icon, color('ink', 'lightest')));
  display: inline-flex;
  align-items: center;
  padding: 0 $horizontal-padding;
  background-color: var(--p-action-secondary-disabled, color('sky'));
  border: border-width(thick) solid var(--p-surface, color('white'));
  border-radius: $height;
  font-size: rem(13px);
  line-height: $height;
  color: var(--p-text, color('ink', 'light'));
}

.sizeSmall {
  font-size: font-size(caption, large-screen);
  line-height: $small-height;
}

.statusSuccess {
  @include pip-color(var(--p-icon-success, color('green', 'dark')));
  background-color: var(--p-surface-success, color('green', 'light'));
  color: color('green', 'text');

  .Content {
    color: var(--p-text);
    mix-blend-mode: var(--p-luminosity);
  }
}

.statusInfo {
  @include pip-color(var(--p-icon-highlight, color('blue', 'dark')));
  background-color: var(--p-surface-highlight, color('blue', 'light'));
  color: color('blue', 'text');

  .Content {
    color: var(--p-text);
    mix-blend-mode: var(--p-luminosity);
  }
}

.statusAttention {
  @include pip-color(color('yellow', 'dark'));
  background-color: color('yellow', 'light');
  color: color('yellow', 'text');
}

.statusWarning {
  @include pip-color(var(--p-icon-warning, color('orange', 'dark')));
  background-color: var(--p-surface-warning, color('orange', 'light'));
  color: color('orange', 'text');

  .Content {
    color: var(--p-text);
    mix-blend-mode: var(--p-luminosity);
  }
}

.statusNew {
  background-color: color('sky');
  color: color('ink');
  font-weight: 500;
  border: none;
}

.Pip {
  height: $pip-size;
  width: $pip-size;
  margin: 0 spacing(extra-tight) 0 ($pip-spacing - $horizontal-padding);
  border: border-width(thick) solid currentColor;
  border-radius: 50%;
}

.progressIncomplete {
  .Pip {
    background: transparent;
  }
}

.progressPartiallyComplete {
  .Pip {
    background: linear-gradient(
      to top,
      currentColor,
      currentColor 50%,
      transparent 50%,
      transparent
    );
  }
}

.progressComplete {
  .Pip {
    background: linear-gradient(
      to top,
      currentColor,
      currentColor 50%,
      currentColor 50%
    );
  }
}