@ndla/ui 55.0.12-alpha.0 → 55.0.13-alpha.0

package/es/styles.css

@@ -0,0 +1,686 @@
+@layer utilities {
+  @layer compositions {
+    .textStyle_body\.large {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-medium);
+      line-height: var(--line-heights-medium);
+}
+
+    .textStyle_body\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-medium) * 1.11);
+      line-height: calc(var(--line-heights-medium) * 1.11);
+}
+
+    .textStyle_label\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
+}
+
+    .textStyle_label\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
+}
+
+    .textStyle_label\.large {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-medium);
+      line-height: var(--line-heights-medium);
+}
+
+    .textStyle_label\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-medium) * 1.11);
+      line-height: calc(var(--line-heights-medium) * 1.11);
+}
+}
+
+  .bd_1px_solid {
+    border: 1px solid;
+}
+
+  .bdr_xsmall {
+    border-radius: var(--radii-xsmall);
+}
+
+  .bx-sh_full {
+    box-shadow: var(--shadows-full);
+}
+
+  .ov_hidden {
+    overflow: hidden;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .flex_1_0_auto {
+    flex: 1 0 auto;
+}
+
+  .w_surface\.4xsmall {
+    width: var(--sizes-surface-4xsmall);
+}
+
+  .h_surface\.4xsmall {
+    height: var(--sizes-surface-4xsmall);
+}
+
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
+}
+
+  .p_xsmall {
+    padding: var(--spacing-xsmall);
+}
+
+  .w_100\% {
+    width: 100%;
+}
+
+  .bd-bs_1px_solid {
+    border-block-start: 1px solid;
+}
+
+  .py_medium {
+    padding-block: var(--spacing-medium);
+}
+
+  .px_xsmall {
+    padding-inline: var(--spacing-xsmall);
+}
+
+  .max-w_surface\.xlarge {
+    max-width: var(--sizes-surface-xlarge);
+}
+
+  .bdr-b_xsmall {
+    border-bottom-left-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
+  .bg_background\.default {
+    background: var(--colors-background-default);
+}
+
+  .py_xsmall {
+    padding-block: var(--spacing-xsmall);
+}
+
+  .px_medium {
+    padding-inline: var(--spacing-medium);
+}
+
+  .grid-area_play {
+    grid-area: play;
+}
+
+  .grid-area_forwards {
+    grid-area: forwards;
+}
+
+  .grid-area_backwards {
+    grid-area: backwards;
+}
+
+  .flex_1 {
+    flex: 1 1 0%;
+}
+
+  .grid-area_track {
+    grid-area: track;
+}
+
+  .grid-area_volume {
+    grid-area: volume;
+}
+
+  .py_auto {
+    padding-block: auto;
+}
+
+  .px_auto {
+    padding-inline: auto;
+}
+
+  .max-w_xxlarge {
+    max-width: var(--sizes-xxlarge);
+}
+
+  .max-h_xxlarge {
+    max-height: var(--sizes-xxlarge);
+}
+
+  .min-w_xxlarge {
+    min-width: var(--sizes-xxlarge);
+}
+
+  .min-h_xxlarge {
+    min-height: var(--sizes-xxlarge);
+}
+
+  .grid-area_speed {
+    grid-area: speed;
+}
+
+  .h_surface\.3xsmall {
+    height: var(--sizes-surface-3xsmall);
+}
+
+  .sr_true {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+  .c_text\.default {
+    color: var(--colors-text-default);
+}
+
+  .gap_medium {
+    gap: var(--spacing-medium);
+}
+
+  .h_100\% {
+    height: 100%;
+}
+
+  .py_xlarge {
+    padding-block: var(--spacing-xlarge);
+}
+
+  .px_xxlarge {
+    padding-inline: var(--spacing-xxlarge);
+}
+
+  .tt_uppercase {
+    text-transform: uppercase;
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
+  .bd_0 {
+    border: 0;
+}
+
+  .d_inline-block {
+    display: inline-block;
+}
+
+  .w_fit-content {
+    width: fit-content;
+}
+
+  .pos_relative {
+    position: relative;
+}
+
+  .max-w_8xl {
+    max-width: 8xl;
+}
+
+  .bd-l_4px_solid {
+    border-left: 4px solid;
+}
+
+  .bx-s_border-box {
+    box-sizing: border-box;
+}
+
+  .d_block {
+    display: block;
+}
+
+  .white-space_pre {
+    white-space: pre;
+}
+
+  .h_surface\.xsmall {
+    height: var(--sizes-surface-xsmall);
+}
+
+  .bd-b_0 {
+    border-bottom: 0;
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
+  .pos_absolute {
+    position: absolute;
+}
+
+  .z_base {
+    z-index: var(--z-index-base);
+}
+
+  .bg_background\.default\/20 {
+    --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
+    background: var(--mix-background, var(--colors-background-default));
+}
+
+  .p_0 {
+    padding: 0;
+}
+
+  .w_medium {
+    width: var(--sizes-medium);
+}
+
+  .h_medium {
+    height: var(--sizes-medium);
+}
+
+  .bd_2px_solid {
+    border: 2px solid;
+}
+
+  .c_background\.default {
+    color: var(--colors-background-default);
+}
+
+  .bdr_large {
+    border-radius: var(--radii-large);
+}
+
+  .bd-c_stroke\.default {
+    border-color: var(--colors-stroke-default);
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  .ai_flex-start {
+    align-items: flex-start;
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .as_flex-start {
+    align-self: flex-start;
+}
+
+  .jc_center {
+    justify-content: center;
+}
+
+  .bg-c_background\.default {
+    background-color: var(--colors-background-default);
+}
+
+  .bd-c_stroke\.subtle {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .trs-dur_fast {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .trs-prop_background-color\,_border-color\,_max-width {
+    --transition-prop: background-color, border-color, max-width;
+    transition-property: background-color, border-color, max-width;
+}
+
+  .trs-tmf_default {
+    --transition-easing: var(--easings-default);
+    transition-timing-function: var(--easings-default);
+}
+
+  .bd-l-c_stroke\.default {
+    border-left-color: var(--colors-stroke-default);
+}
+
+  .ov-x_auto {
+    overflow-x: auto;
+}
+
+  .ff_code {
+    font-family: var(--fonts-code);
+}
+
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
+}
+
+  .bg-c_surface\.disabled {
+    background-color: var(--colors-surface-disabled);
+}
+
+  .bd-c_surface\.brand\.1\.strong {
+    border-color: var(--colors-surface-brand-1-strong);
+}
+
+  .bdr-bl_0 {
+    border-bottom-left-radius: 0;
+}
+
+  .bdr-br_0 {
+    border-bottom-right-radius: 0;
+}
+
+  .bottom_0 {
+    bottom: 0;
+}
+
+  .right_0 {
+    right: 0;
+}
+
+  .trs-prop_transform\,_background-color\,_color {
+    --transition-prop: transform, background-color, color;
+    transition-property: transform, background-color, color;
+}
+
+  .trs-dur_normal {
+    --transition-duration: var(--durations-normal);
+    transition-duration: var(--durations-normal);
+}
+
+  .trs-tmf_ease-out {
+    --transition-easing: ease-out;
+    transition-timing-function: ease-out;
+}
+
+  .top_xsmall {
+    top: var(--spacing-xsmall);
+}
+
+  .right_xsmall {
+    right: var(--spacing-xsmall);
+}
+
+  .bd-c_background\.default {
+    border-color: var(--colors-background-default);
+}
+
+  .bg-c_surface\.action {
+    background-color: var(--colors-surface-action);
+}
+
+  .\[\&_img\]\:w_100\% img {
+    width: 100%;
+}
+
+  .\[\&_img\]\:h_100\% img {
+    height: 100%;
+}
+
+  .\[\&_img\]\:obj-f_cover img {
+    object-fit: cover;
+}
+
+  .\[\&_span_\>_\*\]\:white-space_pre-wrap span > * {
+    white-space: pre-wrap;
+}
+
+  .\[\&_span\]\:flex_1 span {
+    flex: 1 1 0%;
+}
+
+  .\[\&_\.linenumber\]\:d_inline-block .linenumber {
+    display: inline-block;
+}
+
+  .\[\&_\.linenumber\]\:py_0 .linenumber {
+    padding-block: 0;
+}
+
+  .\[\&_\.linenumber\]\:px_small .linenumber {
+    padding-inline: var(--spacing-small);
+}
+
+  .\[\&_\.linenumber\]\:bd-r_1px_solid .linenumber {
+    border-right: 1px solid;
+}
+
+  .\[\&_\.linenumber\]\:w_xxlarge .linenumber {
+    width: var(--sizes-xxlarge);
+}
+
+  .\[\&_\.linenumber\]\:ta_right .linenumber {
+    text-align: right;
+}
+
+  .\[\&_\.linenumber\]\:me_xsmall .linenumber {
+    margin-inline-end: var(--spacing-xsmall);
+}
+
+  .\[\&_\.linenumber\[data-first\]\]\:pbs_xsmall .linenumber[data-first] {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .\[\&_\.linenumber\[data-last\]\]\:pbe_xsmall .linenumber[data-last] {
+    padding-block-end: var(--spacing-xsmall);
+}
+
+  .\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.comment,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.block-comment,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.prolog,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.doctype,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.cdata {
+    color: #7d8b99;
+}
+
+  .\[\&_\.token\.punctuation\]\:c_\#5f6364 .token.punctuation {
+    color: #5f6364;
+}
+
+  .\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.property,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.tag,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.boolean,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.number,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.function-name,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.constant,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.symbol,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.deleted {
+    color: #c92c2c;
+}
+
+  .\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.selector,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.attr-name,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.string,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.char,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.function,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.builtin,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.inserted {
+    color: #2f9c0a;
+}
+
+  .\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.operator,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.entity,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.url,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.variable {
+    color: #a67f59;
+}
+
+  .\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.operator,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.entity,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.url,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.variable {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+  .\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.atrule,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.attr-value,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.keyword,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.class-name {
+    color: #1990b8;
+}
+
+  .\[\&_\.token\.regex\,_\.token\.important\]\:c_\#e90 .token.regex,.\[\&_\.token\.regex\,_\.token\.important\]\:c_\#e90 .token.important {
+    color: #e90;
+}
+
+  .\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:c_\#a67f59 .language-css .token.string,.\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:c_\#a67f59 .style .token.string {
+    color: #a67f59;
+}
+
+  .\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .language-css .token.string,.\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .style .token.string {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+  .\[\&_\.token\.entity\]\:cursor_help .token.entity {
+    cursor: help;
+}
+
+  .\[\&_\.token\.namespace\]\:op_0\.7 .token.namespace {
+    opacity: 0.7;
+}
+
+  .\[\&_\>_\*\:not\(\:where\(\:first-child\)\)\]\:mbs_xsmall > *:not(:where(:first-child)) {
+    margin-block-start: var(--spacing-xsmall);
+}
+
+  .\[\&_svg\]\:fill_text\.subtle svg {
+    fill: var(--colors-text-subtle);
+}
+
+  .\[\&_svg\]\:h_90\% svg {
+    height: 90%;
+}
+
+  .\[\&_svg\]\:w_90\% svg {
+    width: 90%;
+}
+
+  .\[\&\[data-embed-type\=\'audio\'\]\]\:h_surface\.3xsmall[data-embed-type='audio'] {
+    height: var(--sizes-surface-3xsmall);
+}
+
+  .\[\&_\>_\*\:not\(\:first-child\)\]\:mbs_3xsmall > *:not(:first-child) {
+    margin-block-start: var(--spacing-3xsmall);
+}
+
+  .\[\&_svg\]\:fill_primary svg {
+    fill: var(--colors-primary);
+}
+
+  .\[\&_\.linenumber\]\:bd-c_stroke\.subtle .linenumber {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .\[\&_\.token\.important\]\:fw_normal .token.important {
+    font-weight: var(--font-weights-normal);
+}
+
+  .\[\&_\.token\.bold\]\:fw_bold .token.bold {
+    font-weight: var(--font-weights-bold);
+}
+
+  .\[\&_\.token\.italic\]\:font-style_italic .token.italic {
+    font-style: italic;
+}
+
+  .\[\&_svg\]\:trs-prop_transform svg {
+    --transition-prop: transform;
+    transition-property: transform;
+}
+
+  .\[\&_svg\]\:trs-dur_normal svg {
+    --transition-duration: var(--durations-normal);
+    transition-duration: var(--durations-normal);
+}
+
+  .\[\&_svg\]\:trs-tmf_ease-out svg {
+    --transition-easing: ease-out;
+    transition-timing-function: ease-out;
+}
+
+  .\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:focus-visible {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:focus-visible {
+    background-color: var(--colors-surface-action-subtle-hover);
+}
+
+  .\[\&_button\[data-expanded\=\'true\'\]\]\:\[\&_svg\]\:trf_rotate\(-45deg\) button[data-expanded='true'] svg {
+    transform: rotate(-45deg);
+}
+
+  .\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h6,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h6 {
+    text-decoration: underline;
+}
+
+  .hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
+    background: var(--colors-background-default);
+}
+
+  .hover\:\[\&_button\[data-expanded\]\]\:trf_scale\(1\.2\):is(:hover, [data-hover]) button[data-expanded] {
+    transform: scale(1.2);
+}
+
+  @media screen and (min-width: 37.5625rem) {
+    .tablet\:px_medium {
+      padding-inline: var(--spacing-medium);
+}
+    .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:py_xsmall[data-has-image='true'] {
+      padding-block: var(--spacing-xsmall);
+}
+    .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:px_medium[data-has-image='true'] {
+      padding-inline: var(--spacing-medium);
+}
+}
+
+  @media screen and (min-width: 48rem) {
+    .tabletWide\:w_100\% {
+      width: 100%;
+}
+    .tabletWide\:max-w_350px {
+      max-width: 350px;
+}
+    .tabletWide\:max-w_532px {
+      max-width: 532px;
+}
+    .tabletWide\:flex-d_row {
+      flex-direction: row;
+}
+    .tabletWide\:jc_space-between {
+      justify-content: space-between;
+}
+}
+
+  @media screen and (min-width: 61.3125rem) {
+    .desktop\:w_260px {
+      width: 260px;
+}
+    .desktop\:h_260px {
+      height: 260px;
+}
+}
+
+  @media screen and (max-width: 47.9975rem) {
+    .tabletWideDown\:d_block {
+      display: block;
+}
+    .tabletWideDown\:max-h_surface\.small {
+      max-height: var(--sizes-surface-small);
+}
+    .tabletWideDown\:max-w_100\% {
+      max-width: 100%;
+}
+    .tabletWideDown\:w_100\% {
+      width: 100%;
+}
+    .tabletWideDown\:h_auto {
+      height: auto;
+}
+    .tabletWideDown\:d_grid {
+      display: grid;
+}
+    .tabletWideDown\:py_xsmall {
+      padding-block: var(--spacing-xsmall);
+}
+    .tabletWideDown\:px_xsmall {
+      padding-inline: var(--spacing-xsmall);
+}
+    .tabletWideDown\:grid-tc_1fr_repeat\(5\,_auto\)_1fr {
+      grid-template-columns: 1fr repeat(5, auto) 1fr;
+}
+    .tabletWideDown\:grid-template-areas_\"track_track_track_track_track_track_track\"_\"\._speed_backwards_play_forwards_volume_\.\" {
+      grid-template-areas: "track track track track track track track" ". speed backwards play forwards volume .";
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:cg_3xsmall {
+      column-gap: var(--spacing-3xsmall);
+}
+}
+
+  @media screen and (max-width: 19.9975rem) {
+    .mobileDown\:px_xsmall {
+      padding-inline: var(--spacing-xsmall);
+}
+}
+}

package/es/utils/relativeUrl.js

@@ -8,7 +8,7 @@
 
 import { supportedTranslationLanguages } from "../i18n/i18n";
 const ENV_REGEX = /(staging|test)\.?/;
-const LANGUAGE_REGEX = new RegExp("^\\/((?:".concat(supportedTranslationLanguages.join("|"), ")(?:$|\\/))"), "");
+const LANGUAGE_REGEX = new RegExp(`^\\/((?:${supportedTranslationLanguages.join("|")})(?:$|\\/))`, "");
 const NDLA_URL = /(.*\.)?ndla.no.*/;
 const REPLACE_WWW = /^www\./;
 export const getPossiblyRelativeUrl = (url, path) => {
@@ -26,8 +26,8 @@ export const getPossiblyRelativeUrl = (url, path) => {
     // If the path language part does not exist, remove it.
     const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
     const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
-    if (urlMatch !== null && urlMatch !== void 0 && urlMatch[1] && (urlMatch === null || urlMatch === void 0 ? void 0 : urlMatch[1]) !== (pathMatch === null || pathMatch === void 0 ? void 0 : pathMatch[1])) {
-      return urlObj.pathname.replace(urlMatch[1], (pathMatch === null || pathMatch === void 0 ? void 0 : pathMatch[1]) || "");
+    if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) {
+      return urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "");
     }
     return urlObj.pathname;
   }