.a-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: 0.9375rem 1.625rem;
  cursor: pointer;
  transition-timing-function: var(--transition-timing-function-cubic-bezier);
  transition-duration: var(--transition-duration-0-25);
  transition-property: border-color, color, background-color;
  text-decoration: none;
  letter-spacing: var(--letter-spacing-0-1);
  color: var(--color-greyscale-7);
  border: 0.125rem solid var(--color-main-1);
  border-radius: 0.9375rem;
  background-color: var(--color-main-1);
  font: inherit;
  appearance: none;
  gap: 0.625rem;
}

  .a-button:hover {
    border-color: var(--color-greyscale-2);
    background-color: var(--color-greyscale-2);
  }

  .a-button[disabled],
  .a-button.is-disabled {
    cursor: not-allowed;
    border-color: var(--color-main-4);
    background-color: var(--color-main-4);
  }

  .a-button--small {
    min-height: initial;
    padding: 0.625rem 1.875rem;
    border-radius: 0.625rem;
  }

  .a-button--flex {
    display: flex;
    flex: 1 0 0;
  }

  @media all and (min-width: 769px) {

  .a-button--flex {
      flex: initial
  }
    }

  .a-button--second {
    color: var(--color-greyscale-2);
    background-color: transparent;
  }

  .a-button--second:hover {
      color: var(--color-greyscale-7);
      background-color: var(--color-greyscale-2);
    }

  .a-button--second[disabled],
    .a-button--second.is-disabled {
      cursor: not-allowed;
      color: var(--color-main-4);
      background-color: transparent;
    }

  .a-button--third {
    color: var(--color-greyscale-2);
    border-color: currentColor;
    background-color: transparent;
  }

  .a-button--third:hover {
      color: var(--color-greyscale-7);
      background-color: var(--color-greyscale-2);
    }

  .a-button--third[disabled],
    .a-button--third.is-disabled {
      cursor: not-allowed;
      color: var(--color-main-4);
      background-color: transparent;
    }

  .a-button--icon-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border: none;
    background: none;
    gap: 0.3125rem;
  }

  .a-button--icon-text .a-button__text {
      display: none;
      font-size: 0.75rem;
      font-weight: 500;
    }

  @media all and (min-width: 769px) {

  .a-button--icon-text .a-button__text {
        display: block
    }
      }

  .a-button--icon-text svg {
      width: 1.5rem;
      height: 1.5rem;
    }

  .a-button__icon {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
  }

  .a-button__ajax {
    animation: a-button-ajax-circle-animation var(--transition-duration-0-5) linear infinite;
  }

  .a-button__ajax--start + .a-button__icon, .a-button__ajax--end + .a-button__icon {
        display: none;
      }

  .a-button__ajax--full {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-name: a-button-ajax-circle-full-animation;
    }

  .a-button__ajax--full ~ * {
        opacity: 0;
      }

@keyframes a-button-ajax-circle-animation {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes a-button-ajax-circle-full-animation {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}