@use "../../../00-base/00-config/00-variables" as *;

@use "link-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Links
// *
////////////////////////////////////////////////////////////////////////////////

// * Links
// =============================================================================

// ** This is NOT the link style used in the Editor or Styleguide,
//    look further down the page for that.
//    This is just a default, standard link style
//    loaded by default in places OUTSIDE the editor

a {
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip-ink: auto;
  transition-property: color, background-color;
  transition-duration: $duration;
  transition-timing-function: $easing;

  &,
  &:visited {
    color: hsl(var(--clr-link));
  }

  &:is(:focus, :hover) {
    color: hsl(var(--clr-link-hover));
  }

  &:active {
    color: hsl(var(--clr-link-active));
  }

  &::after,
  &::before {
    transition: all $duration $easing;
  }
}

// ** More (e.g. in teasers).
.more-link a,
.link--more {
  @include link-more;
}

// ** Bigger "more" link (e.g. for views on homepage).
.more-link--big a,
.link--more-big {
  @include link-more-big;
}

// ** Back
.back-link a,
.link--back {
  @include link-back;
}

// ** links in CKE & styleguide

:is(
  ul.inline,
  .cke_editable,
  .ck-editor__editable,
  .text-long,
  .text-long .links li
) a {
  @include link-underline((
    color: var(--clr-text-link),
    color-hover: var(--clr-text-link-hover),
    color-active: var(--clr-text-link-active)
  ));
}

// ** normalize a bunch of browser shit

a:not([href]):not([tabindex]) {
  text-decoration: none;
  // color: inherit; // don't use because it messes up color on disabled links without href
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  text-decoration: none;
  // color: inherit; // don't use because it messes up color on disabled links without href
}

// ** curser Pointer for Custom view-mode Wrappers
//    which link to a location onclick
[onclick^="location.href="],
[onclick^="window.open"] {
  cursor: pointer;
}

// Buttons wrapper, for spacing.
.buttons__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}
