@fremtind/jkl-icons/icons.css

Jøkul style for icons

/**
 * Do not edit directly
 * Generated on Mon, 28 Oct 2024 14:24:14 GMT
 */
@media screen and (prefers-color-scheme: light) {
  :root {
    --jkl-icon-grade: 0;
  }
}
[data-theme=light] {
  --jkl-icon-grade: 0;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --jkl-icon-grade: -25;
  }
}
[data-theme=dark] {
  --jkl-icon-grade: -25;
}

.jkl-icon {
  --jkl-icon-fill: 0;
  font-family: "Fremtind Material Symbols", Arial, Helvetica, sans-serif;
  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-size: var(--jkl-icon-size, 1.5rem);
  font-weight: var(--jkl-icon-weight, 300);
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: font-variation-settings, transform;
}
.jkl-icon--bold {
  --jkl-icon-weight: 500;
}
.jkl-icon--filled {
  --jkl-icon-fill: 1;
}
.jkl-icon--medium {
  --jkl-icon-opsz: 24;
  --jkl-icon-size: 1.5rem;
}
.jkl-icon--small {
  --jkl-icon-opsz: 20;
  --jkl-icon-size: 1.25rem;
}
.jkl-icon--inherit {
  --jkl-icon-opsz: 20;
  --jkl-icon-size: 1.2em;
}
.jkl-icon--animated {
  display: block;
}

.jkl-icon-red-cross {
  --red-cross-circle: var(--jkl-color-background-alert-error);
  --red-cross-path: #1b1917;
  width: 1.5rem;
  height: 1.5rem;
}
.jkl-icon-red-cross path {
  fill: var(--red-cross-path);
}
.jkl-icon-red-cross circle {
  fill: var(--red-cross-circle);
}

.jkl-icon-green-check {
  --green-check-circle: var(--jkl-color-background-alert-success);
  --green-check-path: #1b1917;
  width: 1.5rem;
  height: 1.5rem;
}
.jkl-icon-green-check path {
  fill: var(--green-check-path);
}
.jkl-icon-green-check circle {
  fill: var(--green-check-circle);
}

.jkl-animated-horizontal-arrows,
.jkl-animated-vertical-arrows {
  overflow: hidden;
  width: var(--jkl-icon-size, 1.5rem);
  height: var(--jkl-icon-size, 1.5rem);
}
.jkl-animated-horizontal-arrows__slider,
.jkl-animated-vertical-arrows__slider {
  display: flex;
  transition-timing-function: ease;
  transition-duration: 250ms;
  transition-delay: calc(250ms * 0.3333333333);
  transition-property: transform;
}
.jkl-animated-horizontal-arrows__arrow,
.jkl-animated-vertical-arrows__arrow {
  flex-shrink: 0;
}

.jkl-animated-vertical-arrows__slider {
  flex-direction: column;
  height: calc(var(--jkl-icon-size, 1.5rem) * 2);
}
.jkl-animated-vertical-arrows__slider[data-show=up] {
  transform: translate3d(0, 0, 0);
}
.jkl-animated-vertical-arrows__slider[data-show=down] {
  transform: translate3d(0, -50%, 0);
}

.jkl-animated-horizontal-arrows__slider {
  flex-direction: row;
  width: calc(var(--jkl-icon-size, 1.5rem) * 2);
}
.jkl-animated-horizontal-arrows__slider[data-show=left] {
  transform: translate3d(0, 0, 0);
}
.jkl-animated-horizontal-arrows__slider[data-show=right] {
  transform: translate3d(-50%, 0, 0);
}

.jkl-icons-animated__plus {
  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
  transition-duration: 250ms;
  transition-property: transform;
  transform-origin: 50% 50%;
}
.jkl-icons-animated__plus--plus {
  transform: rotate(0);
}
.jkl-icons-animated__plus--close {
  transform: rotate(135deg);
}