.root {
  display: inline-block;
  padding-top: var(--size-micro);
  padding-bottom: var(--size-micro);
  padding-left: var(--size-small);
  padding-right: var(--size-small);
  background-color: var(--color-greyLightest);
  color: var(--color-grey);
  border: 1px solid var(--color-greyLightest);
  composes: fontSmallIi from '../../globals/typography.css';
  text-transform: uppercase;
  font-weight: var(--fontweight-demi);
  border-radius: 3px;
}

.primary {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.special {
  border: 1px solid var(--color-black);
  background-color: var(--color-black);
  color: var(--color-white);
}

.hollow {
  background-color: transparent;
  border-color: currentColor;
}

.hollow.primary {
  color: var(--color-primary);
  border-color: currentColor;
}

.hollow.special {
  color: var(--color-black);
  border-color: currentColor;
}