@import '../base.scss';

.ss-badge {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  background: #EEE;
  border-radius: 4px;
  &.ss-badge__success {
    .ss-badge-point {
      background: #2FCE63;
    }
  }
  &.ss-badge__info {
    .ss-badge-point {
      background: #B2B2B2;
    }
    &.is-text {
      color: $fc6;
    }
  }
  &.ss-badge__primary {
    .ss-badge-point {
      background: #2A75ED;
    }
  }
  &.ss-badge__warning {
    .ss-badge-point {
      background: #FFB85E;
    }
  }
  &.is-text {
    color: $fc1;
    background-color: transparent;
    width: inherit;
    height: inherit;
    font-size: 12px;
    padding-left: 14px;
    .ss-badge-point {
      left: 0;
      top: 50%;
      right: unset;
    }
  }
  .ss-badge-point {
    position: absolute;
    top: 0;
    right: 0;
    height: 6px;
    padding: 0 3px;
    border-radius: 3px;
    background: #FB6161;
    transform: translate(50%, -50%);
    z-index: 1;
    &.ss-badge-point__hascontent {
      height: 12px;
      line-height: 12px;
      border-radius: 6px;
    }
    .ss-badge-number {
      display: inline-block;
      color: #fff;
      font-size: 12px;
      transform: scale(.833333);
      transform-origin: top;
      .ss-badge-number-over {
        margin-left: -4px;
      }
    }
  }
}