.button {
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 1.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.button--large {
  padding: 1rem 1.5rem 1rem 1.5rem;
  height: 3.5rem;
  line-height: 1.5rem;
}
.button--medium {
  padding: 0.75rem 1rem 0.75rem 1rem;
  height: 3rem;
  line-height: 1.5rem;
}
.button--small {
  padding: 0.75rem 1rem 0.75rem 1rem;
  height: 2.5rem;
  line-height: 1rem;
}
.button--xsmall {
  font-size: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  height: 1.75rem;
  line-height: 100%;
}
.button--primary {
  background-color: #fcd300;
  color: #283135;
  border: 0;
}
.button--primary:hover {
  background-color: #caa900;
}
.button--primary:active {
  background-color: #655400;
}
.button--primary:focus {
  border-radius: 0.125rem;
  border: 0.125rem solid #fef6cc;
  background-color: #fcd300;
}
.button--primary[disabled] {
  color: #fcd300;
  background-color: #fef6cc;
}
.button--secondary {
  border-radius: 0.25rem;
  background-color: #fff;
  color: #14181b;
  border: 1px solid #14181b;
}
.button--secondary:hover {
  background-color: #3c4950;
  border: 0.125rem solid #3c4950;
  color: #fff;
}
.button--secondary:active {
  background-color: #3c4950;
  border: 0.125rem solid #3c4950;
  color: #fff;
}
.button--secondary:focus {
  background-color: #3c4950;
  border: 0.125rem solid #647a85;
  color: #fff;
}
.button--secondary[disabled] {
  background-color: #c1cace;
  border: 0.125rem solid #c1cace;
  color: #3c4950;
}
.button--ghost {
  background-color: transparent;
  border: 1px solid #14181b;
  border-radius: 0.25rem;
  color: #14181b;
}
.button--ghost-inverted {
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 0.25rem;
  color: #fff;
}