.button {
  border: none;
  color: var(--Color-Primary);
  display: inline-flex;
  column-gap: var(--Spacing-03);
  cursor: pointer;
  font-size: var(--Font-Size-M);
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: var(--Transition-Base);
  align-items: center;
  position: relative;
}
.button .icon {
  pointer-events: none;
  fill: var(--Color-Primary);
  transform: scale(1);
  transition: var(--Transition-Base);
}
.button.is-primary {
  text-align: center;
  line-height: 16px;
  border: solid 4px transparent;
  padding: var(--Spacing-05) var(--Spacing-07);
  background-color: hsl(from var(--bg-color) h s calc(l - 4));
  color: var(--text-color);
  border-bottom-color: var(--accent);
}
.button.is-primary-outline {
  text-align: center;
  line-height: 16px;
  border: solid 4px transparent;
  padding: var(--Spacing-05) var(--Spacing-07);
  background-color: transparent;
  border-color: var(--text-color);
}
.button:not(.no-link):hover, .button:not(.no-link):focus, .button:not(.no-link):focus-within {
  color: var(--Color-Primary-Hover);
  outline: var(--Color-Primary-Hover);
}
.button:not(.no-link):hover:after, .button:not(.no-link):focus:after, .button:not(.no-link):focus-within:after {
  left: var(--Spacing-02);
}
.button:not(.no-link):hover .icon, .button:not(.no-link):focus .icon, .button:not(.no-link):focus-within .icon {
  fill: var(--Color-Primary-Hover);
  transform: scale(1.2);
}
.button:not(.no-link):hover.is-primary, .button:not(.no-link):focus.is-primary, .button:not(.no-link):focus-within.is-primary {
  color: var(--Color-Primary-Hover);
  outline: var(--Color-Primary-Hover);
  background-color: hsl(from var(--bg-color) h s calc(l - 4));
  border-color: var(--accent);
}
.button:not(.no-link):hover.is-primary:after, .button:not(.no-link):focus.is-primary:after, .button:not(.no-link):focus-within.is-primary:after {
  left: var(--Spacing-02);
}
.button:not(.no-link):hover.is-primary .icon, .button:not(.no-link):focus.is-primary .icon, .button:not(.no-link):focus-within.is-primary .icon {
  fill: var(--Color-Primary-Hover);
  transform: scale(1.2);
}
.button:not(.no-link):hover.is-primary .icon, .button:not(.no-link):focus.is-primary .icon, .button:not(.no-link):focus-within.is-primary .icon {
  fill: var(--text-color);
}
.button:not(.no-link):hover.is-primary-outline, .button:not(.no-link):focus.is-primary-outline, .button:not(.no-link):focus-within.is-primary-outline {
  color: var(--Color-Primary-Hover);
  outline: var(--Color-Primary-Hover);
  border-color: var(--Color-Primary-Hover);
}
.button:not(.no-link):hover.is-primary-outline:after, .button:not(.no-link):focus.is-primary-outline:after, .button:not(.no-link):focus-within.is-primary-outline:after {
  left: var(--Spacing-02);
}
.button:not(.no-link):hover.is-primary-outline .icon, .button:not(.no-link):focus.is-primary-outline .icon, .button:not(.no-link):focus-within.is-primary-outline .icon {
  fill: var(--Color-Primary-Hover);
  transform: scale(1.2);
}
.button.no-link {
  cursor: default;
}

/*# sourceMappingURL=button.css.map */