.v-button {
  --button-color: var(--color-green);
  --button-color-focus: var(--color-blue);
  --button-color-hover: #085F32;
  --button-color-disabled: #D1D1D1;
  --button-color-disabled-font: #888;
  --button-color-white: #fff;

  --button-gap: 0.8rem;
  --button-padding-y: 1.2rem;
  --button-padding-x: 2.4rem;
  --button-line-height: 2.2rem;
  --button-font-size: 1.8rem;
  --button-font-weight: 700;
  --button-radius: 0.4rem;
  --button-transition: all 0.4s var(--ease);

  --button-icon-size: 2.4rem;

  --button-bg-hover-secondary: #F3F3F3;
  --button-font-size-hyperlink: 1.8rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  padding: var(--button-padding-y) var(--button-padding-x);
  line-height: var(--button-line-height);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  transition: var(--button-transition);
  width: max-content;

  svg {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    transition: var(--button-transition);
  }

  &:focus,
  &:focus-visible,
  &:hover {
    text-decoration: unset;

    svg {
      transform: translateX(0.6rem);
    }
  }

  &:focus-visible {
    margin-bottom: 0;
    outline-offset: 2px;
    outline: 2px solid var(--button-color-focus);
  }
}

/* Variants */
.v-button__primary {
  background: var(--button-color);
  color: var(--button-color-white);
  border: 1px solid var(--button-color);

  &:focus,
  &:focus-visible {
    color: var(--button-color-white);
    background: var(--button-color);
    border: 1px solid var(--button-color);
  }

  &:hover {
    background: var(--button-color-hover);
    border: 1px solid var(--button-color-hover);
    color: var(--button-color-white);
  }
}

.v-button__secondary {
  background: var(--button-color-white);
  color: var(--button-color);
  border: 1px solid var(--button-color);

  &:focus,
  &:focus-visible {
    color: var(--button-color);
    border: 1px solid var(--button-color);
  }

  &:hover {
    color: var(--button-color-hover);
    border: 1px solid var(--button-color-hover);
    background: var(--button-bg-hover-secondary);
  }
}

.v-button__outline {
  background: transparent;
  color: var(--button-color);
  border: 1px solid var(--button-color);

  &:focus,
  &:focus-visible {
    color: var(--button-color);
    border: 1px solid var(--button-color);
  }

  &:hover {
    color: var(--button-color-hover);
    border: 1px solid var(--button-color-hover);
  }
}

.v-button__hyperlink {
  padding: unset;
  background: transparent;
  color: var(--button-color);
  text-decoration: underline;
  font-size: var(--button-font-size-hyperlink);
  transition: unset;

  &:focus,
  &:focus-visible {
    color: var(--button-color);
    border: unset;
    text-decoration: underline;
  }

  &:hover {
    text-decoration: underline;
    color: var(--button-color-hover);
  }
}