@dnb/eufemia/components/anchor/style/dnb-anchor.css

DNB Eufemia Design System UI Library

/*
 * Anchor
 *
 */
/*
 * Anchor mixins
 *
 */
/*
 * Utilities
 */
button.dnb-anchor {
  cursor: pointer;
  line-height: calc(var(--line-height-basis) + 0.125rem);
  border: none;
  background: none;
  -webkit-appearance: none;
          appearance: none;
}

:where(:not(.dnb-anchor--no-style)).dnb-anchor {
  --anchor-underline-thickness: 0.0938rem;
  --anchor-color: var(--anchor-color--default);
  --anchor-icon-color: var(--anchor-icon-color--default);
  --anchor-color--default: var(--token-color-text-action);
  --anchor-color--hover: var(--token-color-text-action-hover);
  --anchor-color--active: var(--token-color-text-action-pressed);
  --anchor-icon-color--default: var(--token-color-icon-action);
  --anchor-icon-color--hover: var(--token-color-icon-action-hover);
  --anchor-icon-color--active: var(--token-color-icon-action-pressed);
  --anchor-bg--hover: var(--token-color-background-action-hover-subtle);
  --anchor-bg--active: var(--token-color-background-action-pressed-subtle);
  --anchor-icon-gutter: 0.25em;
  --anchor-icon-separator: '\2060';
  --anchor-icon-position: translateY(-0.175em);
  display: inline;
  padding: 0.05575em 0;
  font-size: var(--font-size-basis);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: var(--anchor-underline-thickness);
  text-underline-offset: 0.25em;
  border-radius: 0.25em;
}
sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor--no-style)).dnb-anchor {
  padding: 0 0.025em;
}
.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor {
  font-size: inherit;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor {
  color: var(--anchor-color);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
  --anchor-color: var(--token-color-text-action-focus);
  --anchor-icon-color: var(--token-color-icon-action-focus);
  --focus-ring-width: 0.25rem;
  transition: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible, .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor {
  -webkit-text-decoration: none;
  text-decoration: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
  outline: none;
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color), inset 100vw 100vw 0 0 var(--token-color-background-action-focus-subtle), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--token-color-background-action-focus-subtle), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--token-color-background-action-focus-subtle);
  border-color: transparent;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
  --anchor-color: var(--anchor-color--hover);
  --anchor-icon-color: var(--anchor-icon-color--hover);
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
  -webkit-text-decoration: none;
  text-decoration: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
  /* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
  :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
    --anchor-color: var(--anchor-color--hover);
    --anchor-icon-color: var(--anchor-icon-color--hover);
    box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
  }
  :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
  --anchor-color: var(--anchor-color--active);
  --anchor-icon-color: var(--anchor-icon-color--active);
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--active);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:active, .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor {
  -webkit-text-decoration: none;
  text-decoration: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor {
  transition: box-shadow 200ms ease-in-out, color 200ms ease-in-out, background 200ms ease-in-out;
}
[data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor {
  transition: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
  display: inline;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--anchor-icon-color);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
  vertical-align: baseline;
  transform: scale(2) var(--anchor-icon-position);
  font-size: 0.5em;
  width: 2em;
  height: 1em;
  pointer-events: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
  display: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child::after {
  content: var(--anchor-icon-separator);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
  margin-right: calc(var(--anchor-icon-gutter) * 2);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
  content: var(--anchor-icon-separator);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
  margin-left: calc(var(--anchor-icon-gutter) * 2);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
  font-size: 0.8888888889em;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--surface-dark {
  --anchor-color--default: var(--token-color-text-action-ondark);
  --anchor-color--hover: var(--token-color-text-action-ondark);
  --anchor-color--active: var(--token-color-text-action-ondark);
  --anchor-icon-color--default: var(--token-color-icon-action-ondark);
  --anchor-icon-color--hover: var(--token-color-icon-action-hover-ondark);
  --anchor-icon-color--active: var(--token-color-icon-action-ondark);
  --anchor-bg--hover: var(
    --token-color-background-action-hover-subtle-ondark
  );
  --anchor-bg--active: var(
    --token-color-background-action-pressed-subtle-ondark
  );
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--disabled, :where(:not(.dnb-anchor--no-style)).dnb-anchor[aria-disabled=true], :where(:not(.dnb-anchor--no-style)).dnb-anchor[disabled] {
  --anchor-color: var(--token-color-text-action-disabled);
  --anchor-icon-color: var(--token-color-icon-action-disabled);
}

:not(.dnb-anchor--no-style) {
  /* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
  :not(.dnb-anchor--no-style).dnb-anchor {
    --anchor-underline-thickness: 0.0938rem;
    --anchor-color: var(--anchor-color--default);
    --anchor-icon-color: var(--anchor-icon-color--default);
    --anchor-color--default: var(--token-color-text-action);
    --anchor-color--hover: var(--token-color-text-action-hover);
    --anchor-color--active: var(--token-color-text-action-pressed);
    --anchor-icon-color--default: var(--token-color-icon-action);
    --anchor-icon-color--hover: var(--token-color-icon-action-hover);
    --anchor-icon-color--active: var(--token-color-icon-action-pressed);
    --anchor-bg--hover: var(--token-color-background-action-hover-subtle);
    --anchor-bg--active: var(--token-color-background-action-pressed-subtle);
    --anchor-icon-gutter: 0.25em;
    --anchor-icon-separator: '\2060';
    --anchor-icon-position: translateY(-0.175em);
    display: inline;
    padding: 0.05575em 0;
    font-size: var(--font-size-basis);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-decoration-thickness: var(--anchor-underline-thickness);
    text-underline-offset: 0.25em;
    border-radius: 0.25em;
  }
  sup :not(.dnb-anchor--no-style).dnb-anchor, sub :not(.dnb-anchor--no-style).dnb-anchor {
    padding: 0 0.025em;
  }
  .dnb-p :not(.dnb-anchor--no-style).dnb-anchor, .dnb-lead :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor {
    font-size: inherit;
  }
  :not(.dnb-anchor--no-style).dnb-anchor {
    color: var(--anchor-color);
  }
  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
    --anchor-color: var(--token-color-text-action-focus);
    --anchor-icon-color: var(--token-color-icon-action-focus);
    --focus-ring-width: 0.25rem;
    transition: none;
  }
  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible, .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
    outline: none;
    --border-color: var(--token-color-stroke-action-focus);
    --border-width: var(--focus-ring-width);
    box-shadow: 0 0 0 var(--border-width) var(--border-color), inset 100vw 100vw 0 0 var(--token-color-background-action-focus-subtle), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--token-color-background-action-focus-subtle), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--token-color-background-action-focus-subtle);
    border-color: transparent;
  }
  :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
    --anchor-color: var(--anchor-color--hover);
    --anchor-icon-color: var(--anchor-icon-color--hover);
    box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
  }
  :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
    /* stylelint-disable-next-line scss/operator-no-unspaced */
  }
  @supports not (selector(*:where(*))) {
    :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
      --anchor-color: var(--anchor-color--hover);
      --anchor-icon-color: var(--anchor-icon-color--hover);
      box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
    }
    :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
      -webkit-text-decoration: none;
      text-decoration: none;
    }
  }
  :not(.dnb-anchor--no-style).dnb-anchor:active {
    --anchor-color: var(--anchor-color--active);
    --anchor-icon-color: var(--anchor-icon-color--active);
    box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--active);
  }
  :not(.dnb-anchor--no-style).dnb-anchor:active, .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  :not(.dnb-anchor--no-style).dnb-anchor {
    transition: box-shadow 200ms ease-in-out, color 200ms ease-in-out, background 200ms ease-in-out;
  }
  [data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor {
    transition: none;
  }
  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
    display: inline;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--anchor-icon-color);
  }
  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
    vertical-align: baseline;
    transform: scale(2) var(--anchor-icon-position);
    font-size: 0.5em;
    width: 2em;
    height: 1em;
    pointer-events: none;
  }
  :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
    display: none;
  }
  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child::after {
    content: var(--anchor-icon-separator);
  }
  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
    margin-right: calc(var(--anchor-icon-gutter) * 2);
  }
  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
    content: var(--anchor-icon-separator);
  }
  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
    margin-left: calc(var(--anchor-icon-gutter) * 2);
  }
  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
    font-size: 0.8888888889em;
  }
  :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--surface-dark {
    --anchor-color--default: var(--token-color-text-action-ondark);
    --anchor-color--hover: var(--token-color-text-action-ondark);
    --anchor-color--active: var(--token-color-text-action-ondark);
    --anchor-icon-color--default: var(--token-color-icon-action-ondark);
    --anchor-icon-color--hover: var(--token-color-icon-action-hover-ondark);
    --anchor-icon-color--active: var(--token-color-icon-action-ondark);
    --anchor-bg--hover: var(
      --token-color-background-action-hover-subtle-ondark
    );
    --anchor-bg--active: var(
      --token-color-background-action-pressed-subtle-ondark
    );
  }
  :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--disabled, :not(.dnb-anchor--no-style).dnb-anchor[aria-disabled=true], :not(.dnb-anchor--no-style).dnb-anchor[disabled] {
    --anchor-color: var(--token-color-text-action-disabled);
    --anchor-icon-color: var(--token-color-icon-action-disabled);
  }
}

