@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/iconbutton/lib/_standard-icon-button-theme.scss

@@ -1,107 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-
-@use '@material/web/ripple/ripple-theme';
-@use '@material/web/sass/theme';
-@use '@material/web/tokens';
-
-@use './icon-button-theme';
-
-$_custom-property-prefix: 'icon-button';
-
-$light-theme: tokens.md-comp-icon-button-values();
-$dark-theme: tokens.md-comp-icon-button-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: icon-button-theme.flatten-disabled-colors($theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme-styles(
-    $light-theme,
-    $theme,
-    $require-all: false
-  );
-  $theme: icon-button-theme.flatten-disabled-colors($theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include icon-button-theme.icon-size(map.get($theme, icon-size));
-  @include icon-button-theme.state-layer-size(
-    $size: map.get($theme, state-layer-size)
-  );
-
-  @include icon-button-theme.icon-color(
-    (
-      default: map.get($theme, unselected-icon-color),
-      disabled: map.get($theme, disabled-icon-color),
-      focus: map.get($theme, unselected-focus-icon-color),
-      hover: map.get($theme, unselected-hover-icon-color),
-      pressed: map.get($theme, unselected-pressed-icon-color),
-    )
-  );
-
-  &.md3-icon-button--on {
-    @include icon-button-theme.icon-color(
-      (
-        default: map.get($theme, selected-icon-color),
-        disabled: map.get($theme, disabled-icon-color),
-        focus: map.get($theme, selected-focus-icon-color),
-        hover: map.get($theme, selected-hover-icon-color),
-        pressed: map.get($theme, selected-pressed-icon-color),
-      )
-    );
-  }
-
-  // States styles
-  @include ripple-theme.theme(
-    (
-      focus-state-layer-color:
-        map.get($theme, unselected-focus-state-layer-color),
-      focus-state-layer-opacity:
-        map.get($theme, unselected-focus-state-layer-opacity),
-      hover-state-layer-color:
-        map.get($theme, unselected-hover-state-layer-color),
-      hover-state-layer-opacity:
-        map.get($theme, unselected-hover-state-layer-opacity),
-      pressed-state-layer-color:
-        map.get($theme, unselected-pressed-state-layer-color),
-      pressed-state-layer-opacity:
-        map.get($theme, unselected-pressed-state-layer-opacity),
-    )
-  );
-
-  &.md3-icon-button--on {
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color:
-          map.get($theme, selected-focus-state-layer-color),
-        focus-state-layer-opacity:
-          map.get($theme, selected-focus-state-layer-opacity),
-        hover-state-layer-color:
-          map.get($theme, selected-hover-state-layer-color),
-        hover-state-layer-opacity:
-          map.get($theme, selected-hover-state-layer-opacity),
-        pressed-state-layer-color:
-          map.get($theme, selected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          map.get($theme, selected-pressed-state-layer-opacity),
-      )
-    );
-  }
-}

package/iconbutton/lib/icon-button-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `:host{display:inline-flex;outline:none;--md-focus-ring-container-outer-padding-vertical:0px;--md-focus-ring-container-outer-padding-horizontal:0px}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;fill:currentColor;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0}.md3-icon-button i,.md3-icon-button svg,.md3-icon-button img,.md3-icon-button ::slotted(*){display:block}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__icon.md3-icon-button__icon--on{display:none}.md3-icon-button--on .md3-icon-button__icon{display:none}.md3-icon-button--on .md3-icon-button__icon.md3-icon-button__icon--on{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# sourceMappingURL=icon-button-styles.css.map */
-`;
-//# sourceMappingURL=icon-button-styles.css.js.map

