@import "../settings/variables";
@import "../tools/ellipsis";

$checkmark-placeholder-width: 32px;

.pill-select {
  $root: &;

  &__label-wrapper {
    display: flex;
    max-width: 100%;
    pointer-events: auto;

    &--disabled {
      pointer-events: none;
    }
  }

  &__label {
    @include ellipsis();
  }

  &__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__pill {
    max-width: calc(100% - #{$checkmark-placeholder-width});
  }

  &__checked-icon {
    padding: 0 spacing(sm);
    color: $core-blue-50;
  }
}