@import "../../styles/global.scss";
@import "../../styles/variables.scss";

$avatar-sizes: (
  "small": 16px,
  "large": 22px,
);

$icon-sizes: (
  "small": 12px,
  "large": 16px,
);

$chip-colors: (
  "grey": $color-core-grey-lighter,
  "teal": $color-core-teal-lighter,
  "orange": $color-core-orange-lighter,
  "blue": $color-core-blue-lighter,
  "green": $color-core-green-lighter,
  "red": $color-core-red-lighter,
  "yellow": $color-core-yellow-lighter,
);

$chip-hover-colors: (
  "grey": $color-core-grey-light,
  "teal": $color-core-teal-light,
  "orange": $color-core-orange-light,
  "blue": $color-core-blue-light,
  "green": $color-core-green-light,
  "red": $color-core-red-light,
  "yellow": $color-core-yellow-light,
);

$chip-label-colors: (
  "grey": $color-core-ink-base,
  "teal": $color-core-teal-dark,
  "orange": $color-core-orange-dark,
  "blue": $color-core-blue-dark,
  "green": $color-core-green-dark,
  "red": $color-core-red-dark,
  "yellow": $color-core-yellow-dark,
);

.ai-chip {
  width: fit-content;
  border-radius: 4px;
  margin: 0px 4px 4px 0px;
  @extend .flex-row;
  @extend .center;
  &-disabled {
    cursor: not-allowed;
    :nth-child(n) {
      opacity: 0.3;
    }
    &:focus {
      outline: none;
    }
  }
  &-size {
    &-small {
      height: 22px;
      padding: 0 4px;
    }
    &-large {
      height: 28px;
      padding: 0 8px;
    }
  }
  &-variant {
    @each $color, $value in $chip-colors {
      &-#{$color} {
        background-color: $value;
        color: map-get($chip-label-colors, $color);
        transition: background-color 300ms;
        &-clickable {
          cursor: pointer;
          &:hover {
            background-color: map-get($chip-hover-colors, $color);
          }
          &:focus {
            outline-color: $color-core-blue-light;
            outline-width: 2px;
          }
        }
      }
    }
  }
  &-label {
    &-size {
      &-small,
      &-large {
        line-height: 22px;
        font-size: $size-core-body;
      }
    }
  }
  &-avatar-icon {
    margin-right: 4px;
    &-size {
      @each $key, $value in $avatar-sizes {
        &-#{$key} {
          height: $value;
          width: $value;
          border-radius: $value;
        }
      }
    }
  }
  &-left-icon {
    margin-right: 4px;
    &-size {
      @each $key, $value in $icon-sizes {
        &-#{$key} {
          height: $value;
          width: $value;
          font-size: $value;
        }
      }
    }
  }
  &-delete-icon {
    @extend .center;
    font-size: 8px;
    margin-left: 4px;
    height: 22px;
    width: 22px;
    color: $color-core-ink-base;
    &:not([disabled]):hover {
      color: $color-core-red-base;
      cursor: pointer;
    }
  }
}

// Just an example for customClassName prop
.custom-chip-classname-example {
  background-color: lightblue;
  color: black;
  font-style: italic;
  &:hover {
    background-color: gold;
  }
}