@import '../mixin/flex.scss';

@mixin badge {
  @include flex-h-c;
  display: inline-flex;
  border-radius: 5rpx;
  padding: 5rpx 10rpx;
}

@mixin circle {
  @include flex-h-c;
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
}

.se {
  &-badge {
    &-d {
      @include badge;
    }

    &-c {
      @include badge;
      padding: 5rpx 20rpx;
      border-radius: 20rpx;
    }

    &-m {
      @include badge;
      border-radius: 0 10rpx 10rpx 10rpx;
    }

    &-r {
      @include badge;
      padding: 5rpx 20rpx;
      border-radius: 20rpx 0 0 20rpx;
    }
  }

  &-circle {
    @for $i from 0 through 200 {
      @if $i % 5 == 0 {
        &-#{$i} {
          @include circle;
          width: $i + rpx;
          height: $i + rpx;
        }
      }
    }
  }
}