:root {
  /* --------------------------------------------------BUTTON--------------------------------------------------------- */

  /** BUTTON ELEVATED **/
  --md-elevated-button-container-height: var(
    --bobby-component-button-filled-default-large-container-shape
  );
  --md-elevated-button-container-shape: var(
    --bobby-component-button-filled-default-large-container-shape
  );
  --md-elevated-button-leading-space: var(
    --bobby-component-button-filled-default-large-horizontal-padding
  );
  --md-elevated-button-trailing-space: var(
    --bobby-component-button-filled-default-large-horizontal-padding
  );
  --md-elevated-button-label-text-font: var(
    --bobby-component-button-filled-default-large-label-text-typography-font-family
  );
  --md-elevated-button-label-text-line-hieght: var(
    --bobby-component-button-filled-default-large-label-text-typography-line-height
  );
  --md-elevated-button-label-text-size: var(
    --bobby-component-button-filled-default-large-label-text-typography-font-size
  );
  --md-elevated-button-label-text-weight: var(
    --bobby-component-button-filled-default-large-label-text-typography-font-weight
  );
  /* resting */
  --md-elevated-button-container-color: var(
    --bobby-component-button-filled-default-large-container-color
  );
  --md-elevated-button-label-text-color: var(
    --bobby-component-button-filled-default-large-foreground-color
  );
  --md-elevated-button-icon-color: var(
    --bobby-component-button-filled-default-large-container-color
  );
  /* focus */
  --md-elevated-button-focus-label-text-color: var(
    --bobby-component-button-filled-default-large-focus-foreground-color
  );
  --md-elevated-button-focus-icon-color: var(
    --bobby-component-button-filled-default-large-focus-foreground-color
  );
  /* hover */
  --md-elevated-button-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-elevated-button-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );
  --md-elevated-button-hover-label-text-color: var(
    --bobby-component-button-filled-default-large-hover-foreground-color
  );
  --md-elevated-button-hover-icon-color: var(
    --bobby-component-button-filled-default-large-hover-foreground-color
  );
  /* pressed */
  --md-elevated-button-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-elevated-button-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );
  --md-elevated-button-pressed-label-text-color: var(
    --bobby-component-button-filled-default-large-pressed-foreground-color
  );
  --md-elevated-button-pressed-icon-color: var(
    --bobby-component-button-filled-default-large-pressed-foreground-color
  );
  /* disabled */
  --md-elevated-button-disabled-container-color: var(
    --bobby-component-button-filled-default-large-disabled-container-color
  );
  --md-elevated-button-disabled-label-text-color: var(
    --bobby-component-button-contained-default-large-foreground-color-disabled
  );
  --md-elevated-button-disabled-icon-color: var(
    --bobby-component-button-contained-default-large-foreground-color-disabled
  );

  /** BUTTON - FILLED **/
  --md-filled-button-container-height: var(
    --bobby-component-button-filled-default-large-container-height
  );
  --md-filled-button-container-shape: var(
    --bobby-component-button-filled-default-large-container-shape
  );
  --md-filled-button-label-text-font: var(
    --bobby-component-button-filled-default-large-label-text-typography-font-family
  );
  --md-filled-button-label-text-line-height: var(
    --bobby-component-button-filled-default-large-label-text-typography-line-height
  );
  --md-filled-button-label-text-size: var(
    --bobby-component-button-filled-default-large-label-text-typography-font-size
  );
  --md-filled-button-label-text-weight: var(
    --bobby-component-button-filled-default-large-label-text-typography-font-weight
  );
  --md-filled-button-leading-space: var(
    --bobby-component-button-filled-default-large-horizontal-padding
  );
  --md-filled-button-trailing-space: var(
    --bobby-component-button-filled-default-large-horizontal-padding
  );
  /* resting */
  --md-filled-button-container-color: var(
    --bobby-component-button-filled-default-large-container-color
  );
  --md-filled-button-label-text-color: var(
    --bobby-component-button-filled-default-large-foreground-color
  );
  --md-filled-button-icon-color: var(
    --bobby-component-button-filled-default-large-foreground-color
  );
  /* hover */
  --md-filled-button-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-filled-button-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );
  --md-filled-button-hover-container-elevation: none;
  --md-filled-button-hover-label-text-color: var(
    --bobby-component-button-filled-default-large-hover-foreground-color
  );
  --md-filled-button-hover-icon-color: var(
    --bobby-component-button-filled-default-large-hover-foreground-color
  );
  /* pressed */
  --md-filled-button-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-filled-button-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );
  --md-filled-button-pressed-label-text-color: var(
    --bobby-component-button-filled-default-large-pressed-foreground-color
  );
  --md-filled-button-pressed-icon-color: var(
    --bobby-component-button-filled-default-large-pressed-foreground-color
  );
  /* disabled */
  --md-filled-button-disabled-container-color: var(
    --bobby-component-button-filled-default-large-disabled-container-color
  );
  --md-filled-button-disabled-label-text-color: var(
    --bobby-component-button-filled-default-large-disabled-foreground-color
  );
  --md-filled-button-disabled-icon-color: var(
    --bobby-component-button-filled-default-large-disabled-foreground-color
  );

  /** BUTTON OUTLINED **/
  --md-outlined-button-container-height: var(
    --bobby-component-button-outlined-default-large-container-height
  );
  --md-outlined-button-container-shape: var(
    --bobby-component-button-outlined-default-large-container-shape
  );
  --md-outlined-button-label-text-font: var(
    --bobby-component-button-outlined-default-large-label-text-typography-font-family
  );
  --md-outlined-button-label-text-line-height: var(
    --bobby-component-button-outlined-default-large-label-text-typography-line-height
  );
  --md-outlined-button-label-text-size: var(
    --bobby-component-button-outlined-default-large-label-text-typography-font-size
  );
  --md-outlined-button-label-text-weight: var(
    --bobby-component-button-outlined-default-large-label-text-typography-font-weight
  );
  --md-outlined-button-leading-space: var(
    --bobby-component-button-outlined-default-large-horizontal-padding
  );
  --md-outlined-button-trailing-space: var(
    --bobby-component-button-outlined-default-large-horizontal-padding
  );
  --md-outlined-button-outline-width: var(
    --bobby-component-button-outlined-default-large-outline-width
  );
  /* resting */
  --md-outlined-button-label-text-color: var(
    --bobby-component-button-outlined-default-large-foreground-color
  );
  --md-outlined-button-icon-color: var(
    --bobby-component-button-outlined-default-large-foreground-color
  );
  --md-outlined-button-outline-color: var(
    --bobby-component-button-outlined-default-large-outline-color
  );
  /* hover */
  --md-outlined-button-hover-label-text-color: var(
    --bobby-component-button-outlined-default-large-hover-foreground-color
  );
  --md-outlined-button-hover-icon-color: var(
    --bobby-component-button-outlined-default-large-hover-foreground-color
  );
  --md-outlined-button-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-outlined-button-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );
  /* focus */
  --md-outlined-button-hover-label-text-color: var(
    --bobby-component-button-outlined-default-large-focus-foreground-color
  );
  --md-outlined-button-hover-icon-color: var(
    --bobby-component-button-outlined-default-large-focus-foreground-color
  );
  /* pressed */
  --md-outlined-button-pressed-label-text-color: var(
    --bobby-component-button-outlined-default-large-pressed-foreground-color
  );
  --md-outlined-button-pressed-icon-color: var(
    --bobby-component-button-outlined-default-large-pressed-foreground-color
  );
  --md-outlined-button-pressed-outline-color: var(
    --bobby-component-button-outlined-default-large-pressed-outline-color
  );
  --md-outlined-button-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-outlined-button-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );
  /* disabled */
  --md-outlined-button-disabled-label-text-color: var(
    --bobby-component-button-outlined-default-large-disabled-foreground-color
  );
  --md-outlined-button-disabled-icon-color: var(
    --bobby-component-button-outlined-default-large-disabled-foreground-color
  );
  --md-outlined-button-disabled-outline-color: var(
    --bobby-component-button-outlined-default-large-disabled-outline-color
  );

  /** BUTTON TEXT **/
  --md-text-button-container-height: var(
    --bobby-component-button-text-default-large-container-height
  );
  --md-text-button-container-shape: var(
    --bobby-component-button-text-default-large-container-shape
  );
  --md-text-button-label-text-font: var(
    --bobby-component-button-text-default-large-label-text-typography-font-family
  );
  --md-text-button-label-text-line-height: var(
    --bobby-component-button-text-default-large-label-text-typography-line-height
  );
  --md-text-button-label-text-size: var(
    --bobby-component-button-text-default-large-label-text-typography-font-size
  );
  --md-text-button-label-text-weight: var(
    --bobby-component-button-text-default-large-label-text-typography-font-weight
  );
  --md-text-button-leading-space: var(
    --bobby-component-button-text-default-large-horizontal-padding
  );
  --md-text-button-trailing-space: var(
    --bobby-component-button-text-default-large-horizontal-padding
  );
  /* resting */
  --md-text-button-label-text-color: var(
    --bobby-component-button-text-default-large-foreground-color
  );
  --md-text-button-icon-color: var(
    --bobby-component-button-text-default-large-foreground-color
  );
  /* focus */
  --md-text-button-focus-label-text-color: var(
    --bobby-component-button-text-default-large-pressed-focus-color
  );
  --md-text-button-focus-icon-color: var(
    --bobby-component-button-text-default-large-pressed-focus-color
  );
  /* hover */
  --md-text-button-hover-label-text-color: var(
    --bobby-component-button-text-default-large-hover-foreground-color
  );
  --md-text-button-hover-icon-color: var(
    --bobby-component-button-text-default-large-hover-foreground-color
  );
  --md-text-button-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-text-button-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );
  /* pressed */
  --md-text-button-pressed-label-text-color: var(
    --bobby-component-button-text-default-large-pressed-foreground-color
  );
  --md-text-button-pressed-icon-color: var(
    --bobby-component-button-text-default-large-pressed-foreground-color
  );
  --md-text-button-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-text-button-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );
  /* disabled */
  --md-outlined-button-disabled-label-text-color: var(
    --bobby-component-button-text-large-disabled-container-color
  );
  --md-outlined-button-disabled-icon-color: var(
    --bobby-component-button-text-large-disabled-foreground-color
  );

  /* --------------------------------------------------FILTER--------------------------------------------------------- */

  /* FILTER */
  --md-filter-chip-container-height: var(
    --bobby-component-chip-container-height
  );
  --md-filter-chip-container-shape: var(--bobby-component-chip-container-shape);
  --md-filter-chip-leading-space: var(
    --bobby-component-chip-horizontal-padding
  );
  --md-filter-chip-trailing-space: var(
    --bobby-component-chip-horizontal-padding
  );
  --md-filter-chip-leading-icon-color: var(
    --bobby-component-chip-icon-color
  );
  --md-filter-chip-trailing-icon-color: var(
    --bobby-component-chip-icon-color
  );
  --md-filter-chip-outline-width: var(--bobby-component-chip-outline-width);
  --md-filter-chip-label-text-font: var(
    --bobby-component-chip-label-text-typography-font-family
  );
  --md-filter-chip-label-text-line-height: var(
    --bobby-component-chip-label-text-typography-line-height
  );
  --md-filter-chip-label-text-size: var(
    --bobby-component-chip-label-text-typography-font-size
  );
  --md-filter-chip-label-text-weight: var(
    --bobby-component-chip-label-text-typography-font-weight
  );
  /* resting */
  --md-filter-chip-outline-color: var(--bobby-component-chip-outline-color);
  --md-filter-chip-label-text-color: var(
    --bobby-component-chip-foreground-color
  );
  --md-filter-chip-icon-color: var(--bobby-component-chip-foreground-color);
  /* hover */
  --md-filter-chip-hover-label-text-color: var(
    --bobby-component-chip-hover-foreground-color
  );
  --md-filter-chip-hover-icon-color: var(
    --bobby-component-chip-hover-foreground-color
  );
  --md-text-button-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-filter-chip-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );
  /* focus */
  --md-filter-chip-focus-label-text-color: var(
    --bobby-component-chip-focus-foreground-color
  );
  --md-filter-chip-focus-icon-color: var(
    --bobby-component-chip-focus-foreground-color
  );
  --md-filter-chip-focus-outline-color: var(
    --bobby-component-chip-outline-color
  );
  /* pressed */
  --md-filter-chip-pressed-label-text-color: var(
    --bobby-component-chip-pressed-foreground-color
  );
  --md-filter-chip-pressed-icon-color: var(
    --bobby-component-chip-pressed-foreground-color
  );
  --md-text-button-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-filter-chip-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );
  /* disabled */
  --md-filter-chip-disabled-label-text-color: var(
    --bobby-component-chip-disabled-foreground-color
  );
  --md-filter-chip-disabled-icon-color: var(
    --bobby-component-chip-disabled-foreground-color
  );
  --md-filter-chip-disabled-outline-color: var(
    --bobby-component-chip-disabled-outline-color
  );
  /* selected */
  --md-filter-chip-selected-container-color: var(
    --bobby-component-chip-selected-container-color
  );
  --md-filter-chip-selected-label-text-color: var(
    --bobby-component-chip-selected-foreground-color
  );
  --md-filter-chip-selected-leading-icon-color: var(
    --bobby-component-chip-selected-foreground-color
  );
  --md-filer-chip-selected-outline-width: var(
    --bobby-component-chip-selected-outline-width
  );
  /* selected hover */
  --md-filter-chip-selected-hover-label-text-color: var(
    --bobby-component-chip-selected-hover-foreground-color
  );
  --md-filter-chip-selected-hover-leading-icon-color: var(
    --bobby-component-chip-selected-hover-foreground-color
  );
  /* selected focus */
  --md-filter-chip-selected-focus-label-text-color: var(
    --bobby-component-chip-selected-focus-foreground-color
  );
  --md-filter-chip-selected-focus-leading-icon-color: var(
    --bobby-component-chip-selected-focus-foreground-color
  );
  /* selected pressed */
  --md-filter-chip-selected-pressed-label-text-color: var(
    --bobby-component-chip-selected-pressed-foreground-color
  );
  --md-filter-chip-selected-pressed-leading-icon-color: var(
    --bobby-component-chip-selected-pressed-foreground-color
  );
  /* disabled pressed */
  --md-filter-chip-disabled-selected-container-color: var(
    --bobby-component-chip-selected-disabled-container-color
  );

  /* --------------------------------------------------PRIMARY TAB--------------------------------------------------------- */

  /* PRIMARY TAB */
  --md-primary-tab-container-color: var(--bobby-component-tab-container-color);
  --md-primary-tab-container-height: var(
    --bobby-component-tab-container-height
  );
  --md-primary-tab-container-shape: var(--bobby-component-tab-container-shape);
  --md-primary-tab-container-elevation: none;
  --md-primary-tab-label-text-font: var(
    --bobby-component-tab-label-text-typography-font-family
  );
  --md-primary-tab-label-text-line-height: var(
    --bobby-component-tab-label-text-typography-line-height
  );
  --md-primary-tab-label-text-size: var(
    --bobby-component-tab-label-text-typography-font-size
  );
  --md-primary-tab-label-text-weight: var(
    --bobby-component-tab-label-text-typography-font-weight
  );
  --md-primary-tab-label-text-color: var(
    --bobby-component-tab-foreground-color
  );
  --md-primary-tab-icon-color: var(--bobby-component-tab-foreground-color);

  /* focus */
  --md-primary-tab-focus-label-text-color: var(
    --bobby-component-tab-focus-foreground-color
  );
  --md-primary-tab-focus-icon-color: var(
    --bobby-component-tab-focus-foreground-color
  );

  /* hover */
  --md-primary-tab-hover-label-text-color: var(
    --bobby-component-tab-hover-foreground-color
  );
  --md-primary-tab-hover-icon-color: var(
    --bobby-component-tab-hover-foreground-color
  );
  --md-primary-tab-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-primary-tab-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );

  /* pressed */
  --md-primary-tab-pressed-label-text-color: var(
    --bobby-component-tab-pressed-foreground-color
  );
  --md-primary-tab-pressed-icon-color: var(
    --bobby-component-tab-pressed-foreground-color
  );
  --md-primary-tab-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-primary-tab-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );

  /* active */
  --md-primary-tab-active-icon-color: var(
    --bobby-component-tab-active-foreground-color
  );
  --md-primary-tab-active-indicator-color: var(
    --bobby-component-tab-active-indicator-color
  );
  --md-primary-tab-active-indicator-height: var(
    --bobby-component-tab-active-indicator-height
  );
  --md-primary-tab-active-indicator-shape: var(
    --bobby-component-tab-active-indicator-shape
  );
  --md-primary-tab-active-label-text-color: var(
    --bobby-component-tab-active-foreground-color
  );

  /* active focus */
  --md-primary-tab-active-focus-label-text-color: var(
    --bobby-component-tab-active-focus-foreground-color
  );
  --md-primary-tab-active-focus-icon-color: var(
    --bobby-component-tab-active-focus-foreground-color
  );

  /* active hover */
  --md-primary-tab-active-hover-label-text-color: var(
    --bobby-component-tab-active-hover-foreground-color
  );
  --md-primary-tab-active-hover-icon-color: var(
    --bobby-component-tab-active-hover-foreground-color
  );
  --md-primary-tab-active-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-primary-tab-active-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );

  /* active pressed */
  --md-primary-tab-active-pressed-label-text-color: var(
    --bobby-component-tab-active-pressed-foreground-color
  );
  --md-primary-tab-active-pressed-icon-color: var(
    --bobby-component-tab-active-pressed-foreground-color
  );
  --md-primary-tab-active-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-primary-tab-active-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );

  /* --------------------------------------------------SWITCH--------------------------------------------------------- */

  /* Switch */
  --md-switch-handle-color: var(--pico-component-switch-handle-color);
  --md-switch-handle-height: var(--pico-component-switch-handle-height);
  --md-switch-handle-shape: var(--pico-component-switch-handle-shape);
  --md-switch-handle-width: var(--pico-component-switch-handle-width);
  --md-switch-icon-color: var(--pico-component-switch-icon-color);
  --md-switch-icon-size: var(--pico-component-switch-icon-size);
  --md-switch-track-shape: var(--pico-component-switch-track-shape);
  --md-switch-track-color: var(--pico-component-switch-track-color);
  --md-switch-track-height: var(--pico-component-switch-track-height);
  --md-switch-track-outline-width: var(
    --pico-component-switch-track-outline-width
  );
  --md-switch-track-outline-color: var(
    --pico-component-switch-track-outline-color
  );
  --md-switch-track-width: var(--pico-component-switch-track-width);

  /* focus */
  --md-switch-focus-handle-color: var(
    --pico-component-switch-focus-handle-color
  );
  --md-switch-focus-icon-color: var(--pico-component-switch-focus-icon-color);
  --md-switch-focus-track-color: var(--pico-component-switch-focus-track-color);
  --md-switch-focus-track-outline-color: var(
    --pico-component-switch-focus-track-outline-color
  );

  /* hover */
  --md-switch-hover-handle-color: var(
    --pico-component-switch-hover-handle-color
  );
  --md-switch-hover-icon-color: var(--pico-component-switch-hover-icon-color);
  --md-switch-hover-track-color: var(--pico-component-switch-hover-track-color);
  --md-switch-hover-track-outline-color: var(
    --pico-component-switch-hover-track-outline-color
  );
  --md-switch-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-switch-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );

  /* pressed */
  --md-switch-pressed-handle-color: var(
    --pico-component-switch-pressed-handle-color
  );
  --md-switch-pressed-handle-height: var(
    --pico-component-switch-pressed-handle-height
  );
  --md-switch-pressed-handle-width: var(
    --pico-component-switch-pressed-handle-width
  );
  --md-switch-pressed-icon-color: var(
    --pico-component-switch-pressed-icon-color
  );
  --md-switch-pressed-track-color: var(
    --pico-component-switch-pressed-track-color
  );
  --md-switch-pressed-track-outline-color: var(
    --pico-component-switch-pressed-track-outline-color
  );
  --md-switch-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-switch-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );

  /* disabled */
  --md-switch-disabled-handle-color: var(
    --pico-component-switch-disabled-handle-color
  );
  --md-switch-disabled-icon-color: var(
    --pico-component-switch-disabled-icon-color
  );
  --md-switch-disabled-track-color: var(
    --pico-component-switch-disabled-track-color
  );
  --md-switch-disabled-track-outline-color: var(
    --pico-component-switch-disabled-track-outline-color
  );

  /* selected */
  --md-switch-selected-handle-color: var(
    --pico-component-switch-selected-handle-color
  );
  --md-switch-selected-handle-height: var(
    --pico-component-switch-selected-handle-height
  );
  --md-switch-selected-handle-width: var(
    --pico-component-switch-selected-handle-width
  );
  --md-switch-selected-icon-color: var(
    --pico-component-switch-selected-icon-color
  );
  --md-switch-selected-icon-size: var(
    --pico-component-switch-selected-icon-size
  );
  --md-switch-selected-track-color: var(
    --pico-component-switch-selected-track-color
  );

  /* selected focus */
  --md-switch-selected-focus-handle-color: var(
    --pico-component-switch-selected-focus-handle-color
  );
  --md-switch-selected-focus-icon-color: var(
    --pico-component-switch-selected-focus-icon-color
  );
  --md-switch-selected-focus-track-color: var(
    --pico-component-switch-selected-focus-track-color
  );

  /* selected hover */
  --md-switch-selected-hover-handle-color: var(
    --pico-component-switch-selected-hover-handle-color
  );
  --md-switch-selected-hover-icon-color: var(
    --pico-component-switch-selected-hover-icon-color
  );
  --md-switch-selected-hover-track-color: var(
    --pico-component-switch-selected-hover-track-color
  );
  --md-switch-selected-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-switch-selected-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );

  /* selected pressed */
  --md-switch-selected-pressed-handle-color: var(
    --pico-component-switch-selected-pressed-handle-color
  );
  --md-switch-selected-pressed-icon-color: var(
    --pico-component-switch-selected-pressed-icon-color
  );
  --md-switch-selected-pressed-track-color: var(
    --pico-component-switch-selected-pressed-track-color
  );
  --md-switch-selected-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-switch-selected-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );

  /* selected disabled */
  --md-switch-disabled-selected-handle-color: var(
    --pico-component-switch-selected-disabled-handle-color
  );
  --md-switch-disabled-selected-icon-color: var(
    --pico-component-switch-selected-disabled-icon-color
  );
  --md-switch-disabled-selected-track-color: var(
    --pico-component-switch-selected-disabled-track-color
  );

  /* --------------------------------------------------CHECKBOX--------------------------------------------------------- */

  /* Checkbox */
  --md-checkbox-container-shape: var(--bobby-component-checkbox-shape);
  --md-checkbox-outline-width: var(--bobby-component-checkbox-outline-width);
  --md-checkbox-container-size: var(--bobby-component-checkbox-container-size);
  --md-checkbox-outline-color: var(--bobby-component-checkbox-outline-color);

  /* disabled */
  --md-checkbox-disabled-outline-color: var(
    --bobby-component-checkbox-disabled-outline-color
  );
  --md-checkbox-disabled-outline-width: var(
    --bobby-component-checkbox-disabled-outline-width
  );

  /* focus */
  --md-checkbox-focus-outline-color: var(
    --bobby-component-checkbox-focus-outline-color
  );
  --md-checkbox-focus-outline-width: var(
    --bobby-component-checkbox-focus-outline-width
  );

  /* hover */
  --md-checkbox-hover-outline-color: var(
    --bobby-component-checkbox-hover-outline-color
  );
  --md-checkbox-hover-outline-width: var(
    --bobby-component-checkbox-hover-outline-width
  );
  --md-checkbox-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-checkbox-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );

  /* pressed */
  --md-checkbox-pressed-outline-color: var(
    --bobby-component-checkbox-pressed-outline-color
  );
  --md-checkbox-pressed-outline-width: var(
    --bobby-component-checkbox-pressed-outline-width
  );
  --md-checkbox-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-checkbox-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );

  /* selected */
  --md-checkbox-selected-container-color: var(
    --bobby-component-checkbox-selected-container-color
  );
  --md-checkbox-selected-icon-color: var(
    --bobby-component-checkbox-selected-icon-color
  );

  /* selected focus */
  --md-checkbox-selected-focus-container-color: var(
    --bobby-component-checkbox-selected-focus-container-color
  );
  --md-checkbox-selected-focus-icon-color: var(
    --bobby-component-checkbox-selected-focus-icon-color
  );

  /* selected hover */
  --md-checkbox-selected-hover-container-color: var(
    --bobby-component-checkbox-selected-hover-container-color
  );
  --md-checkbox-selected-hover-icon-color: var(
    --bobby-component-checkbox-selected-hover-icon-color
  );
  --md-checkbox-selected-hover-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-checkbox-selected-hover-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-hover
  );

  /* selected pressed */
  --md-checkbox-selected-pressed-container-color: var(
    --bobby-component-checkbox-selected-pressed-container-color
  );
  --md-checkbox-selected-pressed-icon-color: var(
    --bobby-component-checkbox-selected-pressed-icon-color
  );
  --md-checkbox-selected-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-checkbox-selected-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );
  /* selected pressed */
  --md-checkbox-selected-pressed-container-color: var(
    --bobby-component-checkbox-selected-pressed-container-color
  );
  --md-checkbox-selected-pressed-icon-color: var(
    --bobby-component-checkbox-selected-pressed-icon-color
  );
  --md-checkbox-selected-pressed-state-layer-color: var(
    --bobby-component-state-layer-color-darken
  );
  --md-checkbox-selected-pressed-state-layer-opacity: var(
    --bobby-component-state-layer-opacity-pressed
  );

  /* selected disabled */
  --md-checkbox-selected-disabled-container-color: var(
    --bobby-component-checkbox-selected-disabled-container-color
  );
  --md-checkbox-selected-disabled-icon-color: var(
    --bobby-component-checkbox-selected-disabled-icon-color
  );

  /* --------------------------------------------------FAB--------------------------------------------------------- */

  /* FAB */
  --md-fab-container-color: var(--pico-ref-color-ui-primary-95);
  --md-fab-container-shape: var(--pico-ref-shape-corner-full);
  --md-fab-icon-color: var(--pico-semantic-color-ui-primary);

  /* --------------------------------------------------TEXT FIELD--------------------------------------------------------- */

  /* Text Field */
  --md-outlined-text-field-container-shape: var(
    --bobby-component-text-field-container-shape
  );
  --md-outlined-text-field-outline-width: var(
    --bobby-component-text-field-outline-width
  );
  --md-outlined-text-field-label-text-font: var(
    --pico-component-text-field-label-text-typography-font-family
  );
  --md-outlined-text-field-label-text-line-height: var(
    --pico-component-text-field-label-text-typography-line-height
  );
  --md-outlined-text-field-label-text-size: var(
    --pico-component-text-field-label-text-typography-font-size
  );
  --md-outlined-text-field-label-text-weight: var(
    --pico-component-text-field-label-text-typography-font-weight
  );
  --md-outlined-text-field-input-text-font: var(
    --pico-component-text-field-input-text-typography-font-family
  );
  --md-outlined-text-field-input-text-line-height: var(
    --pico-component-text-field-input-text-typography-line-height
  );
  --md-outlined-text-field-input-text-size: var(
    --pico-component-text-field-input-text-typography-font-size
  );
  --md-outlined-text-field-input-text-weight: var(
    --pico-component-text-field-input-text-typography-font-weight
  );
  --md-outlined-text-field-supporting-text-font: var(
    --pico-component-text-field-supporting-text-typography-font-family
  );
  --md-outlined-text-field-supporting-text-line-height: var(
    --pico-component-text-field-supporting-text-typography-line-height
  );
  --md-outlined-text-field-supporting-text-size: var(
    --pico-component-text-field-supporting-text-typography-font-size
  );
  --md-outlined-text-field-supporting-text-weight: var(
    --pico-component-text-field-supporting-text-typography-font-weight
  );

  --md-outlined-text-field-label-text-color: var(
    --bobby-component-text-field-label-color
  );
  --md-outlined-text-field-input-text-color: var(
    --bobby-component-text-field-input-color
  );
  --md-outlined-text-field-supporting-text-color: var(
    --bobby-component-text-field-supporting-color
  );
  --md-outlined-text-field-input-text-placeholder-color: var(
    --bobby-component-text-field-input-placeholder-color
  );
  --md-outlined-text-field-outline-color: var(
    --bobby-component-text-field-outline-color
  );
  --md-outlined-text-field-top-space: var(
    --bobby-component-text-field-vertical-space
  );
  --md-outlined-text-field-bottom-space: var(
    --bobby-component-text-field-vertical-space
  );
  /* focus */
  --md-outlined-text-field-error-focus-caret-color: var(
    --bobby-component-text-field-focus-caret-color
  );
  --md-outlined-text-field-focus-input-text-color: var(
    --bobby-component-text-field-focus-input-text-color
  );
  --md-outlined-text-field-focus-label-text-color: var(
    --bobby-component-text-field-focus-label-text-color
  );
  --md-outlined-text-field-focus-leading-icon-color: var(
    --bobby-component-text-field-focus-icon-color
  );
  --md-outlined-text-field-focus-trailing-icon-color: var(
    --bobby-component-text-field-focus-icon-color
  );
  --md-outlined-text-field-focus-outline-color: var(
    --bobby-component-text-field-focus-outline-color
  );
  --md-outlined-text-field-focus-outline-width: var(
    --bobby-component-text-field-focus-outline-width
  );
  --md-outlined-text-field-focus-supporting-text-color: var(
    --bobby-component-text-field-focus-supporting-text-color
  );
  /* hover */
  --md-outlined-text-field-hover-input-text-color: var(
    --bobby-component-text-field-hover-input-text-color
  );
  --md-outlined-text-field-hover-label-text-color: var(
    --bobby-component-text-field-hover-label-text-color
  );
  --md-outlined-text-field-hover-leading-icon-color: var(
    --bobby-component-text-field-hover-icon-color
  );
  --md-outlined-text-field-hover-trailing-icon-color: var(
    --bobby-component-text-field-hover-icon-color
  );
  --md-outlined-text-field-hover-outline-color: var(
    --bobby-component-text-field-hover-outline-color
  );
  --md-outlined-text-field-hover-outline-width: var(
    --bobby-component-text-field-hover-outline-width
  );
  --md-outlined-text-field-hover-supporting-text-color: var(
    --bobby-component-text-field-hover-supporting-text-color
  );
  /* error */
  --md-outlined-text-field-error-input-text-color: var(
    --bobby-component-text-field-error-input-text-color
  );
  --md-outlined-text-field-error-label-text-color: var(
    --bobby-component-text-field-error-label-text-color
  );
  --md-outlined-text-field-error-leading-icon-color: var(
    --bobby-component-text-field-error-icon-color
  );
  --md-outlined-text-field-error-trailing-icon-color: var(
    --bobby-component-text-field-error-icon-color
  );
  --md-outlined-text-field-error-outline-color: var(
    --bobby-component-text-field-error-outline-color
  );
  --md-outlined-text-field-error-supporting-text-color: var(
    --bobby-component-text-field-error-supporting-text-color
  );
  /* error focus */
  --md-outlined-text-field-error-focus-caret-color: var(
    ---bobby-component-text-field-error-focus-caret-color
  );
  --md-outlined-text-field-error-focus-input-text-color: var(
    --bobby-component-text-field-error-focus-input-text-color
  );
  --md-outlined-text-field-error-focus-label-text-color: var(
    --bobby-component-text-field-error-focus-label-text-color
  );
  --md-outlined-text-field-error-focus-leading-icon-color: var(
    --bobby-component-text-field-error-focus-icon-color
  );
  --md-outlined-text-field-error-focus-trailing-icon-color: var(
    --bobby-component-text-field-error-focus-icon-color
  );
  --md-outlined-text-field-error-focus-outline-color: var(
    --bobby-component-text-field-error-focus-outline-color
  );
  --md-outlined-text-field-error-focus-outline-width: var(
    --bobby-component-text-field-error-focus-outline-width
  );
  --md-outlined-text-field-errpr-focus-supporting-text-color: var(
    --bobby-component-text-field-error-focus-supporting-text-color
  );
  /* error hover */
  /* disabled */

  /* --------------------------------------------------MENU--------------------------------------------------------- */

  --md-menu-container-color: var(--bobby-component-menu-container-color);
  --md-menu-container-shape: var(--bobby-component-menu-container-shape);

  --md-menu-item-container-color: var(
    --bobby-component-menu-item-container-color
  );
  --md-menu-item-label-text-color: var(--bobby-component-menu-label-text-color);

  --md-menu-item-label-text-font: var(
    --bobby-component-menu-item-label-typography-font-family
  );
  --md-menu-item-label-text-line-height: var(
    --bobby-component-menu-item-label-typography-line-height
  );
  --md-menu-item-label-text-size: var(
    --bobby-component-menu-item-label-typography-font-size
  );
  --md-menu-item-label-text-weight: var(
    --bobby-component-menu-label-typography-font-weight
  );

  --md-menu-item-bottom-space: var(
    --bobby-component-menu-item-vertical-padding
  );
  --md-menu-item-top-space: var(--bobby-component-menu-item-vertical-padding);
  --md-menu-item-leading-space: var(
    --bobby-component-menu-item-horizontal-padding
  );
  --md-menu-item-one-line-container-height: var(
    --bobby-component-menu-item-horizontal-padding
  );

  /* --------------------------------------------------CARD--------------------------------------------------------- */

  /* Card */
  --md-elevation-level: var(--pico-semantic-shape-elevation-level-low);
}