package/iconbutton/lib/icon-button-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-button-styles.css.js","sourceRoot":"","sources":["icon-button-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;outline:none;--md-focus-ring-container-outer-padding-vertical:0px;--md-focus-ring-container-outer-padding-horizontal:0px}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;fill:currentColor;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0}.md3-icon-button i,.md3-icon-button svg,.md3-icon-button img,.md3-icon-button ::slotted(*){display:block}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__icon.md3-icon-button__icon--on{display:none}.md3-icon-button--on .md3-icon-button__icon{display:none}.md3-icon-button--on .md3-icon-button__icon.md3-icon-button__icon--on{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# sourceMappingURL=icon-button-styles.css.map */\n`;\n "]}

package/list/lib/_list-theme.scss

@@ -1,51 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/elevation/lib/elevation-theme';
-@use '@material/web/sass/theme';
-@use '@material/web/tokens' as m3-tokens;
-@use './tokens';
-@use './divider/list-divider-theme';
-
-$light-theme: (
-  container-color:
-    map.get(tokens.md-comp-list-values(), 'list-item-container-color'),
-  list-divider-color:
-    map.get(tokens.md-comp-list-values(), 'list-divider-color'),
-  list-divider-height:
-    map.get(tokens.md-comp-list-values(), 'list-divider-height'),
-  container-surface-tint-layer-color:
-    map.get(m3-tokens.md-sys-color-values-light-dynamic(), 'surface-tint'),
-  container-elevation-overlay-opacity: 0,
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, list);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, list);
-
-  @include list-divider-theme.theme(
-    (
-      list-divider-color: map.get($theme, 'list-divider-color'),
-      list-divider-height: map.get($theme, 'list-divider-height'),
-    )
-  );
-  @include elevation-theme.theme-styles(
-    (
-      surface-tint-layer-color:
-        map.get($theme, 'container-surface-tint-layer-color'),
-      overlay-opacity: map.get($theme, 'container-elevation-overlay-opacity'),
-    )
-  );
-
-  background-color: map.get($theme, 'container-color');
-}

package/list/lib/avatar/_list-item-avatar-theme.scss

@@ -1,30 +0,0 @@
-@use 'sass:map';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/map-ext';
-@use '../listitem/list-item-theme';
-
-$light-theme: map-ext.pick(
-  list-item-theme.$light-theme,
-  (
-    list-item-leading-avatar-color,
-    list-item-leading-avatar-shape,
-    list-item-leading-avatar-size
-  )
-);
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, list);
-
-  @include _shape(map.get($theme, list-item-leading-avatar-shape));
-  @include _size(map.get($theme, list-item-leading-avatar-size));
-}
-
-@mixin _shape($shape) {
-  border-radius: $shape;
-}
-
-@mixin _size($size) {
-  height: $size;
-  width: $size;
-}

package/list/lib/divider/_list-divider-theme.scss

@@ -1,30 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/theme';
-@use '../tokens';
-
-$light-theme: (
-  list-divider-color: #000,
-  list-divider-height: 0,
-);
-
-$_custom-property-prefix: 'list-divider';
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  background-color: map.get($theme, 'list-divider-color');
-  height: map.get($theme, 'list-divider-height');
-}

package/list/lib/icon/_list-item-icon-theme.scss

@@ -1,32 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/theme';
-@use '../tokens';
-
-$light-theme: (
-  list-item-icon-color: #000,
-  list-item-icon-size: 0,
-  list-item-icon-opacity: 1,
-);
-
-$_custom-property-prefix: 'list-item-icon';
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  color: map.get($theme, list-item-icon-color);
-  font-size: map.get($theme, list-item-icon-size);
-  opacity: map.get($theme, list-item-icon-opacity);
-}

package/list/lib/image/_list-item-image-theme.scss

@@ -1,36 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/map-ext';
-@use '../tokens';
-
-$light-theme: map-ext.pick(
-  tokens.md-comp-list-values(),
-  (
-    list-item-leading-image-height,
-    list-item-leading-image-width,
-    list-item-leading-image-shape
-  )
-);
-
-$_custom-property-prefix: 'list-item-image';
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  height: map.get($theme, list-item-leading-image-height);
-  width: map.get($theme, list-item-leading-image-width);
-  border-radius: map.get($theme, list-item-leading-image-shape);
-}

package/list/lib/listitem/_list-item-theme.scss

