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

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

  &-text {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: -1 * $spacing-v-sm;
    height: $icon-size-sm;
    line-height: $icon-size-sm;
    min-width: $icon-size-sm / 2;
    border-radius: 2 * $spacing-v-sm;
    padding: 0 $spacing-h-sm;
    text-align: center;
    font-size: $font-size-sm;
    color: $at-badge-color;
    background-color: $at-badge-bg-color;
    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: $at-badge-color;
    }

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

  &-hot &-text {
    background-color: #f96268;
  }

  &-func {
    background-color: transparent !important;
    color: #f96268 !important;
    font-size: $font-size-sm !important;
  }

  &-dot {
    position: absolute;
    transform: translateX(-50%);
    transform-origin: 0 center;
    top: -2 * $border-width-lg;
    height: 0.5 * $font-size-lg;
    width: 0.5 * $font-size-lg;
    border-radius: 100%;
    background: $at-badge-bg-color;
    z-index: 10;

    &-large {
      height: $font-size-lg;
      width: $font-size-lg;
    }
  }

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

  &-corner {
    width: 5 * $font-size-lg;
    padding: 0.5 * $font-size-lg;
    position: absolute;
    right: -2 * $font-size-lg;
    top: 0.5 * $font-size-lg;
    background-color: $at-badge-bg-color;
    color: $at-badge-color;
    white-space: nowrap;
    transform: rotate(45deg);
    text-align: center;
    font-size: $font-size-lg;
    height: 0;
    line-height: 0;

    &-wrapper {
      overflow: hidden;
    }
  }
}