/* --------------------------------------------------EMAIL SIGNUP--------------------------------------------------------- */

.newsletter {
  display: flex;
  padding: var(--pico-ref-spacing-xl);
  box-shadow: var(--conversion-pattern-email-input-elevation);
  border-radius: var(--conversion-pattern-email-input-shape);
  width: fit-content;
  width: 700px;
  box-sizing: border-box;
  background-color: var(--pico-semantic-color-ui-surface-container-lowest);
}

.newsletter .content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.newsletter .title-large {
  font-family: var(
    --conversion-pattern-email-input-heading-typography-font-family
  );
  font-size: var(--conversion-pattern-email-input-heading-typography-font-size);
  line-height: var(
    --conversion-pattern-email-input-heading-typography-line-height
  );
  font-weight: var(
    --conversion-pattern-email-input-heading-typography-font-weight
  );
}

.signup {
  display: flex;
  margin-top: var(--pico-ref-spacing-l);
}

.newsletter md-outlined-text-field {
  width: 100%;
  --md-outlined-text-field-container-shape-end-end: var(
    --conversion-pattern-email-input-text-field-shape-right-side
  );
  --md-outlined-text-field-container-shape-start-end: var(
    --conversion-pattern-email-input-text-field-shape-right-side
  );
  --md-outlined-text-field-container-shape-start-start: var(
    --conversion-pattern-email-input-text-field-shape-left-side
  );
  --md-outlined-text-field-container-shape-end-start: var(
    --conversion-pattern-email-input-text-field-shape-left-side
  );
}

