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

DNB Eufemia Design System UI Library

@charset "UTF-8";
/*
 * Anchor mixins
 *
 */
/*
 * Utilities
 */
/*
 * Anchor theme
 *
 */
:where(:not(.dnb-anchor--no-style)).dnb-anchor {
  --anchor-underline-thickness: 0.125rem;
  --anchor-background: transparent;
  --anchor-color--contrast: var(--sb-color-text);
  --anchor-background-gutter-left: 0.25rem;
  --anchor-background-gutter-right: 0.25rem;
  --anchor-icon-position: translateY(-0.125em);
  font-weight: var(--font-weight-medium);
  color: var(--sb-color-gray-dark-3);
  padding: 0.15625em 0;
  border-radius: 0.5em;
  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
  font-size: 1em;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
  --anchor-background: var(--sb-color-green-dark);
  color: var(--sb-color-text);
  transition: none;
  border-radius: 0.5em;
}
: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-background: var(--sb-color-green-dark);
    color: var(--sb-color-text);
    transition: none;
    border-radius: 0.5em;
  }
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
  --anchor-background: var(--sb-color-green);
  color: var(--sb-color-text);
  transition: none;
  border-radius: 0.5em;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
  color: var(--sb-color-blue-dark);
  background-color: var(--sb-color-blue-light-3);
  border-radius: 0.25em;
}
:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor {
  --anchor-icon-gutter: 0.125em;
  --anchor-icon-separator: " ";
}
:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
  text-decoration-color: var(--sb-color-green-dark);
}
:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
  --anchor-background-gutter-right: 0rem;
}
:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
  content: var(--anchor-icon-separator);
}
:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
  --anchor-background-gutter-left: 0rem;
}
:where(:not(.dnb-anchor--no-style)):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
  content: var(--anchor-icon-separator);
}
:where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline) {
  /* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor {
    --anchor-icon-gutter: 0.125em;
    --anchor-icon-separator: " ";
  }
  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left, :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right {
    text-decoration-color: var(--sb-color-green-dark);
  }
  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
    --anchor-background-gutter-right: 0rem;
  }
  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
    content: var(--anchor-icon-separator);
  }
  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
    --anchor-background-gutter-left: 0rem;
  }
  :where(:not(.dnb-anchor--no-style)):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
    content: var(--anchor-icon-separator);
  }
}

: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.125rem;
    --anchor-background: transparent;
    --anchor-color--contrast: var(--sb-color-text);
    --anchor-background-gutter-left: 0.25rem;
    --anchor-background-gutter-right: 0.25rem;
    --anchor-icon-position: translateY(-0.125em);
    font-weight: var(--font-weight-medium);
    color: var(--sb-color-gray-dark-3);
    padding: 0.15625em 0;
    border-radius: 0.5em;
    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background);
  }
  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
    font-size: 1em;
  }
  :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
    --anchor-background: var(--sb-color-green-dark);
    color: var(--sb-color-text);
    transition: none;
    border-radius: 0.5em;
  }
  :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-background: var(--sb-color-green-dark);
      color: var(--sb-color-text);
      transition: none;
      border-radius: 0.5em;
    }
  }
  :not(.dnb-anchor--no-style).dnb-anchor:active {
    --anchor-background: var(--sb-color-green);
    color: var(--sb-color-text);
    transition: none;
    border-radius: 0.5em;
  }
  :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
    color: var(--sb-color-blue-dark);
    background-color: var(--sb-color-blue-light-3);
    border-radius: 0.25em;
  }
  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor {
    --anchor-icon-gutter: 0.125em;
    --anchor-icon-separator: " ";
  }
  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right {
    text-decoration-color: var(--sb-color-green-dark);
  }
  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
    --anchor-background-gutter-right: 0rem;
  }
  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
    content: var(--anchor-icon-separator);
  }
  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
    --anchor-background-gutter-left: 0rem;
  }
  :not(.dnb-anchor--no-style):where(:not(.dnb-anchor--inline)).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
    content: var(--anchor-icon-separator);
  }
  :not(.dnb-anchor--no-style):not(.dnb-anchor--inline) {
    /* stylelint-disable-next-line scss/operator-no-unspaced */
  }
  @supports not (selector(*:where(*))) {
    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor {
      --anchor-icon-gutter: 0.125em;
      --anchor-icon-separator: " ";
    }
    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left, :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right {
      text-decoration-color: var(--sb-color-green-dark);
    }
    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right) {
      --anchor-background-gutter-right: 0rem;
    }
    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-left:not(.dnb-anchor--icon-right)::after {
      content: var(--anchor-icon-separator);
    }
    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left) {
      --anchor-background-gutter-left: 0rem;
    }
    :not(.dnb-anchor--no-style):not(.dnb-anchor--inline).dnb-anchor--icon-right:not(.dnb-anchor--icon-left)::before {
      content: var(--anchor-icon-separator);
    }
  }
}

.dnb-anchor--hover {
  --anchor-background: var(--sb-color-green-dark);
  color: var(--sb-color-text);
  transition: none;
  border-radius: 0.5em;
}

.dnb-anchor--active {
  --anchor-background: var(--sb-color-green);
  color: var(--sb-color-text);
  transition: none;
  border-radius: 0.5em;
}

.dnb-anchor--focus {
  background-color: transparent;
  transition: none;
  outline: none;
  --border-color: var(--focus-ring-color);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  border-radius: 0.25em;
  color: var(--sb-color-blue-dark);
  background-color: var(--sb-color-blue-light-3);
  border-radius: 0.25em;
}
.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.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--inline {
  text-decoration-color: currentcolor;
}