@import '../../styles/common';
@import '../../styles/vendor/bootstrap_foundation-sites';

$m-badge__height: 1.6rem !default;
$m-badge__font-size: ($m-badge__height / 2) !default;
$m-badge__padding: ($m-badge__height - $m-badge__font-size) / 2;
$m-badge--large__height: $co-component__height !default;
$m-badge--large__font-size: $co-font__size !default;
$m-badge--large__padding: ($m-badge--large__height - $m-badge--large__font-size) /
  2;

.m-badge {
  $baseName: &;

  display: inline-flex;
  align-items: center;
  height: $m-badge__height;
  background: $co-color__primary--low;
  color: $co-color__contrast__text;
  font-size: $m-badge__font-size;
  font-weight: 600;
  line-height: $m-badge__height;
  white-space: nowrap;

  &--right-spaced {
    margin-right: calc($co-margin / 4);
  }

  &--is-link {
    #{$baseName}__text {
      color: $co-color__contrast__text;
      text-decoration: none;
    }
  }

  &__text {
    @include flex-grid-size;

    padding: $m-badge__padding;

    &--large {
      padding: $m-badge--large__padding;
    }

    &--has-button {
      padding-right: 0;
    }
  }

  &__button {
    @include flex-grid-size(shrink);

    padding: $m-badge__padding;
    color: $co-color__contrast__text;
    font-size: $co-font__size;

    &--large {
      padding: $m-badge--large__padding;
    }

    &:hover {
      color: $co-color__primary;
    }
  }

  &--no-radius {
    border-radius: 0;
  }

  &--normal-radius {
    border-radius: $co-radius;
  }

  &--rounded-radius {
    padding-right: $m-badge__height / 2;
    padding-left: $m-badge__height / 2;
    border-radius: ($m-badge__height / 2);
  }

  &--low {
    background: $co-color__primary--lower;
    color: $co-color__contrast__text--higher;
  }

  &--large {
    height: $m-badge--large__height;
    font-size: $m-badge--large__font-size;
    line-height: $m-badge--large__height;
  }

  @each $name, $color in $caliopen-palette {
    &--#{$name} {
      background-color: $color;
      color: $co-color__contrast__text;
    }
  }
}