.newsletter md-filled-button {
  --md-filled-button-container-shape-start-start: var(
    --conversion-pattern-email-input-button-shape-left-side
  );
  --md-filled-button-container-shape-end-start: var(
    --conversion-pattern-email-input-button-shape-left-side
  );
  --md-filled-button-container-shape-end-end: var(
    --conversion-pattern-email-input-button-shape-right-side
  );
  --md-filled-button-container-shape-start-end: var(
    --conversion-pattern-email-input-button-shape-right-side
  );
}

/* --------------------------------------------------VOUCHER CARD--------------------------------------------------------- */

.voucher-card {
  display: flex;
  box-shadow: var(--conversion-pattern-voucher-card-elevation);
  max-width: 700px;
  overflow: hidden;
  border-radius: var(--conversion-pattern-voucher-card-shape);
}

.left-side {
  display: flex;
  flex-direction: column;
  width: 150px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.right-side {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--pico-semantic-color-ui-surface-container-lowest);
}

.voucher-card .tag-row {
  padding: var(--pico-ref-spacing-m) var(--pico-ref-spacing-m) 0
    var(--pico-ref-spacing-m);
  width: 100%;
  box-sizing: border-box;
}

.tag-row .tag {
  font-size: var(--conversion-pattern-voucher-card-tag-text-typography-font-size);
  line-height: var(--conversion-pattern-voucher-card-tag-text-typography-line-height);
  font-weight: var(--conversion-pattern-voucher-card-tag-text-typography-font-weight);
  font-family: var(--conversion-pattern-voucher-card-tag-text-typography-font-family);
  text-transform: var(--conversion-pattern-voucher-card-tag-text-typography-case);
  background-color: var(--conversion-pattern-voucher-card-tag-background-color);
  color: var(--conversion-pattern-voucher-card-tag-text-color);
  padding: var(--conversion-pattern-voucher-card-tag-vertical-padding) var(--conversion-pattern-voucher-card-tag-horizontal-padding);
}

