@use '../../variables' as *;
:global {
  .silke-link {
    text-decoration: underline;
    cursor: pointer;
    color: var(--color-accent-40);
    user-select: text;

    &.secondary {
      color: var(--color-neutral-40);
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--color-neutral-100);
    }

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

  .silke-link--standalone {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .silke-link-icon {
    margin-left: 0.25em;
  }

  button.silke-link {
    border: 0;
    background: transparent;
    width: auto;
    text-align: inherit;
    padding: 0;
  }
}