@use "../../themes/ionic/ionic.globals.scss" as globals;

// Link: Shared Styles (Standalone & Underline)
// -------------------------------------------------------------------------------
@mixin link-shared {
  @include globals.typography(globals.$ion-body-action-sm);

  display: inline-flex;

  align-items: center;

  gap: globals.$ion-space-100;

  transition: color globals.$ion-transition-time-200 ease-in-out;

  text-decoration-color: inherit;

  text-underline-offset: globals.$ion-scale-050;

  cursor: pointer;

  // Link: Visited
  // -------------------------------------------------------------------------------

  &:visited {
    color: globals.$ion-text-link-visited;
  }

  // Link: Focus
  // -------------------------------------------------------------------------------

  &:focus,
  &.ion-focused {
    @include globals.focused-state();

    border-radius: globals.$ion-border-radius-100;
  }

  // Link: Active
  // -------------------------------------------------------------------------------

  &:active,
  &.ion-activated {
    color: globals.$ion-text-link-press;

    text-decoration: underline;
  }

  // Link:  Hover
  // -------------------------------------------------------------------------------

  @media (any-hover: hover) {
    &:hover {
      color: globals.$ion-text-link-press;

      text-decoration: underline;
    }
  }
}

// Link: Standalone
// -------------------------------------------------------------------------------

@mixin ionic-link {
  color: globals.$ion-text-link-default;

  text-decoration: none;

  @include link-shared;
}

a,
:not(a).ion-link a {
  @include ionic-link;
}

// Link: Underline
// -------------------------------------------------------------------------------

@mixin ionic-link-underline {
  color: globals.$ion-text-default;

  @include link-shared;

  text-decoration: underline;

  // Link: Focus
  // -------------------------------------------------------------------------------

  &:focus,
  &.ion-focused {
    color: globals.$ion-text-default;

    text-decoration: none;
  }
}

a.ion-link-underline,
:not(a).ion-link-underline a {
  @include ionic-link-underline;
}