.content-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--pico-ref-spacing-m) 0 var(--pico-ref-spacing-m)
    var(--pico-ref-spacing-m);
  box-sizing: border-box;
}

.voucher-card md-filled-button {
  margin: 0 var(--pico-ref-spacing-m);
}

.captions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(
    --conversion-pattern-voucher-card-captions-background-color
  );
  width: 100%;
  height: 100%;
  padding: var(--conversion-pattern-voucher-card-captions-padding);
}

.verified {
  display: flex;
  align-items: center;
  padding: 0 var(--pico-ref-spacing-s);
  background-color: var(
    --conversion-pattern-voucher-card-verified-background-color
  );
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  font-size: var(--conversion-pattern-voucher-card-helper-text-typography-font-size);
  line-height: var(--conversion-pattern-voucher-card-helper-text-typography-line-height);
  font-weight: var(--conversion-pattern-voucher-card-helper-text-typography-font-weight);
  font-family: var(--conversion-pattern-voucher-card-helper-text-typography-font-family);
  color: var(--conversion-pattern-voucher-card-verified-text-color);
}

.terms {
  display: flex;
  align-items: center;
  padding: 0 var(--pico-ref-spacing-s);
  border-top: var(--pico-semantic-shape-outline-width)
    var(--pico-ref-color-ui-neutral-80) dashed;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  font-size: var(--conversion-pattern-voucher-card-helper-text-typography-font-size);
  line-height: var(--conversion-pattern-voucher-card-helper-text-typography-line-height);
  font-weight: var(--conversion-pattern-voucher-card-helper-text-typography-font-weight);
  font-family: var(--conversion-pattern-voucher-card-helper-text-typography-font-family);
  color: var(--conversion-pattern-voucher-card-terms-text-color);
}

