Button: Ghost

.ps-button,
a.ps-button {
  display: inline-block;
  text-align: center;
  border: none;
  border-radius: 4px;
  padding: 1em 3em;
  text-decoration: none;
  font: inherit;
  line-height: 1.3;
  font-weight: 500;
  transition: all .1s linear;
  margin-top: var(--v-margin);
}

.ps-button--primary,
a.ps-button--primary {
  background-color: var(--color--primary);
  color: #fff;

  &:hover {
    background-color: var(--color--primary--dark);
  }
}

.ps-button--secondary,
a.ps-button--secondary {
  background-color: #000;
  color: #fff;

  &:hover {
    background-color: var(--color-grey-20);
  }
}

.ps-button--ghost,
a.ps-button--ghost {
  background-color: transparent;
  color: black;
  border: 2px solid black;

  &:hover,
  &:focus {
    background-color: var(--color-grey-20);
    color: #fff;
  }
}