@use '../interaction-state';
@use '../utils';

$_focus-ring-gap: 3px;
$_focus-ring-border-radius: utils.border-radius('xxs');

/*
 * Link-styles (anchor tag with href or kirbyModalRouterLink directive)
 */
:link,
:visited,
a[modal-router-link],
.kirby-button-link {
  // Wrap declarations to avoid clashes with other mixins that have nested rules.
  // See: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
  /* stylelint-disable no-duplicate-selectors */
  & {
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
  }

  @include interaction-state.apply-focus-visible($gap: $_focus-ring-gap) {
    outline: none;
    border-radius: $_focus-ring-border-radius;
  }
}

a,
.kirby-button-link {
  @include interaction-state.apply-hover {
    text-decoration-color: transparent;
  }

  // Wrap declarations to avoid clashes with other mixins that have nested rules.
  // See: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
  & {
    transition: interaction-state.transition();
  }
}

button.kirby-button-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}