.voucher-card .title {
  font-size: var(--conversion-pattern-voucher-card-title-text-typography-font-size);
  line-height: var(--conversion-pattern-voucher-card-title-text-typography-line-height);
  font-weight: var(--conversion-pattern-voucher-card-title-text-typography-font-weight);
  font-family: var(--conversion-pattern-voucher-card-title-text-typography-font-family);
  color: var(--conversion-pattern-voucher-card-title-text-color);
}

/* .voucher-card .subtitle {
  font: var(--conversion-pattern-voucher-card-helper-text-typography);
} */

.voucher-card .caption1 {
  font-size: var(--conversion-pattern-voucher-card-caption1-text-typography-font-size);
  line-height: var(--conversion-pattern-voucher-card-caption1-text-typography-line-height);
  font-weight: var(--conversion-pattern-voucher-card-caption1-text-typography-font-weight);
  font-family: var(--conversion-pattern-voucher-card-caption1-text-typography-font-family);
  color: var(--conversion-pattern-voucher-card-caption1-text-color);
}

.caption2 {
  font-size: var(--conversion-pattern-voucher-card-caption2-text-typography-font-size);
  line-height: var(--conversion-pattern-voucher-card-caption2-text-typography-line-height);
  font-weight: var(--conversion-pattern-voucher-card-caption2-text-typography-font-weight);
  font-family: var(--conversion-pattern-voucher-card-caption2-text-typography-font-family);
  color: var(--conversion-pattern-voucher-card-caption2-text-color);
}

