@use "sass:color";
@import "../../style/var.scss";

$tag-padding: 0px 4px;
$tag-font-size: $font-size-sm;
$tag-border-radius: $border-radius-xs;
$tag-line-height: 16px;

$tag-medium-padding: 2px 6px;
$tag-medium-font-size: $font-size-sm;
$tag-medium-border-radius: $border-radius-sm;

$tag-large-padding: 2px 6px;
$tag-large-font-size: $font-size-md;
$tag-large-border-radius: $border-radius-sm;

$tag-bg-opacity: 0.1;
$tag-primary-color: $blue;
$tag-success-color: $green;
$tag-error-color: $red;
$tag-warning-color: $orange;
$tag-default-color: $gray-6;

.bgo-tag {
  display: inline-flex;
  align-items: center;
  padding: $tag-padding;
  color: $tag-default-color;
  font-size: $tag-font-size;
  background-color: color.adjust(
    $tag-default-color, 
    $alpha: $tag-bg-opacity - 1
  );
  border-radius: $tag-border-radius;
  line-height: $tag-line-height;
  overflow: hidden;
  
  &::after {
    border-radius: $tag-border-radius * 2;
  }

  &__close-icon {
    padding-left: $padding-base;
    color: $tag-default-color;
    font-size: $tag-font-size;
  }

  &--medium {
    padding: $tag-medium-padding;
    font-size: $tag-medium-font-size;
    border-radius: $tag-medium-border-radius;

    &::after {
      border-radius: $tag-medium-border-radius * 2;
    }
  }

  &--large {
    padding: $tag-large-padding;
    font-size: $tag-large-font-size;
    border-radius: $tag-large-border-radius;

    &::after {
      border-radius: $tag-large-border-radius * 2;
    }
  }

  &--primary {
    color: $tag-primary-color;
    background-color: color.adjust(
      $tag-primary-color, 
      $alpha: $tag-bg-opacity - 1
    );
  }

  &--success {
    color: $tag-success-color;
    background-color: color.adjust(
      $tag-success-color, 
      $alpha: $tag-bg-opacity - 1
    );
  }

  &--error {
    color: $tag-error-color;
    background-color: color.adjust(
      $tag-error-color, 
      $alpha: $tag-bg-opacity - 1
    );
  }

  &--warning {
    color: $tag-warning-color;
    background-color: color.adjust(
      $tag-warning-color, 
      $alpha: $tag-bg-opacity - 1
    );
  }

  &--plain {
    background-color: $white;

    &::after {
      border-color: inherit !important;
    }
  }
}