@use "./base";

// ===== link =====
$link-decoration: none !default;
$link-decoration-hover: none !default;
$link-size-list: (sm, md) !default;
$link-font-size: (
  sm: base.$font-size-sm,
  md: base.$font-size-md,
) !default;
$link-padding-horizontal: base.padding(1) !default;

@mixin anchor-base() {
  & {
    color: base.$color-link;
    text-decoration: $link-decoration;
    outline: none;
    cursor: pointer;
    -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
    border: base.border($color: transparent);
    padding: 0 $link-padding-horizontal;
  }

  &:hover {
    color: base.$color-link-hover;
  }

  &:active {
    color: base.$color-link-active;
  }

  &:focus-visible {
    color: base.$color-link-focus;
    border-radius: base.$border-radius-small;
    @include base.focus-ring(base.color-blue(6), base.color-blue(2))
  }

  &:active,
  &:hover {
    text-decoration: $link-decoration-hover;
    outline: 0;
  }

  &[disabled] {
    color: base.$color-link-disabled;
    cursor: not-allowed;
    pointer-events: none;
  }
}