.voucher-card md-filled-button {
  --md-filled-button-container-color: var(
    --conversion-pattern-voucher-card-button-container-color
  );
}

/* --------------------------------------------------RLP LAYOUT--------------------------------------------------------- */

.rlp-layout {
  display: flex;
  justify-content: center;
  background-color: var(--pico-semantic-color-ui-surface);
  padding: var(--pico-ref-spacing-xl) 0;
  margin-bottom: var(--pico-ref-spacing-3xl);
}

.rlp .all-content {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 960px;
  grid-template-areas:
    "header"
    "list"
    "content"
    "footer";
  margin: 0 var(--pico-ref-spacing-m);
}

.discounts-nav {
  grid-area: header;
  margin: 16px 0;
  background-color: var(--bobby-component-menu-container-color);
  box-shadow: var(--bobby-component-menu-container-elevation);
  display: inline-flex;
  padding: var(--bobby-component-menu-item-vertical-padding)
    var(--bobby-component-menu-item-horizontal-padding);
  box-sizing: border-box;
  justify-content: space-between;
  width: 100%;
}

.rlp .list {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(270px, 300px) minmax(370px, 2fr);
  grid-template-areas: "sidebar vouchers";
}

.voucher-cards {
  grid-area: vouchers;
  display: flex;
  flex-direction: column;
}

.voucher-cards .voucher-card {
  width: 100%;
  margin-bottom: var(--pico-ref-spacing-l);
}

.voucher-cards .newsletter {
  width: 100%;
  margin-bottom: var(--pico-ref-spacing-l);
}

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  padding-right: var(--pico-ref-spacing-l);
}

.sidebar-card {
  border-radius: var(--pico-component-card-shape);
  width: 100%;
  background-color: var(--pico-semantic-color-ui-surface-container-lowest);
  box-shadow: var(--pico-semantic-shape-elevation-level-low);
  margin-bottom: var(--pico-ref-spacing-l);
  overflow: hidden;
}

.card-padding {
  padding: var(--pico-ref-spacing-l);
}

.text-widget .heading {
  font-family: var(--pico-semantic-typography-title-large-font-family);
  font-size: var(--pico-semantic-typography-title-large-font-size);
  line-height: var(--pico-semantic-typography-title-large-line-height);
  font-weight: var(--pico-semantic-typography-title-large-font-weight);
  padding-bottom: var(--pico-ref-spacing-l);
}

.text-widget .text {
  font-family: var(--pico-semantic-typography-body-medium-font-family);
  font-size: var(--pico-semantic-typography-body-medium-font-size);
  line-height: var(--pico-semantic-typography-body-medium-line-height);
  font-weight: var(--pico-semantic-typography-body-medium-font-weight);
}

.retailer-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: var(--pico-ref-spacing-l);
  color: var(--pico-semantic-color-ui-on-primary);
  background-color: var(--pico-semantic-color-ui-primary);
  font-family: var(--pico-semantic-typography-display-small-font-family);
  font-size: var(--pico-semantic-typography-display-small-font-size);
  line-height: var(--pico-semantic-typography-display-small-line-height);
  font-weight: var(--pico-semantic-typography-display-small-font-weight);
}

.retailer-header .description {
  padding: var(--pico-ref-spacing-l);
}

.retailer-header .heading {
  font-family: var(--pico-semantic-typography-title-large-font-family);
  font-size: var(--pico-semantic-typography-title-large-font-size);
  line-height: var(--pico-semantic-typography-title-large-line-height);
  font-weight: var(--pico-semantic-typography-title-large-font-weight);
  padding-bottom: var(--pico-ref-spacing-m);
}

.retailer-header .subheading {
  font-family: var(--pico-semantic-typography-body-medium-font-family);
  font-size: var(--pico-semantic-typography-body-medium-font-size);
  line-height: var(--pico-semantic-typography-body-medium-line-height);
  font-weight: var(--pico-semantic-typography-body-medium-font-weight);
}

.shop-chips .heading {
  font-family: var(--pico-semantic-typography-title-large-font-family);
  font-size: var(--pico-semantic-typography-title-large-font-size);
  line-height: var(--pico-semantic-typography-title-large-line-height);
  font-weight: var(--pico-semantic-typography-title-large-font-weight);
  padding-bottom: var(--pico-ref-spacing-m);
}

.shop-chips md-filter-chip {
  margin-bottom: var(--pico-ref-spacing-xs);
}

.filter-chips md-filter-chip {
  --md-filter-chip-outline-width: 0;
  width: 100%;
}

.accordion-section {
  grid-area: content;
  width: 100%;
}

.accordion {
  background-color: var(--pico-semantic-color-ui-surface-container-lowest);
  border-radius: var(--bobby-component-card-shape);
  margin-top: var(--pico-ref-spacing-m);
  box-shadow: var(--pico-semantic-shape-elevation-level-low);
}

.accordion .section-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.accordion .heading {
  font-family: var(
    --pico-semantic-typography-label-large-prominent-font-family
  );
  font-size: var(--pico-semantic-typography-label-large-prominent-font-size);
  line-height: var(
    --pico-semantic-typography-label-large-prominent-line-height
  );
  font-weight: var(
    --pico-semantic-typography-label-large-prominent-font-weight
  );
  padding: var(--pico-ref-spacing-m) 0;
  width: 100%;
}

.accordion .body {
  font-family: var(--pico-semantic-typography-body-medium-font-family);
  font-size: var(--pico-semantic-typography-body-medium-font-size);
  line-height: var(--pico-semantic-typography-body-medium-line-height);
  font-weight: var(--pico-semantic-typography-body-medium-font-weight);
  padding: var(--pico-ref-spacing-s) 0;
}

