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

// Link: Shared Styles (Standalone & Underline)
// -------------------------------------------------------------------------------
@mixin link-shared {
  display: inline-flex;

  align-items: center;

  gap: globals.$ion-space-100;

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

  font-weight: globals.$ion-font-weight-regular;

  text-decoration-color: inherit;

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

  cursor: pointer;

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

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

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

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

  text-decoration: none;

  @include link-shared;

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

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }

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

  &:focus,
  &.ion-focused {
    @include globals.focused-state(null, null, globals.$ion-text-link-default);

    text-decoration: underline;
  }

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

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

    text-decoration: underline;
  }
}

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

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

@mixin ionic-link-underline {
  color: currentColor;

  text-decoration: underline;

  @include link-shared;

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

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

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

  &:focus,
  &.ion-focused {
    @include globals.focused-state(null, null, globals.$ion-text-link-default);

    text-decoration: none;
  }

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

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

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