@import 'themes/default';

$part-colors: (
  var(--color--part-0),
  var(--color--part-1),
  var(--color--part-2),
  var(--color--part-3),
  var(--color--part-4),
  var(--color--part-5),
  var(--color--part-6),
  var(--color--part-7),
  var(--color--part-8),
  var(--color--part-9)
);

.Pill {
  background-color: var(--Pill____background-color);
  border: 1px solid var(--Pill____border-color);
  color: var(--Pill____color);
  display: inline-block;
  font-size: var(--font-size--base);
  padding: 0.125em 0.5em;
  position: relative;

  @for $num from 0 through 9 {
    &--part-#{$num} {
      border-right-color: nth($part-colors, $num + 1);
      border-right-width: var(--radius--med);
    }
  }

  button {
    &:first-child {
      bottom: 0;
      left: 0;
      position: absolute;
      top: 0;
    }

    + * {
      margin-left: 1.5em;
    }
  }

  &:first-child {
    border-bottom-left-radius: var(--Pill____border-radius);
    border-top-left-radius: var(--Pill____border-radius);
  }

  &:last-child {
    border-bottom-right-radius: var(--Pill____border-radius);
    border-top-right-radius: var(--Pill____border-radius);
  }
}