@layer components {
  .link {
    --color: var(--clr-info-500);
    --color-on-hover: var(--clr-info-600);
    --font-size: 1rem;
    --font-weight: 600;

    display: inline-flex;
    flex-flow: row nowrap;
    gap: 0.875ex;
    align-items: center;
    color: var(--color);
    font-size: var(--font-size);
    font-variation-settings: "wght" var(--font-weight);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.1s ease-in-out;

    &.-normal {
      --font-weight: 475;
    }

    &.-small {
      --font-size: 0.875rem;
      --font-weight: 475;
    }

    &.-extra-small {
      --font-size: 0.8125rem;
      --font-weight: 450;
    }

    &.-auto-underline:is(:focus, :focus-within, :hover) {
      text-decoration: underline;
    }

    &.-underlined {
      text-decoration: underline;
    }

    &.-brand-200 {
      --color: var(--clr-brand-300);
      --color-on-hover: var(--clr-brand-200);
    }

    &.-success {
      --color: var(--clr-success-700);
      --color-on-hover: var(--clr-success-800);
    }

    &.-warning {
      --color: var(--clr-warning-600);
      --color-on-hover: var(--clr-warning-700);
    }

    &.-danger {
      --color: var(--clr-danger-500);
      --color-on-hover: var(--clr-danger-600);

      & > * {
        color: inherit;
      }
    }

    &:is(:focus, :focus-within, :hover) {
      --color: var(--color-on-hover);
    }
  }
}