.p-button {
  color: var(--v-color__2);
  background-color: var(--v-color__3);

  font-size: calc( var(--v-font-size__default) - 2px );
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-weight: var(--v-font-weight__default);

  display: inline-block;
  padding: 0.5rem 1rem;
  border: 4px solid var(--v-color__3);

  cursor: pointer;
  transition: var(--v-transition__default);

  margin: calc( var(--v-spacing__p) / 2 ) 0;
}

.p-button:hover {
  background-color: var(--v-color__3--400);
  border-color: var(--v-color__3--400);
}

.p-button--style1 {
  background-color: var(--v-color__1);
  border-color: var(--v-color__1);
}

.p-button--style1:hover {
  background-color: var(--v-color__1--alt1);
  border-color: var(--v-color__1--alt1);
}

.p-button--spacing {
  margin-left: calc( var(--v-spacing__p) / 4 );
  margin-right: calc( var(--v-spacing__p) / 4 );
}

.p-button--full {
  width: 100%;
}

.p-button--sm {
  padding: 0.5rem 1rem;
}

@media (min-width: 1000px) {
  .p-button {
    padding: 0.8rem 1.7rem;
  }

  .p-button--sm {
    padding: 0.5rem 1rem;
  }
}