@dnb/eufemia/components/anchor/style/themes/dnb-anchor-theme-ui.css

DNB Eufemia Design System UI Library

/*
 * Anchor theme
 *
 */
/*
 * Anchor mixins
 *
 */
/*
 * Utilities
 */
:where(:not(.dnb-anchor--no-style)).dnb-anchor {
  --anchor-color: var(--anchor-color--default, var(--color-sea-green));
  --anchor-color--active: var(--color-mint-green);
  --anchor-color--contrast: var(--color-emerald-green);
  --anchor-color--disabled: var(--color-sea-green-30);
  --anchor-background--hover: var(--color-mint-green-50);
  --anchor-background--active: var(--color-emerald-green);
  color: var(--anchor-color);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
  --anchor-color: var(--color-sea-green);
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
}
: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(--color-sea-green);
    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
  }
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
  --anchor-color: var(--anchor-color--active);
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
  --anchor-color: var(--color-sea-green);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
  font-size: 1em;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
  stroke-width: 1.2;
}

: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-color: var(--anchor-color--default, var(--color-sea-green));
    --anchor-color--active: var(--color-mint-green);
    --anchor-color--contrast: var(--color-emerald-green);
    --anchor-color--disabled: var(--color-sea-green-30);
    --anchor-background--hover: var(--color-mint-green-50);
    --anchor-background--active: var(--color-emerald-green);
    color: var(--anchor-color);
  }
  :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
    --anchor-color: var(--color-sea-green);
    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
  }
  :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(--color-sea-green);
      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
    }
  }
  :not(.dnb-anchor--no-style).dnb-anchor:active {
    --anchor-color: var(--anchor-color--active);
    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
  }
  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
    --anchor-color: var(--color-sea-green);
  }
  :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
    font-size: 1em;
  }
  :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
    stroke-width: 1.2;
  }
}

.dnb-anchor--hover {
  --anchor-color: var(--color-sea-green);
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
}

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

.dnb-anchor--focus {
  --anchor-color: var(--color-sea-green);
}