.mmal-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 0.563rem 1rem; /* 9px 16px */
  border-radius: 100px;
  font-size: 0.938rem; /* 15px */
  line-height: 1.05;
  font-weight: 400;
  border: 1px solid;

  &.mmal-pill-transparent-black {
    background-color: transparent;
    color: #000;
    border-color: #000;
  }

  &.mmal-pill-transparent-white {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
  }

  &.mmal-pill-white {
    background-color: #fff;
    color: #000;
    border-color: #fff;
  }

  &.mmal-pill-light-grey {
    background-color: #e3e5e6;
    color: #000;
    border-color: #e3e5e6;
  }

  &.mmal-pill-black {
    background-color: #000;
    color: #fff;
    border-color: #000;
  }

  &.mmal-pill-red {
    background-color: #ed0000;
    color: #fff;
    border-color: #ed0000;
  }
}

.mmal-pill-icon {
  font-size: 1rem; /* 16px */
  line-height: 0;

  &.flip {
    transform: scaleX(-1);
  }
}