@import '../../style/mixin';

.Yep-badge {
  position: relative;
  display: inline-block;
  line-height: $baseLineHeight;
  vertical-align: middle;

  &-text {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: -1 * $v-spacing-sm;
    height: $icon-size-xs;
    line-height: $icon-size-xs;
    min-width: $icon-size-lg / 2;
    border-radius: 2 * $v-spacing-sm;
    padding: 0 $h-spacing-sm;
    text-align: center;
    font-size: 24px;
    color: #ffffff;
    background-color: $brand-warning;
    white-space: nowrap;
    transform: translateX(-45%);
    transform-origin: -10% center;
    z-index: 10;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
      '\5FAE\8F6F\96C5\9ED1', SimSun, sans-serif;

    a {
      color: #ffffff;
    }

    p {
      margin: 0;
      padding: 0;
    }
  }

  &-dot {
    position: absolute;
    transform: translateX(-50%);
    transform-origin: 0 center;
    top: -2 * 4px;
    height: 0.5 * 32px;
    width: 0.5 * 32px;
    border-radius: 100%;
    background: $brand-warning;
    z-index: 10;
  }

  &-not-a-wrapper &-text,
  &-not-a-wrapper &-dot {
    top: auto;
    display: block;
    position: relative;
    transform: translateX(0);
  }
}