.accordion .section {
  border-bottom: 1px solid var(--pico-semantic-color-ui-outline);
  padding: var(--pico-ref-spacing-m) var(--pico-ref-spacing-2xl);
}

.accordion > .section:last-child {
  border-bottom: 0;
}

.accordion .hide {
  display: none;
}

.accordion-heading {
  font-family: var(--pico-semantic-typography-headline-large-font-family);
  font-size: var(--pico-semantic-typography-headline-large-font-size);
  line-height: var(--pico-semantic-typography-headline-large-line-height);
  font-weight: var(--pico-semantic-typography-headline-large-font-weight);
  padding: var(--pico-ref-spacing-s) 0;
}

/* --------------------------------------------------BEST BUYS ARTICLE--------------------------------------------------------- */

.article-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  background-color: var(--pico-semantic-color-ui-surface-container-lowest);
  padding: var(--pico-ref-spacing-xl) 0;
  margin-bottom: var(--pico-ref-spacing-3xl);
}

.article .all-content {
  max-width: 960px;
}

.article .discounts-nav {
  margin-bottom: 0;
}

.article .disclaimer {
  width: 100%;
  font-family: var(--evaluation-component-disclaimer-text-typography-font-family);
  font-size: var(--evaluation-component-disclaimer-text-typography-font-size);
  line-height: var(--evaluation-component-disclaimer-text-typography-line-height);
  font-weight: var(--evaluation-component-disclaimer-text-typography-font-weight);
  color: var(--evaluation-component-disclaimer-text-color);
  padding: var(--evaluation-component-disclaimer-vertical-padding) 0;
  text-align: center;
  border-bottom: var(--evaluation-component-disclaimer-outline-width)
    var(--evaluation-component-disclaimer-outline-color) solid;
  margin-bottom: var(--pico-ref-spacing-l);
}

.article .main-content {
  display: flex;
  flex-direction: column;
}

.breadcrumb {
  display: flex;
  flex-direction: row;
}

.breadcrumb * {
  font-family: var(--evaluation-component-breadcrumb-text-typography-font-family);
  font-size: var(--evaluation-component-breadcrumb-text-typography-font-size);
  line-height: var(--evaluation-component-breadcrumb-text-typography-line-height);
  font-weight: var(--evaluation-component-breadcrumb-text-typography-font-weight);
  color: var(--evaluation-component-breadcrumb-text-color);
  margin-bottom: var(--pico-ref-spacing-l);
}

.breadcrumb > a:after {
  content: "/";
  padding: 0 var(--evaluation-component-breadcrumb-spacing);
}

.breadcrumb a:last-of-type:after {
  content: none;
}

.article .headline {
  font-family: var(--evaluation-typography-editorial-h1-text-typography-font-family);
  font-size: var(--evaluation-typography-editorial-h1-text-typography-font-size);
  line-height: var(--evaluation-typography-editorial-h1-text-typography-line-height);
  font-weight: var(--evaluation-typography-editorial-h1-text-typography-font-weight);
  margin-bottom: var(--pico-ref-spacing-l);
  color: var(--evaluation-typography-editorial-h1-text-color);
}

.article .subtitle {
  font-family: var(--pico-semantic-typography-body-large-font-family);
  font-size: var(--pico-semantic-typography-body-large-font-size);
  line-height: var(--pico-semantic-typography-body-large-line-height);
  font-weight: var(--pico-semantic-typography-body-large-font-weight);
  color: var(--pico-semantic-color-ui-on-surface-variant);
  margin-bottom: var(--pico-ref-spacing-xl);
}

.article-info {
  display: flex;
  font-family: var(--pico-semantic-typography-body-large-font-family);
  font-size: var(--pico-semantic-typography-body-large-font-size);
  line-height: var(--pico-semantic-typography-body-large-line-height);
  font-weight: var(--pico-semantic-typography-body-large-font-weight);
  color: var(--pico-semantic-color-ui-on-surface);
}

.article-info > a {
  font-family: var(--pico-semantic-typography-body-large-font-family);
  font-size: var(--pico-semantic-typography-body-large-font-size);
  line-height: var(--pico-semantic-typography-body-large-line-height);
  font-weight: var(--pico-semantic-typography-body-large-font-weight);
  color: var(--pico-semantic-color-ui-primary);
  padding: 0 var(--pico-ref-spacing-2xs);
  text-decoration: none;
}

.article-info > a:visited {
  color: var(--pico-semantic-color-ui-primary);
}

.article-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: var(--pico-ref-spacing-s);
  align-items: center;
}

.article-info .icons {
  display: flex;
  align-items: center;
}

.article-info md-icon {
  color: var(--pico-semantic-color-ui-primary);
  margin-left: var(--pico-ref-spacing-xs);
}

.article .hero-img img {
  width: 100%;
  margin-bottom: var(--pico-ref-spacing-xl);
}

.article table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  margin-bottom: var(--pico-ref-spacing-l);
}

.article .table-header {
  color: var(--evaluation-pattern-comparison-table-header-text-color);
  background-color: var(
    --evaluation-pattern-comparison-table-header-background-color
  );
  padding: var(--evaluation-pattern-comparison-table-cell-padding);
  font-family: var(
    --evaluation-pattern-comparison-table-header-text-typography-font-family
  );
  font-size: var(--evaluation-pattern-comparison-table-header-text-typography-font-size);
  line-height: var(
    --evaluation-pattern-comparison-table-header-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-header-text-typography-font-weight
  );
  border: var(--evaluation-pattern-comparison-table-cell-outline-width)
    var(--evaluation-pattern-comparison-table-cell-outline-color) solid;
}

.article .table-cell {
  min-width: var(--evaluation-pattern-comparison-table-cell-min-width);
  padding: var(--evaluation-pattern-comparison-table-cell-padding);
  border: var(--evaluation-pattern-comparison-table-cell-outline-width)
    var(--evaluation-pattern-comparison-table-cell-outline-color) solid;
  color: var(--evaluation-pattern-comparison-table-cell-plain-text-color);
  vertical-align: top;
}

.table-cell img {
  width: 68px;
}

.table-cell .preview {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.table-cell .preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.table-cell .preview .icon {
  color: var(
    --evaluation-pattern-comparison-table-product-description-icon-color
  );
}

.table-cell .info {
  font-family: var(
    --evaluation-pattern-comparison-table-price-info-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-price-info-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-price-info-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-price-info-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-price-info-text-color);
  padding-right: var(--pico-ref-spacing-xs);
}

.table-cell .saving {
  font-family: var(
    --evaluation-pattern-comparison-table-price-saving-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-price-saving-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-price-saving-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-price-saving-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-price-saving-text-color);
}

.table-cell .price-new {
  font-family: var(
    --evaluation-pattern-comparison-table-price-new-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-price-new-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-price-new-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-price-new-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-price-new-text-color);
  padding-right: var(--pico-ref-spacing-s);
}

.table-cell .price-old {
  font-family: var(
    --evaluation-pattern-comparison-table-price-old-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-price-old-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-price-old-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-price-old-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-price-old-text-color);
  text-decoration: var(
    --evaluation-pattern-comparison-table-price-old-text-typography-font-style
  );
}

.article .row-title {
  font-family: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-row-title-text-color);
  vertical-align: middle;
}

.table-cell md-outlined-button,
.table-cell md-filled-button {
  width: 100%;
  margin-bottom: var(--pico-ref-spacing-xs);
}

