.root {
  background: var(--accent-color);
  border-radius: 3px;
  border: 1px solid var(--accent-color);
  color: white !important;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: bold;
  padding: 1em 1.5em;
  text-decoration: none;
  transition: opacity 150ms ease-in-out;
  white-space: nowrap;

  &:hover {
    opacity: 0.8;
  }

  svg {
    fill: white;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3em;
  }
}

.disabled {
  opacity: 0.7;
}

.sInvert {
  background: white;
  border: 1px solid var(--accent-color);
  color: var(--accent-color) !important;

  svg {
    fill: var(--accent-color);
  }
}

.sPurple {
  background: color-mix(in srgb, #b039b8 10%, white);
  border: 1px solid #de66e6;
  color: color-mix(in srgb, #200523 40%, #b039b8) !important;

  svg {
    fill: color-mix(in srgb, #200523 40%, #b039b8);
  }
}

.pSmall {
  padding: 0.8em 1.1em;
}

.pTiny {
  padding: 0.3em 1em;
}

.pBig {
  padding: 1.2em 1.5em;
}

.fsBig {
  font-size: 1.2em;
}

.fsSmall {
  font-size: 0.9em;
}

.block {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
