@layer atoms {
  .mobius-link {
    box-sizing: border-box;
    font-family: var(--font-family);
    line-height: var(--line-height-normal);
    color: var(--color-link);
    outline: none;
    border-radius: var(--radius-1);

    &:hover,
    &:active {
      text-decoration: var(--link-hover-text-decoration, underline);
      cursor: pointer;
      color: var(--color-link-hover);
    }

    &:focus-visible {
      box-shadow: var(--link-box-shadow, var(--box-shadow-default));
      padding: 3px 0;
    }

    &.--is-disabled {
      color: var(--color-text-light);
      pointer-events: none;
      cursor: not-allowed;
    }
  }

  .mobius-link--secondary {
    color: var(--color-link-secondary);

    &:hover,
    &:active {
      color: var(--color-link-secondary-hover);
    }
  }
}
