.link {
  height: 36px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 64px;

  margin: 0.25rem 0;
  padding: 0 16px;

  text-decoration: none;

  @media (min-width: 576px) {
    margin: 0.45rem 0;
    padding: 0 26px;
  }

  --background-activated: transparent;
  --background-hover: var(--ion-color-primary-contrast, #fff);
  --background-focused: var(--ion-color-primary-contrast, #fff);
  --background-activated-opacity: 0;
  --background-focused-opacity: 0.24;
  --background-hover-opacity: 0.08;

  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

  display: inline-flex;
  justify-content: center;
  align-items: center;

  &:focus,
  &:hover {
    text-decoration: none;
  }

  &[color="dark"] {
    background: var(--color-dark);
    color: var(--color-dark-contrast);

    &:hover,
    &:active {
      background: rgba(var(--color-dark-rgb), 0.88);
    }
  }

  &[color="light"] {
    background: var(--color-light);
    color: var(--color-light-contrast);

    &:hover,
    &:active {
      background: rgba(var(--color-light-rgb), 0.88);
    }
  }

  &[color="primary"] {
    background: var(--color-primary);
    color: var(--color-primary-contrast);

    &:hover,
    &:active {
      background: rgba(var(--color-primary-rgb), 0.88);
    }
  }

  &[color="primary-outline"] {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);

    &:hover,
    &:active {
      background: rgba(var(--color-primary-rgb), 0.68);
      color: var(--color-primary-contrast);
    }
  }
}
