.button, .hs-button {
  position: relative;
  cursor: pointer;
  display: flex!important;
  flex-wrap: nowrap!important;
  border-radius: 0px!important;
  align-items: center;
  justify-content: center;
  font-size: var(--optical-size)!important;
  font-family: "Rubik"!important;
  font-weight: 600!important;
  letter-spacing: 0.0125em;
  line-height: 12px!important;
  border: none!important;
  padding: 0 calc(3rem * var(--parallelogram-angle) + 3rem) 0 3rem;
  height: 4rem;
  clip-path: var(--button-clip-right);
  min-height: 4rem;
  white-space: nowrap!important;
  text-align: center;
  text-decoration: none;
  width: fit-content;
  background-color: var(--bg);
  text-transform: none!important;
  transition: var(--transition-base);
  &:active {
    background-color: color-mix(in oklch, var(--bg) 100%, white 25%);
    transition: 0s;
  }
}

.button.left {
  padding: 0 3rem 0 calc(3rem * var(--parallelogram-angle) + 3rem);
  clip-path: var(--button-clip-left);
}

a.cta_button {
  display: flex;
  height: 46px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  align-items: center;
  background-color: var(--orange-50);
  padding: 0 18px;
  border-radius: 46px;
  letter-spacing: 0.05em;
}

a.cta_button:hover {
  background-color: var(--navy-50);
}

:is(form, .magazine, .popup__wrapper) :is(.button.square, .hs-button.square), .cta-container .button:has(+ .button) {
  padding: 0 3rem!important;
  clip-path: none!important;
}

.primary {
  --bg: var(--orange-50);
  color: white;

  &:hover {
    --bg: var(--orange-45);
    color: white!important;
  }
}

.secondary {
  --bg: var(--sky-50);
  color: white;

  &:hover {
    --bg: var(--sky-45);
    color: white!important;
  }
}

.tertiary {
  --bg: var(--navy-5);
  color: var(--navy-50);

  &:hover {
    --bg: var(--navy-10);
    color: var(--navy-50)!important;
  }
}

form:has(.hs-error-msgs.inputs-list) .hs-button {
  background: var(--slate-40)!important;
  color: var(--slate-5)!important;
  cursor: not-allowed!important;
}

.hs-button {
  width: 100%!important;
}

:is(button[type=button],a[download]):not(a.button,.no-styles) {
  align-items: center;
  background-color: color-mix(in oklch,var(--button-color) 12.5%,white);
  border: none;
  border-radius: .5rem;
  box-shadow: inset 0 0 0 .5px color-mix(in oklch,var(--button-color) 25%,transparent);
  color: var(--button-color);
  cursor: pointer;
  display: flex;
  font-size: calc(var(--button-height, 3rem)*.35708);
  font-weight: 500;
  height: var(--button-height,3rem);
  justify-content: center;
  letter-spacing: .0125em;
  line-height: 1;
  padding: 0 calc(var(--button-height, 3rem)* (1 / 3));
  text-box: initial;
  transition: var(--transition-base);
  & * {
    text-box: inherit
  }

  &:is(:hover,:focus-visible):not(:disabled,:active) {
    background-color: color-mix(in oklch,var(--button-color,#000) 18.75%,white);
    color: color-mix(in oklch,var(--button-color),black 12.5%);
    box-shadow: inset 0 0 0 1px color-mix(in oklch,var(--button-color,#000) 12.5%,transparent);
  }

  &:active {
    background-color: color-mix(in oklch,var(--button-color,#000) 25%, white);
    color: color-mix(in oklch,var(--button-color),black 18.75%);
    transition: 0s
  }

  &:disabled {
    background-color: var(--slate-50);
    color: 
      color-mix(in oklch, white, transparent);
    cursor: not-allowed!important;
    &:after {
      transform: none!important
    }
  }

  &:empty {
    aspect-ratio: 1/1;
    padding: 0
  }

  &.transparent {
    backdrop-filter: saturate(100%) brightness(87.5%) blur(.25rem);
    background-color: color-mix(in oklch,var(--button-color,#000) 50%,transparent);
    box-shadow: inset 0 0 0 .5px color-mix(in oklch,white 25%,transparent);
    color: white;
    &:is(:hover,:focus-visible):not(:disabled,:active) {
      backdrop-filter: saturate(50%) brightness(112.5%) blur(.5rem);
      background-color: color-mix(in oklch,var(--button-color,#000) 62.5%,#000 5%);
      box-shadow: inset 0 0 0 1px color-mix(in oklch,white 12.5%,transparent);
      color: white;
    }

    &:active {
      background-color: 
        background-color: color-mix(in oklch,var(--button-color,#000) 25%, transparent);
      color: white;
    }

    &:disabled {
      background-color: color-mix(in oklch,var(--slate-50),transparent);
      color: 
        color-mix(in oklch, white, transparent);
    }
  }
}

button[progress]:not([disabled])::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, color-mix(in oklch, 
      var(--button-color, #000) 25%, transparent) calc(progress(attr(progress type(<number>), 0), 0, 100) * 100%),
      transparent 0%  );
  border-radius: inherit;
}

button[data-field]::before {
  content: attr(data-field)":";
  margin-right: 0.5em;
  display: inherit;
  position: relative;
}