@import "../../styles/themes.scss";
@import "../../styles/typography.scss";
@import "../../styles/states.scss";

$icon-margin: 4px;

.chips--wrapper {
  display: flex;
  overflow: hidden;
  height: 24px;
  border-radius: 4px;
  padding: 1px 8px;
  align-items: center;
  margin: 0 4px;
  user-select: none;
  animation: chips-enter 100ms;
  animation-timing-function: cubic-bezier(0, 0, 0.35, 1);

  &.with-close {
    padding-right: 4px;
  }

  .chip-icon {
    &.left {
      margin-right: $icon-margin;
    }
    &.right {
      margin-left: $icon-margin;
    }
    &.close {
      margin-left: $icon-margin;
      @include focus-style();
      cursor: pointer;
      @include theme-prop(color, primary-text-color);
      border-radius: 4px;

      &:hover {
        @include theme-prop(background-color, primary-background-color);
      }
    }
  }

  &.disabled {
    .chip-icon {
      @include theme-prop(color, disabled-text-color);
    }
    .label {
      @include theme-prop(color, disabled-text-color);
    }
  }

  .label {
    @include font-general-text();
    @include ellipsis();
  }
}

@keyframes chips-enter {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}