@charset "utf-8";
body {
  --size: 6rem;
}
.brand-button {
  height: var(--size);
  width: var(--size);
  background: linear-gradient(130deg,var(--color-6)35%,var(--color-7)65%);
  border-radius: 1000px;
  justify-content: center;
  align-items: center;
}


.button--push {
  width: calc(950% / 11);
  height: calc(950% / 11);
  border: 2px solid white;
  border-radius: inherit;
  background: var(--gray-off-white);
  box-shadow: var(--float);
  align-items: center;
  justify-content: center;
}

.button--icon {
  width: calc(200% / 3);
}

.button--complete {
  flex-direction: column;
  align-items: center;
}

  .button--complete .label {
    letter-spacing: .02rem;
    text-shadow: 0 1px var(--compare-more);
    text-transform: uppercase;
    margin: 1rem auto;
    text-align: center;
    font-weight: 400;
  }

:is(.button--complete:hover,.button--complete:focus) .button--push {
  box-shadow: var(--concave-sm);
  background: var(--compare-less);
}