.button,
.p-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  height: calc( var(--v-form-field__height) * 1.7 );

  position: relative;
  text-decoration: none;

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

  line-height: var(--v-form-field__line-height);
  font-size: var(--v-form-field__font-size);
  font-weight: var(--v-font-weight__default--bold);
  text-align: center;

  cursor: pointer;

  transition: var(--v-transition__default);

  padding: 0 2.6rem;
  margin-top: calc(var(--v-spacing__p) / 2);
  margin-bottom: calc(var(--v-spacing__p) / 2);

  max-width: 100%;

  box-shadow: var(--v-shadow__xs);
  border-radius: var(--v-border-radius__md);
}

.button::before,
.p-button::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: 0;
  border: 2px solid var(--v-color__2);
  border-radius: var(--v-border-radius__md);
  transition: var(--v-transition__default);
}

.button:hover::before,
.p-button:hover::before {
  inset: 0.4rem;
  border-width: 4px;
}