@@ -1,337 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// TODO(b/228217731): Remove compat dependencies
-@use 'sass:map';
-@use 'sass:string';
-@use '@material/web/compat/theme/state';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-@use '../icon/list-item-icon-theme';
-@use '../image/list-item-image-theme';
-@use '../video/list-item-video-theme';
-@use '../tokens';
-
-$selectors: (
-  disabled: '.md3-list-item--disabled',
-);
-
-$light-theme: tokens.md-comp-list-values();
-
-@function _resolve-theme($theme, $resolvers) {
-  @return $theme;
-}
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, list);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, list);
-
-  @include _set-container-color(
-    (
-      default: map.get($theme, list-item-container-color),
-    )
-  );
-
-  @include _set-label-text-typography(
-    (
-      family: map.get($theme, list-item-label-text-font),
-      size: map.get($theme, list-item-label-text-size),
-      tracking: map.get($theme, list-item-label-text-tracking),
-      weight: map.get($theme, list-item-label-text-weight),
-      line-height: map.get($theme, list-item-label-text-line-height),
-    )
-  );
-
-  @include _set-label-text-ink-color(
-    (
-      default: map.get($theme, list-item-label-text-color),
-      disabled: map.get($theme, list-item-disabled-label-text-color),
-    )
-  );
-  @include _set-disabled-label-text-opacity(
-    map.get($theme, list-item-disabled-label-text-opacity)
-  );
-
-  @include _set-supporting-text-typography(
-    (
-      family: map.get($theme, list-item-supporting-text-font),
-      size: map.get($theme, list-item-supporting-text-size),
-      tracking: map.get($theme, list-item-supporting-text-tracking),
-      weight: map.get($theme, list-item-supporting-text-weight),
-      line-height: map.get($theme, list-item-supporting-text-line-height),
-    )
-  );
-
-  @include _set-supporting-text-ink-color(
-    (
-      default: map.get($theme, list-item-supporting-text-color),
-      disabled: map.get($theme, list-item-disabled-supporting-text-color),
-    )
-  );
-  @include _set-disabled-supporting-text-opacity(
-    map.get($theme, list-item-disabled-supporting-text-opacity)
-  );
-
-  @include _set-trailing-supporting-text-typography(
-    (
-      family: map.get($theme, list-item-trailing-supporting-text-font),
-      size: map.get($theme, list-item-trailing-supporting-text-size),
-      tracking: map.get($theme, list-item-trailing-supporting-text-tracking),
-      weight: map.get($theme, list-item-trailing-supporting-text-weight),
-      line-height:
-        map.get($theme, list-item-trailing-supporting-text-line-height),
-    )
-  );
-  @include _set-trailing-supporting-text-ink-color(
-    (
-      default: map.get($theme, list-item-trailing-supporting-text-color),
-    )
-  );
-
-  @include _set-one-line-container-height(
-    map.get($theme, list-item-one-line-container-height)
-  );
-  @include _set-two-line-container-height(
-    map.get($theme, list-item-two-line-container-height)
-  );
-  @include _set-three-line-container-height(
-    map.get($theme, list-item-three-line-container-height)
-  );
-  @include _set-container-shape(map.get($theme, list-item-container-shape));
-  @include list-item-image-theme.theme(
-    (
-      list-item-leading-image-height:
-        map.get($theme, list-item-leading-image-height),
-      list-item-leading-image-width:
-        map.get($theme, list-item-leading-image-width),
-      list-item-leading-image-shape:
-        map.get($theme, list-item-leading-image-shape),
-    )
-  );
-  @include list-item-video-theme.theme(
-    (
-      list-item-leading-video-height:
-        map.get($theme, list-item-leading-video-height),
-      list-item-leading-video-width:
-        map.get($theme, list-item-leading-video-width),
-      list-item-leading-video-shape:
-        map.get($theme, list-item-leading-video-shape),
-    )
-  );
-
-  .md3-list-item__start {
-    @include list-item-icon-theme.theme(
-      (
-        list-item-icon-color: map.get($theme, list-item-leading-icon-color),
-        list-item-icon-size: map.get($theme, list-item-leading-icon-size),
-      )
-    );
-  }
-
-  .md3-list-item__end {
-    @include list-item-icon-theme.theme(
-      (
-        list-item-icon-color: map.get($theme, list-item-trailing-icon-color),
-        list-item-icon-size: map.get($theme, list-item-trailing-icon-size),
-      )
-    );
-  }
-
-  &.md3-list-item--disabled .md3-list-item__start {
-    @include list-item-icon-theme.theme(
-      (
-        list-item-icon-color:
-          map.get($theme, list-item-disabled-leading-icon-color),
-        list-item-icon-opacity:
-          map.get($theme, list-item-disabled-leading-icon-opacity),
-      )
-    );
-  }
-
-  &.md3-list-item--disabled .md3-list-item__end {
-    @include list-item-icon-theme.theme(
-      (
-        list-item-icon-color:
-          map.get($theme, list-item-disabled-trailing-icon-color),
-        list-item-icon-opacity:
-          map.get($theme, list-item-disabled-trailing-icon-opacity),
-      )
-    );
-  }
-
-  &:hover .md3-list-item__start {
-    @include list-item-icon-theme.theme(
-      (
-        list-item-icon-color:
-          map.get($theme, list-item-hover-leading-icon-color),
-      )
-    );
-  }
-
-  &:hover .md3-list-item__end {
-    @include list-item-icon-theme.theme(
-      (
-        list-item-icon-color:
-          map.get($theme, list-item-hover-trailing-icon-color),
-      )
-    );
-  }
-}
-
-@mixin _set-disabled-label-text-opacity($opacity) {
-  &.md3-list-item--disabled .md3-list-item__label-text {
-    opacity: $opacity;
-  }
-}
-
-@mixin _set-disabled-supporting-text-opacity($opacity) {
-  &.md3-list-item--disabled .md3-list-item__supporting-text {
-    opacity: $opacity;
-  }
-}
-
-@mixin _set-container-shape($shape) {
-  border-radius: $shape;
-}
-
-@mixin _set-container-color($colors) {
-  @include state.enabled($selectors) {
-    @include _set-container-background-color(state.get-default-state($colors));
-  }
-}
-
-@mixin _set-label-text-typography($typography-map) {
-  $family: map.get($typography-map, family);
-  $size: map.get($typography-map, size);
-  $tracking: map.get($typography-map, tracking);
-  $weight: map.get($typography-map, weight);
-  $transform: map.get($typography-map, transform);
-  $line-height: map.get($typography-map, line-height);
-
-  .md3-list-item__label-text {
-    font-family: $family;
-    font-size: $size;
-    letter-spacing: $tracking;
-    font-weight: $weight;
-    text-transform: $transform;
-    line-height: $line-height;
-  }
-}
-
-@mixin _set-label-text-ink-color($colors) {
-  @include state.enabled($selectors) {
-    @include _set-label-text-color(state.get-default-state($colors));
-  }
-
-  &.md3-list-item--disabled {
-    @include _set-label-text-color(state.get-disabled-state($colors));
-  }
-}
-
-@mixin _set-supporting-text-typography($typography-map) {
-  $family: map.get($typography-map, family);
-  $size: map.get($typography-map, size);
-  $tracking: map.get($typography-map, tracking);
-  $weight: map.get($typography-map, weight);
-  $transform: map.get($typography-map, transform);
-  $line-height: map.get($typography-map, line-height);
-
-  .md3-list-item__supporting-text {
-    font-family: $family;
-    font-size: $size;
-    letter-spacing: $tracking;
-    font-weight: $weight;
-    text-transform: $transform;
-    line-height: $line-height;
-  }
-}
-
-@mixin _set-supporting-text-ink-color($colors) {
-  @include state.enabled($selectors) {
-    @include _set-supporting-text-color(state.get-default-state($colors));
-  }
-
-  &.md3-list-item--disabled {
-    @include _set-supporting-text-color(state.get-disabled-state($colors));
-  }
-}
-
-@mixin _set-trailing-supporting-text-typography($typography-map) {
-  $family: map.get($typography-map, family);
-  $size: map.get($typography-map, size);
-  $tracking: map.get($typography-map, tracking);
-  $weight: map.get($typography-map, weight);
-  $transform: map.get($typography-map, transform);
-  $line-height: map.get($typography-map, line-height);
-
-  .md3-list-item__trailing-supporting-text {
-    font-family: $family;
-    font-size: $size;
-    letter-spacing: $tracking;
-    font-weight: $weight;
-    text-transform: $transform;
-    line-height: $line-height;
-  }
-}
-
-@mixin _set-trailing-supporting-text-ink-color($colors) {
-  @include state.enabled($selectors) {
-    @include _set-trailing-supporting-text-color(
-      state.get-default-state($colors)
-    );
-  }
-}
-
-@mixin _set-one-line-container-height($height) {
-  &.md3-list-item--with-one-line {
-    min-height: $height;
-  }
-}
-
-@mixin _set-two-line-container-height($height) {
-  &.md3-list-item--with-two-line {
-    min-height: $height;
-  }
-}
-
-@mixin _set-three-line-container-height($height) {
-  &.md3-list-item--with-three-line {
-    min-height: $height;
-  }
-}
-
-@mixin _set-container-background-color($color) {
-  background-color: $color;
-}
-
-@mixin _set-label-text-color($color) {
-  .md3-list-item__label-text {
-    color: $color;
-  }
-}
-
-@mixin _set-supporting-text-color($color) {
-  .md3-list-item__supporting-text {
-    color: $color;
-  }
-}
-
-@mixin _set-trailing-supporting-text-color($color) {
-  .md3-list-item__trailing-supporting-text {
-    color: $color;
-  }
-}

package/list/lib/video/_list-item-video-theme.scss

@@ -1,36 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/map-ext';
-@use '../tokens';
-
-$light-theme: map-ext.pick(
-  tokens.md-comp-list-values(),
-  (
-    list-item-leading-video-height,
-    list-item-leading-video-width,
-    list-item-leading-video-shape
-  )
-);
-
-$_custom-property-prefix: 'list-item-video';
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  height: map.get($theme, list-item-leading-video-height);
-  width: map.get($theme, list-item-leading-video-width);
-  border-radius: map.get($theme, list-item-leading-video-shape);
-}