.article .table-subheader {
  font-family: var(
    --evaluation-pattern-comparison-table-subheader-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-subheader-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-subheader-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-subheader-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-subheader-text-color);
  background-color: var(
    --evaluation-pattern-comparison-table-subheader-background-color
  );
  padding: var(--evaluation-pattern-comparison-table-cell-padding);
  border: var(--evaluation-pattern-comparison-table-cell-outline-width)
    var(--evaluation-pattern-comparison-table-cell-outline-color) solid;
}

.article .table-cell .text {
  font-family: var(
    --evaluation-pattern-comparison-table-cell-plain-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-cell-plain-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-cell-plain-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-cell-plain-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-cell-plain-text-color);
}

.article .table-cell .row-title {
  font-family: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-font-family
  );
  font-size: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-font-size
  );
  line-height: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-line-height
  );
  font-weight: var(
    --evaluation-pattern-comparison-table-row-title-text-typography-font-weight
  );
  color: var(--evaluation-pattern-comparison-table-row-title-text-color);
}

.article article p {
  width: 70%;
  font-family: var(--evaluation-typography-editorial-body-text-typography-font-family);
  font-size: var(--evaluation-typography-editorial-body-text-typography-font-size);
  line-height: var(--evaluation-typography-editorial-body-text-typography-line-height);
  font-weight: var(--evaluation-typography-editorial-body-text-typography-font-weight);
  color: var(--evaluation-typography-editorial-body-text-color);
  margin-bottom: var(--pico-ref-spacing-xl);
}

/* --------------------------------------------------MODAL CARD--------------------------------------------------------- */

.modal-card {
  box-shadow: var(--pico-component-card-elevation);
  border-radius: var(--conversion-pattern-voucher-card-shape);
  max-width: 375px;
}

.modal-header {
  display: flex;
  flex-direction: row;
  padding: var(--pico-ref-spacing-m);
  justify-content: space-between;
  width: 100%;
  height: fit-content;
  align-items: center;
}

.modal-header-text {
  font: var(--pico-semantic-typography-title-medium);
}

.modal-body {
  height: 300px;
  width: 100%;
  background-color: var(--pico-semantic-color-ui-primary-container);
  text-align: center;
}

.modal-body-description {
  padding: var(--pico-ref-spacing-m) var(--pico-ref-spacing-l);
}

.modal-body-heading {
  font: var(--pico-semantic-typography-title-large);
  margin-bottom: var(--pico-ref-spacing-m);
}

.modal-body-text {
  font: var(--pico-semantic-typography-body-large);
}

.modal-footer {
  display: flex;
  padding: var(--pico-ref-spacing-l);
  width: 100%;
  flex-wrap: wrap;
}

.modal-footer md-filled-button,
.modal-footer md-outlined-button {
  width: 100%;
}

.modal-footer md-filled-button:first-of-type {
  margin-bottom: var(--pico-ref-spacing-m);
}

/* -------------------------------------------------------REWARDS HEADER---------------------------------------------------- */

.rewards-header {
  width: 1440px;
  box-shadow: var(--pico-component-card-elevation);
}

.rewards-header-top {
  display: flex;
  background-color: var(--pico-semantic-color-ui-primary);
  padding: var(--pico-ref-spacing-s) 166px;
  height: 70px;
  justify-content: space-between;
}

.rewards-header-nav {
  display: flex;
  background-color: white;
  padding: 4px 24px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}

.shoop-logo {
  padding-right: var(--pico-ref-spacing-3xl);
  color: var(--pico-semantic-color-ui-on-primary);
  font-weight: bold;
}

.shoop-profile {
  display: flex;
  align-items: center;
  margin-left: var(--pico-ref-spacing-xl);
}

.rewards-header md-icon {
  color: var(--pico-semantic-color-ui-on-primary);
}

.rewards-header md-outlined-text-field {
  width: 554px;
  display: flex;
  justify-content: space-between;
}

.shoop-profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pico-ref-shape-corner-full);
  border: var(--pico-ref-shape-outline-width-thick)
    var(--pico-semantic-color-ui-on-primary) solid;
  background-color: var(--pico-semantic-color-ui-primary-container);
  font: var(--pico-semantic-typography-title-medium);
  width: 36px;
  height: 36px;
  color: var(--pico-semantic-color-ui-on-primary);
}

.shoop-kontostand {
  color: var(--pico-semantic-color-ui-on-primary);
  margin-right: var(--pico-ref-spacing-xl);
  font: var(--pico-semantic-typography-body-medium);
}

.shoop-kontostand-info {
  font: var(--pico-semantic-typography-body-large);
  padding-top: var(--pico-ref-spacing-2xs);
}

.shoop-kontostand-info span:last-child {
  opacity: var(--pico-ref-color-opacity-80);
}

/* -------------------------------------------------------REWARDS CARD---------------------------------------------------- */

.rewards-card {
  width: 375px;
  box-shadow: var(--pico-component-card-elevation);
  border: var(--pico-semantic-color-ui-outline)
    var(--pico-semantic-shape-outline-width) solid;
  border-radius: var(--pico-component-card-shape);
  overflow: hidden;
}

.rewards-card .photo {
  height: 180px;
  background-color: var(--pico-semantic-color-ui-primary-container);
}

.rewards-card .text {
  padding: var(--pico-ref-spacing-m);
}

.footer {
  padding: var(--pico-ref-spacing-m);
}

.rewards-card .title {
  font-size: var(--pico-semantic-typography-title-large-font-size);
  line-height: var(--pico-semantic-typography-title-large-line-height);
  font-weight: var(--pico-semantic-typography-title-large-font-weight);
  font-family: var(--pico-semantic-typography-title-large-font-family);
  padding-bottom: var(--pico-ref-spacing-xs);
}

.rewards-card .description {
  font-size: var(--pico-semantic-typography-body-medium-font-size);
  line-height: var(--pico-semantic-typography-body-medium-line-height);
  font-weight: var(--pico-semantic-typography-body-medium-font-weight);
  font-family: var(--pico-semantic-typography-body-medium-font-family);
  padding-top: var(--pico-ref-spacing-xs);
}

hr {
  margin: 0 var(--pico-ref-spacing-m);
  border-top: var(--pico-semantic-shape-outline-width)
    var(--pico-semantic-color-ui-outline) solid;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

.rewards-card .amount {
  font-family: var(--pico-semantic-typography-title-medium-font-family);
  line-height: var(--pico-semantic-typography-title-medium-line-height);
  font-size: var(--pico-semantic-typography-title-medium-font-size);
  font-weight: var(--pico-semantic-typography-title-medium-font-weight);
  padding-bottom: var(--pico-ref-spacing-m);
}

.rewards-card .filters {
  padding-bottom: var(--pico-ref-spacing-m);
}

.rewards-card md-filter-chip {
  --md-filter-chip-label-text-font: var(
    --pico-semantic-typography-body-medium-font-family
  );
  --md-filter-chip-label-text-line-height: var(
    --pico-semantic-typography-body-medium-line-height
  );
  --md-filter-chip-label-text-size: var(
    --pico-semantic-typography-body-medium-font-size
  );
  --md-filter-chip-label-text-weight: var(
    --pico-semantic-typography-body-medium-font-weight
  );
  --md-filter-chip-selected-container-color: var(
    --pico-ref-color-ui-primary-95
  );
  --md-filter-chip-selected-label-text-color: var(
    --pico-semantic-color-ui-primary
  );
  --md-filter-chip-selected-leading-icon-color: var(
    --pico-semantic-color-ui-primary
  );
  --md-filer-chip-selected-outline-width: var(
    --pico-semantic-shape-outline-width
  );
}

.rewards-card md-filled-icon-button {
  height: 24px;
  width: 24px;
  --md-filled-icon-button-container-color: #fdbe12;
  --md-filled-icon-button-container-shape: var(--pico-ref-shape-corner-m);
}

.rewards-card md-icon {
  --md-icon-size: 16px;
}