@import '../colours';
@import '../common/utils';
@import '../settings';
@import '../franklin-settings';

.chip {
  --main-color: var(--main-chip-color, #{$colour-sea-blue});
  line-height: 1;
  user-select: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0.25rem;
  padding: pxToRem(2) pxToRem(5);
  background-color: $colour-sea-blue;
  background-color: var(--main-color);
  color: $colour-sky-white;
  border-radius: pxToRem(4);
  border: pxToRem(1) solid $colour-sea-blue;
  border: pxToRem(1) solid var(--main-color);
  cursor: default;
  white-space: nowrap;

  svg {
    margin-top: -0.2rem;
    margin-left: 0.2rem;
    margin-right: 0;
    width: 0.7rem;
    height: 0.7rem;
    vertical-align: middle;
    fill: currentColor;
    cursor: pointer;
  }

  &--disabled {
    opacity: 0.25;
    cursor: not-allowed;
  }

  &--compact {
    font-size: $font-size-small;
    border-radius: pxToRem(3);
    padding: pxToRem(1) pxToRem(2);
    line-height: $font-size-small;
  }

  &.secondary {
    background-color: map-get($foundation-palette, secondary);
    color: $colour-sea-blue;
    color: var(--main-color);

    svg {
      fill: currentColor;
    }
  }
}