:root {
  --button--bg-color: var(--button--default-bg-color);
  --button--color: var(--button--default-color);
  --button--hover-bg-color: var(--button--default-hover-bg-color);
  --button--hover-color: var(--button--default-hover-color);
  --button-link-hover-color: var(--button--default-link-hover-color);
  --button-font-size: 18px;
  --button-icon-size: 18px;
  --button-underline-color: var(--anchor-color);
  --button-underline-thickness: unset;
  --button-underline-offset: unset;
  --button-padding-x: 15px;
  --button-padding-y: 15px;
  --button-padding: var(--button-padding-y) var(--button-padding-x);
}
button.button {
  border: 0;
}

button.button,
a.button {
  font-style: italic;
  line-height: 13px;
  letter-spacing: 0px;
  font-weight: 600;
  border-radius: var(--button-border-radius);
  transition: var(--transition);
  text-transform: uppercase;
  padding: var(--button-padding);
  font-size: var(--button-font-size);
  font-family: var(--header-font-family);
}

.button {
  display: inline-block;
  background-color: var(--button--bg-color);
  color: var(--button--color);
  font-size: var(--button--font-size);
  cursor: pointer;
  text-decoration: none;
  &:hover, &:focus-visible {
    background-color: var(--button--hover-bg-color);
    color: var(--button--hover-color);
  }
}

.button--default {
  --button--bg-color: var(--button--default-bg-color);
  --button--color: var(--button--default-color);
  --button--hover-bg-color: var(--button--default-hover-bg-color);
  --button--hover-color: var(--button--default-hover-color);
}

.button.button--simple,.button.webform-file-button{
  border: solid 1px var(--secondary-color);
  padding: 12px;
  border-radius: 500px;
  transition: 0.3s ease;
}
.webform-file-button{
  background-color: transparent;
}

.button--primary {
  --button--bg-color: var(--button--primary-bg-color);
  --button--color: var(--button--primary-color);
  --button--hover-bg-color: var(--button--primary-hover-bg-color);
  --button--hover-color: var(--button--primary-hover-color);
  --button-link-hover-color: var(--button--primary-bg-color);
}

.button--secondary {
  --button--bg-color: var(--button--secondary-bg-color);
  --button--color: var(--button--secondary-color);
  --button--hover-bg-color: var(--button--secondary-hover-bg-color);
  --button--hover-color: var(--button--secondary-hover-color);
}

.button_link {
  background-color: transparent;
  --button--color: var(--text-color);
  --button--hover-bg-color: transparent;
  --button--hover-color: var(--button--bg-color);
  .button-text {
    text-decoration: underline;
    text-decoration-color: var(--button-underline-color);
    text-decoration-thickness: var(--button-underline-thickness);
    text-underline-offset: var(--button-underline-offset);
  }
  &:hover, &:focus-visible {
    .button-text {
      text-decoration: none;
    }
  }
}

.button_icon {
  display: inline-flex;
  align-items: center;
  column-gap: 12px;
}

.button [class*="icon-"] {
  font-size: var(--button-icon-size);
}

/**
 * SIZE
 */
.button_small {
  font-size: var(--font-size-small);
}

.has-phone-button a{
  background-position: left 14px center;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.3786 0.676763C4.16257 0.165379 3.59926 -0.105195 3.0633 0.0382095L2.9129 0.0787955C1.14639 0.555005 -0.363064 2.2488 0.0771949 4.31057C1.0917 9.04561 4.85714 12.7714 9.64256 13.7752C11.729 14.2136 13.4381 12.7173 13.9194 10.9694L13.9604 10.8206C14.108 10.2875 13.8319 9.73016 13.3178 9.51911L10.6571 8.42329C10.2059 8.23659 9.68358 8.36647 9.37184 8.74256L8.31632 10.0197C6.39395 9.07537 4.84621 7.49522 3.95748 5.55521L5.16614 4.58114C5.54624 4.27539 5.67477 3.7586 5.48882 3.30944L4.3786 0.676763Z' fill='%23FFF'/%3E%3C/svg%3E%0A");
  background-size: 14px;
  background-repeat: no-repeat;
  padding-left: 38px;
}