/**
 * Button component styling.
 *
 * 1. Line different size buttons up vertically.
 * 2. Force all buttons to appear clickable.
 * 3. Prevents error when switching from disable state.
 */
.c-button,
a.c-button {
  display: inline-flex;
  gap: var(--s-md);
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-y, 0.75rem) var(--button-padding-x, 1.66rem);
  font-size: 1rem;
  font-weight: bold;
  line-height: inherit;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background-color: var(--c-link);
  border: solid 1px transparent;
  border-radius: 0.1875rem;
  /**
   * Secondary button variant.
   */
  /**
   * Hollow button variant.
   */
  /**
   * Size variations, default is medium.
   */
  /**
   * Outline button variant.
   */
  /**
   * Primary White button variant.
   */
  /**
   * Back to top button variant.
   * Cannot be reversed due to specific left/right padding
   */
  /**
   * Block button variant.
   */
  /**
   * Reversed button variant.
   */
  /**
   * Tag button variant.
   */
  /**
   * Toggle visibility, like for reset form button.
   */
}
.c-button:hover,
a.c-button:hover {
  color: #fff;
  text-decoration: none;
  background-color: var(--c-link-hocus);
}
.c-button:focus,
a.c-button:focus {
  outline: 0;
  outline-offset: 0;
}
.c-button:focus-visible,
a.c-button:focus-visible {
  outline: 3px solid var(--c-link-focus);
  outline-offset: 3px;
}
.c-button:active,
a.c-button:active {
  color: #fff;
  background-color: var(--c-link-active);
}
.c-button:disabled, .c-button:disabled:hover, .c-button:disabled:active, .c-button:disabled:focus, .c-button:disabled:focus-visible,
a.c-button:disabled,
a.c-button:disabled:hover,
a.c-button:disabled:active,
a.c-button:disabled:focus,
a.c-button:disabled:focus-visible {
  color: #fff;
  cursor: not-allowed;
  background-color: var(--c-grayscale-mid);
  border: solid 1px var(--c-grayscale-light);
  outline: 0;
}
.c-button__icon,
a.c-button__icon {
  flex-shrink: 0;
}
.c-button--secondary, .c-button--secondary:hover, .c-button--secondary:active, .c-button--secondary:focus, .c-button--secondary:focus-visible,
a.c-button--secondary,
a.c-button--secondary:hover,
a.c-button--secondary:active,
a.c-button--secondary:focus,
a.c-button--secondary:focus-visible {
  color: #fff;
  background-color: var(--c-grayscale);
}
.c-button--hollow,
a.c-button--hollow {
  color: var(--c-grayscale);
  background-color: #fff;
  border: 1px solid var(--c-grayscale);
}
.c-button--hollow:hover, .c-button--hollow:active,
a.c-button--hollow:hover,
a.c-button--hollow:active {
  color: var(--c-grayscale-black-hover);
  background-color: var(--c-grayscale-off-white);
}
.c-button--hollow:disabled, .c-button--hollow:disabled:hover, .c-button--hollow:disabled:active, .c-button--hollow:disabled:focus, .c-button--hollow:disabled:focus-visible,
a.c-button--hollow:disabled,
a.c-button--hollow:disabled:hover,
a.c-button--hollow:disabled:active,
a.c-button--hollow:disabled:focus,
a.c-button--hollow:disabled:focus-visible {
  color: var(--c-grayscale-black);
  background-color: var(--c-grayscale-off-white);
  border: 1px solid var(--c-grayscale-lighter);
}
.c-button--xsmall,
a.c-button--xsmall {
  padding: var(--s-2xs) var(--s-md);
  font-size: var(--text-size-sm);
  gap: var(--s-xs);
}
.c-button--small,
a.c-button--small {
  padding: var(--s-xs) var(--s-lg);
  font-size: 0.8755rem;
}
.c-button--large,
a.c-button--large {
  padding: var(--s-md) var(--s-3xl);
  font-size: 1.125rem;
}
.c-button--outline,
a.c-button--outline {
  color: var(--c-grayscale-off-dark);
  background-color: #fff;
  border: 1px solid var(--c-grayscale-off-dark);
}
.c-button--outline:hover,
a.c-button--outline:hover {
  color: var(--c-grayscale-off-dark);
  background-color: #fff;
}
.c-button--white,
a.c-button--white {
  color: var(--c-grayscale-off-dark);
  background-color: #fff;
  border: none;
}
.c-button--white:hover, .c-button--white:active,
a.c-button--white:hover,
a.c-button--white:active {
  color: var(--c-grayscale-black-hover);
  background-color: var(--c-grayscale-off-white);
}
.c-button--top,
a.c-button--top {
  gap: var(--s-2xs);
  padding: var(--s-xs) var(--s-sm) var(--s-xs) var(--s-lg);
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background-color: var(--c-grayscale);
  border-radius: 40px;
}
.c-button--top:hover, .c-button--top:active,
a.c-button--top:hover,
a.c-button--top:active {
  background-color: var(--c-grayscale-black-hover);
}
.c-button--top .icon,
a.c-button--top .icon {
  font-size: 1.875rem;
}
.c-button--block,
a.c-button--block {
  width: 100%;
}
.c-button--reversed,
a.c-button--reversed {
  flex-direction: row-reverse;
}
.c-button--tag,
a.c-button--tag {
  flex: 0 0 auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: var(--s-3xs) var(--s-md);
  color: var(--c-grayscale-off-dark);
  font-size: 0.875rem;
  font-weight: 700;
}
.c-button--tag:hover, .c-button--tag:active,
a.c-button--tag:hover,
a.c-button--tag:active {
  background-color: var(--c-grayscale-black-hover);
}
.c-button[hidden],
a.c-button[hidden] {
  display: none;
}