@jorilindell/hds-core 4.10.1

package/lib/components/cookie-consent/_icon.scss

@@ -0,0 +1,57 @@
+@mixin hds-icon(
+  $all: true,
+  $base: false,
+  // Sizes
+  $size-xs: false,
+  $size-s: false,
+  $size-m: false,
+  $size-l: false,
+  $size-xl: false
+) {
+  @if $all or $base {
+    .hds-icon {
+      --icon-size: 100%;
+
+      background-color: currentcolor;
+      display: inline-block;
+      height: var(--icon-size);
+      -webkit-mask-position: center;
+      mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      -webkit-mask-size: auto;
+      mask-size: auto;
+      width: var(--icon-size);
+    }
+  }
+
+  @if $all or $size-xs {
+    .hds-icon.hds-icon--size-xs {
+      --icon-size: var(--spacing-layout-2-xs);
+    }
+  }
+
+  @if $all or $size-s {
+    .hds-icon.hds-icon--size-s {
+      --icon-size: var(--spacing-layout-xs);
+    }
+  }
+
+  @if $all or $size-m {
+    .hds-icon.hds-icon--size-m {
+      --icon-size: var(--spacing-layout-s);
+    }
+  }
+
+  @if $all or $size-l {
+    .hds-icon.hds-icon--size-l {
+      --icon-size: var(--spacing-layout-m);
+    }
+  }
+
+  @if $all or $size-xl {
+    .hds-icon.hds-icon--size-xl {
+      --icon-size: var(--spacing-layout-l);
+    }
+  }
+}

package/lib/components/cookie-consent/_mixin-animate.scss

@@ -0,0 +1,52 @@
+///
+/// @mixin height
+///
+/// This mixin is used to animate the height of elements based on their open and closed states.
+///
+/// @param {string} $open_selector - The selector when the element is open.
+/// @param {string} $closed_selector - The selector when the element is closed.
+/// @param {string} $animator_selector - The selector for the element that is animated
+/// @param {boolean} $hide_content_from_screen_readers_on_close - Whether to hide the content from screen readers when the element is closed. Default is true.
+///
+/// @returns {void}
+///
+@mixin height(
+  $open_selector,
+  $closed_selector,
+  $animator_selector,
+  $hide_content_from_screen_readers_on_close: true
+) {
+  #{$open_selector} {
+    --internal-autoheight-open-time: var(--autoheight-open-time, 0.3s);
+
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows var(--internal-autoheight-open-time) linear;
+
+    @media (prefers-reduced-motion) {
+      --internal-autoheight-open-time: 0s;
+    }
+  }
+
+  #{$animator_selector} {
+    margin-inline: -5px; // Counter the padding below
+    overflow: hidden;
+    padding-inline: 5px; // Allow 3px + 2px focus outline
+    transform: translateY(0); // This trick fixes long accordion reserving space below footer when they're closed.
+  }
+
+  #{$closed_selector} {
+    grid-template-rows: 0fr; /* 5 */
+
+    @if $hide_content_from_screen_readers_on_close {
+      #{$animator_selector} {
+        transition: visibility
+          0s
+          linear
+          var(--internal-autoheight-open-time); // Delay visibility hidden right after animation
+
+        visibility: hidden;
+      }
+    }
+  }
+}

package/lib/components/cookie-consent/_mixin-helpers.scss

@@ -0,0 +1,26 @@
+///
+/// @mixin visually-hidden
+///
+/// Mixin for visually hiding an element.
+///
+/// This mixin applies styles to visually hide an element while still allowing it to be accessible to screen readers.
+///
+/// Usage:
+/// ```
+/// @use 'temp/mixin-helpers' as helpers;
+/// .my-element {
+///   @include helpers.visually-hidden();
+/// }
+/// ```
+@mixin visually-hidden() {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}