.btn {
  --bg: var(--c-primary);
  --color: var(--c-secondary);
  --pb: 0.5em;
  --pl: 1em;
  --pr: 1em;
  --pt: 0.5em;

  background: var(--bg);
  color: var(--color);
  cursor: pointer;
  font-weight: bold;

  padding-bottom: var(--pb);
  padding-left: var(--pl);
  padding-right: var(--pr);
  padding-top: var(--pt);

  &.outline {
    --bg: unset;
    --border: 0.2rem solid var(--c-primary);
    --color: var(--c-primary);

    background: var(--bg);
    color: var(--color);

    position: relative;

    &::before {
      border: var(--border);
      content: '';

      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}