.dnb-anchor--hover {
  --anchor-color: var(--anchor-color--hover);
  --anchor-icon-color: var(--anchor-icon-color--hover);
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
}
.dnb-anchor--hover, .dnb-section .dnb-anchor--hover.dnb-anchor {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.dnb-anchor--active {
  --anchor-color: var(--anchor-color--active);
  --anchor-icon-color: var(--anchor-icon-color--active);
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--active);
}
.dnb-anchor--active, .dnb-section .dnb-anchor--active.dnb-anchor {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.dnb-anchor--focus {
  --anchor-color: var(--token-color-text-action-focus);
  --anchor-icon-color: var(--token-color-icon-action-focus);
  --focus-ring-width: 0.25rem;
  transition: none;
}
.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.dnb-anchor--focus {
  outline: none;
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color), inset 100vw 100vw 0 0 var(--token-color-background-action-focus-subtle), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--token-color-background-action-focus-subtle), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--token-color-background-action-focus-subtle);
  border-color: transparent;
}

.dnb-anchor--no-underline, .dnb-section .dnb-anchor--no-underline.dnb-anchor {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
  border-radius: 0;
}

.dnb-anchor--no-animation {
  transition: none;
}

a.dnb-button {
  transition: none;
}

.dnb-skeleton > .dnb-anchor,
.dnb-anchor.dnb-skeleton {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.dnb-skeleton > .dnb-anchor .dnb-icon,
.dnb-anchor.dnb-skeleton .dnb-icon {
  filter: grayscale(100%) opacity(0.3);
}