.pp-button {
  --button__gap: 0.3rem;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--button__gap) !important;
  text-align: center !important;

  text-decoration: none !important;
  font-size: 90% !important;
  font-weight: var(--v-font-weight__default--bold) !important;
  line-height: 1.2;

  padding: 0 1rem !important;
  margin: calc( var(--v-spacing__p) / 2 ) 0 !important;
  height: var(--v-button__height--default) !important;
  border-radius: var(--v-border-radius__lg) !important;

  background-color: var(--v-color__2) !important;
  color: var(--v-color__1) !important;

  transition: var(--v-transition__default);
}

.pp-button:hover {
  background-color: var(--v-color__2--alt1) !important;
}

.pp-button--alt1 {
  background-color: transparent !important;
  border: 2px solid var(--v-color__white);
  color: var(--v-color__white) !important;
}

.pp-button--alt1:hover {
  background-color: var(--v-color__white) !important;
  color: var(--v-color__1) !important;
}

.pp-button--alt2 {
  background-color: var(--v-color__1) !important;
  color: var(--v-color__white) !important;
}

.pp-button--alt2:hover {
  background-color: var(--v-color__1--alt2) !important;
}

.pp-button--arrow {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;

  background-color: transparent !important;
  color: var(--v-color__1--alt2) !important;
  font-family: inherit;
}

.pp-button--arrow::after {
  content: "\2192";
}

.pp-button--arrow:hover {
  background-color: transparent !important;
  color: var(--v-color__2--alt1) !important;
}

.pp-button--arrow:hover::after {
  transform: translateX(4px);
}

.pp-button--download {
  --button-download__size: 1.5em;
}

.pp-button--download::before {
  content: "\f008";
  flex: 0 0 auto;

  font-family: 'w153c-icons-1';
  font-size: var(--button-download__size);
  font-weight: normal;
  line-height: 1;
}

@media (min-width: 1200px) {
  .pp-button:not(.pp-button--arrow) {
    padding: 0 1.8rem !important;
  }
}
