.button {
  display: block;
  padding: 17px 20px;
  font-size: var(--font-size-small);
  line-height: var(--font-size-small);
  font-family: var(--font-family-sans-serif-heading);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
  text-decoration: none;
}

.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  position: relative;
  padding-right: 40px;

  &::after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: calc(100% - 30px);
    background-image: url("/assets/icons/arrow_white-09f9f656.svg");
    background-size: cover;
    background-position: center center;
    width: 12px;
    height: 12px;
  }

  &:focus, &:hover {
    background-color: transparent;
    color: var(--color-primary);

    &::after {
      background-image: url("/assets/icons/arrow-052bd6d0.svg");
    }
  }

  svg {
    path {
      fill: var(--color-white);
    }
  }
}

.button-primary-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary-light);
  color: var(--color-white);
  border: 2px solid var(--color-primary-light);
  position: relative;
  padding-right: 40px;

  &::after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: calc(100% - 30px);
    background-image: url("/assets/icons/arrow_white-09f9f656.svg");
    background-size: cover;
    background-position: center center;
    width: 12px;
    height: 12px;
  }

  &:focus, &:hover {
    background-color: transparent;
    color: var(--color-primary-light);

    &::after {
      background-image: url("/assets/icons/arrow-052bd6d0.svg");
    }
  }

  svg {
    path {
      fill: var(--color-white);
    }
  }
}

.button-reverse-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  position: relative;
  padding-left: 40px;

  &::after {
    content: "";
    position: absolute;
    top: calc(50% - 7px);
    right: calc(100% - 30px);
    transform: rotate(180deg);
    background-image: url("/assets/icons/arrow_white-09f9f656.svg");
    background-size: cover;
    background-position: center center;
    width: 12px;
    height: 12px;
  }

  &:focus, &:hover {
    background-color: transparent;
    color: var(--color-primary);

    &::after {
      background-image: url("/assets/icons/arrow-052bd6d0.svg");
    }
  }

  svg {
    path {
      fill: var(--color-white);
    }
  }
}

.button-block-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: transparent;
  color: var(--color-primary);
  position: relative;
  padding-right: 40px;
  padding-left: 0;

  &::after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: calc(100% - 30px);
    background-image: url("/assets/icons/arrow-052bd6d0.svg");
    background-size: cover;
    background-position: center center;
    width: 12px;
    height: 12px;
  }

  &:focus, &:hover {
    color: var(--color-secondary);

    &::after {
      background-image: url("/assets/icons/arrow_purple-5b2ed0a9.svg");
    }
  }
}

.button-icon-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  position: relative;

  &:focus, &:hover {
    background-color: transparent;
    color: var(--color-primary);

    &::after {
      background-image: url("/assets/icons/arrow-052bd6d0.svg");
    }

    svg {
      path, circle {
        fill: var(--color-primary);
      }
    }
  }

  svg {
    path, circle {
      fill: var(--color-white);
    }
  }
}