.button {
  &:is(a) {
    text-decoration: none;
  }

  padding-inline: 1.125rem;
  padding-block: 0.75rem;
  font-weight: 500;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-transform: uppercase;
  transition:
    background-color 0.2s ease,
    outline 0.1s ease;
  background-color: var(--colour-primary);
  color: #ffffff;

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

  &:focus-visible {
    background-color: var(--colour-primary-dark);
    outline: 2px solid var(--colour-primary-dark);
    outline-offset: 2px;
  }
}

.rule {
  --colour-rule: var(--colour-primary);
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 10%;
  font-weight: 500;
  color: var(--colour-rule);
  text-transform: uppercase;
  margin-bottom: 0.625rem;

  &::before,
  &::after {
    background-color: var(--colour-rule);
    display: inline-block;
    height: 1px;
    width: 3.75rem;
    transform: translateY(-0.1875rem);
  }

  &::after {
    margin-left: 1rem;
  }

  &::before {
    margin-right: 1rem;
  }

  &.rule-on-dark {
    --colour-rule: var(--colour-text-on-dark-muted);
    color: var(--colour-rule);

    &::before {
      background-color: var(--colour-rule);
    }

    &::after {
      background-color: var(--colour-rule);
    }
  }

  &.rule-left {
    &::after {
      content: "";
    }
  }

  &.rule-center {
    &::before {
      content: "";
    }

    &::after {
      content: "";
    }
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;

  li {
    list-style: none;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    padding-inline: 0.5rem;
    color: var(--colour-primary);
    border: 1px solid var(--colour-border-strong);
  }
}