@import "../styles/_base.less";

.l-tag{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: @theme-color;

  &-touch{
    min-width: 80rpx;
  }

  // Size
  &-super-mini{
    height: 32rpx;
    font-size: 20rpx;
  }

  &-mini{
    height: 42rpx;
    font-size: 20rpx;
  }

  &-medium{
    height: 50rpx;
    font-size: 24rpx;
    letter-spacing: 2rpx;
  }

  &-large{
    height: 60rpx;
    font-size: 24rpx;
    letter-spacing: 2rpx;
  }

  // Shape
  &-super-mini-square{
    border-radius: 2rpx;
    padding: 0 6rpx;
  }

  &-mini-square{
    border-radius: 2rpx;
    padding: 0 12rpx;
  }

  &-medium-square{
    border-radius: 2rpx;
    padding: 0 16rpx;
  }

  &-large-square{
    border-radius: 2rpx;
    padding: 0 18rpx;
  }

  &-super-mini-circle{
    border-radius: 16rpx;
    padding: 0 12rpx;
  }

  &-mini-circle{
    border-radius: 21rpx;
    padding: 0 16rpx;
  }

  &-medium-circle{
    border-radius: 25rpx;
    padding: 0 20rpx;
  }

  &-large-circle{
    border-radius: 30rpx;
    padding: 0 24rpx;
  }

  &-plain{
    background-color: #ffffff;
    color: @theme-color;
    border: 2rpx solid @theme-color;

    &-super-mini{
      height: 28rpx;
      font-size: 20rpx;
    }
  
    &-mini{
      height: 38rpx;
      font-size: 20rpx;
    }
  
    &-medium{
      height: 46rpx;
      font-size: 24rpx;
      letter-spacing: 2rpx;
    }
  
    &-large{
      height: 56rpx;
      font-size: 24rpx;
      letter-spacing: 2rpx;
    }
  }

  &-disable{
    background-color: @disabled-color;
    color:#ffffff;
    border-color: @disabled-color;
  }

}

.select{
  background-color: @theme-color;
  color: #ffffff;
  // border: 2rpx solid @theme-color; 
}

.content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.content-l {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}

.tag-image {
  &-mini{
    width: 20rpx;
    height: 20rpx;
  }

  &-large{
    width: 24rpx;
    height: 24rpx;
  }
}