$button-border: darken($accent-color, 8%); $button-border-dark: lighten($accent-color-dark, 8%);

a {

&:not(.button) {
  &:link {
    color: $accent-color;
    text-decoration-color: $accent-color;

    @media (prefers-color-scheme: dark) {
      color: $accent-color-dark;
      text-decoration-color: $accent-color-dark;
    }

    text-decoration-line: underline;
    text-underline-position: under;
  }

  &:visited {
    color: $accent-color;
    text-decoration-color: $accent-color;

    @media (prefers-color-scheme: dark) {
      color: $accent-color-dark;
      text-decoration-color: $accent-color-dark;
    }

    text-decoration-line: underline;
  }

  &:hover,
  &:focus {
    outline: 0;
    color: $accent-inverted;
    background-color: $accent-color;

    @media (prefers-color-scheme: dark) {
      color: $accent-inverted-dark;
      background-color: $accent-color-dark;
    }

    padding: 8px;
    margin: -8px;
  }

  &:active {
    color: $accent-inverted-active;
    @media (prefers-color-scheme: dark) {
      color: $accent-inverted-active-dark;
    }
  }
}

&.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  text-decoration: none;

  background-color: $accent-color;
  color: $accent-inverted;
  border: 1px solid $button-border;

  @media (prefers-color-scheme: dark) {
    background-color: $accent-color-dark;
    color: $accent-inverted-dark;
    border: 1px solid $button-border-dark;
  }

  align-items: center;
  border-radius: 4px;
  box-shadow: none;
  display: inline-flex;
  font-size: inherit;
  justify-content: center;
  padding: 0.5em 1em;
  position: relative;
  vertical-align: top;

  cursor: pointer;

  &:hover {
    background-color: $button-border;
    @media (prefers-color-scheme: dark) {
      background-color: $button-border-dark;
    }
  }
}

}