@charset "UTF-8";
/** LUMX THEME */
/* stylelint-disable custom-property-pattern, max-line-length, scss/dollar-variable-pattern, length-zero-no-unit */
/**
 * Do not edit directly
 * Generated on Mon, 13 Jan 2025 09:24:38 GMT
 */
:root {
  --lumx-button-height: 36px;
  --lumx-button-border-radius: var(--lumx-border-radius);
  --lumx-button-emphasis-high-state-default-padding-horizontal: var(--lumx-spacing-unit-big);
  --lumx-button-emphasis-high-state-default-border-width: 0;
  --lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N);
  --lumx-button-emphasis-high-state-default-theme-light-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-high-state-default-theme-light-border-color: transparent;
  --lumx-button-emphasis-high-state-default-theme-dark-background-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N);
  --lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent;
  --lumx-button-emphasis-high-state-hover-padding-horizontal: var(--lumx-spacing-unit-big);
  --lumx-button-emphasis-high-state-hover-border-width: 0;
  --lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1);
  --lumx-button-emphasis-high-state-hover-theme-light-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent;
  --lumx-button-emphasis-high-state-hover-theme-dark-background-color: var(--lumx-color-light-L1);
  --lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N);
  --lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent;
  --lumx-button-emphasis-high-state-active-padding-horizontal: var(--lumx-spacing-unit-big);
  --lumx-button-emphasis-high-state-active-border-width: 0;
  --lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2);
  --lumx-button-emphasis-high-state-active-theme-light-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-high-state-active-theme-light-border-color: transparent;
  --lumx-button-emphasis-high-state-active-theme-dark-background-color: var(--lumx-color-light-L2);
  --lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N);
  --lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent;
  --lumx-button-emphasis-medium-state-default-padding-horizontal: var(--lumx-spacing-unit-big);
  --lumx-button-emphasis-medium-state-default-border-width: 0;
  --lumx-button-emphasis-medium-state-default-theme-light-background-color: var(--lumx-color-dark-L5);
  --lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
  --lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent;
  --lumx-button-emphasis-medium-state-hover-padding-horizontal: var(--lumx-spacing-unit-big);
  --lumx-button-emphasis-medium-state-hover-border-width: 0;
  --lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4);
  --lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
  --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent;
  --lumx-button-emphasis-medium-state-active-padding-horizontal: var(--lumx-spacing-unit-big);
  --lumx-button-emphasis-medium-state-active-border-width: 0;
  --lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3);
  --lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
  --lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3);
  --lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent;
  --lumx-button-emphasis-low-state-default-padding-horizontal: var(--lumx-spacing-unit-regular);
  --lumx-button-emphasis-low-state-default-border-width: 0;
  --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
  --lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
  --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
  --lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent;
  --lumx-button-emphasis-low-state-hover-padding-horizontal: var(--lumx-spacing-unit-regular);
  --lumx-button-emphasis-low-state-hover-border-width: 0;
  --lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
  --lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
  --lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent;
  --lumx-button-emphasis-low-state-active-padding-horizontal: var(--lumx-spacing-unit-regular);
  --lumx-button-emphasis-low-state-active-border-width: 0;
  --lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
  --lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
  --lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
  --lumx-button-emphasis-selected-state-default-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
  --lumx-button-emphasis-selected-state-default-border-width: 1px;
  --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
  --lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
  --lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
  --lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
  --lumx-button-emphasis-selected-state-hover-border-width: 1px;
  --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
  --lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
  --lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-selected-state-active-padding-horizontal: 16px; /* deprecated (use base emphasis padding) */
  --lumx-button-emphasis-selected-state-active-border-width: 1px;
  --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
  --lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);
  --lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
  --lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-chip-emphasis-selected-state-default-border-width: 1px;
  --lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
  --lumx-chip-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
  --lumx-chip-emphasis-selected-state-hover-border-width: 1px;
  --lumx-chip-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-chip-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
  --lumx-chip-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-chip-emphasis-selected-state-active-border-width: 1px;
  --lumx-chip-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-chip-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
  --lumx-chip-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-chip-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-material-button-text-transform: none;
  --lumx-material-checkbox-wrapper-size: 20px;
  --lumx-material-checkbox-control-size: 16px;
  --lumx-material-chip-size-m-height: 36px;
  --lumx-material-chip-size-m-border-radius: 18px;
  --lumx-material-chip-size-m-padding-vertical: 16px;
  --lumx-material-chip-size-s-height: 24px;
  --lumx-material-chip-size-s-border-radius: 12px;
  --lumx-material-chip-size-s-padding-vertical: 12px;
  --lumx-material-input-helper-font-size: 12px;
  --lumx-material-input-helper-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-material-input-helper-line-height: 16px;
  --lumx-material-input-label-font-size: 14px;
  --lumx-material-input-label-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-material-input-label-line-height: 20px;
  --lumx-material-progress-bounce: block;
  --lumx-material-progress-rotate: none;
  --lumx-material-radio-button-wrapper-size: 20px;
  --lumx-material-radio-button-control-size: 16px;
  --lumx-material-radio-button-indicator-size: 8px;
  --lumx-material-switch-wrapper-width: 30px;
  --lumx-material-switch-wrapper-height: 20px;
  --lumx-material-switch-control-width: 30px;
  --lumx-material-switch-control-height: 16px;
  --lumx-material-switch-indicator-size: 8px;
  --lumx-material-switch-indicator-offset: 4px;
  --lumx-material-text-field-padding-top: 0;
  --lumx-material-text-field-padding-bottom: 0;
  --lumx-material-text-field-header-wrapper-margin-bottom: 8px;
  --lumx-material-text-field-header-label-font-size: 14px;
  --lumx-material-text-field-header-label-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-material-text-field-header-label-line-height: 20px;
  --lumx-material-text-field-input-content-font-size: 14px;
  --lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-material-text-field-input-content-line-height: 20px;
  --lumx-navigation-item-padding-horizontal: var(--lumx-spacing-unit-regular);
  --lumx-navigation-item-min-height: 36px;
  --lumx-navigation-item-border-radius: var(--lumx-border-radius);
  --lumx-navigation-item-emphasis-low-state-default-border-top-width: 0px;
  --lumx-navigation-item-emphasis-low-state-default-border-right-width: 0px;
  --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0px;
  --lumx-navigation-item-emphasis-low-state-default-border-left-width: 0px;
  --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent;
  --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4);
  --lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1);
  --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: var(--lumx-color-dark-N);
  --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent;
  --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: var(--lumx-color-dark-L1);
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L4);
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-L1);
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent;
  --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-L1);
  --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0px;
  --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0px;
  --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0px;
  --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0px;
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L4);
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1);
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: var(--lumx-color-dark-N);
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: var(--lumx-color-dark-L5);
  --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: var(--lumx-color-dark-L1);
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L4);
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-L1);
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
  --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-L1);
  --lumx-navigation-item-emphasis-low-state-active-border-top-width: 0px;
  --lumx-navigation-item-emphasis-low-state-active-border-right-width: 0px;
  --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0px;
  --lumx-navigation-item-emphasis-low-state-active-border-left-width: 0px;
  --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
  --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L4);
  --lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1);
  --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N);
  --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(--lumx-color-dark-L4);
  --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1);
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L4);
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-L1);
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
  --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1);
  --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent;
  --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L6);
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
  --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L5);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
  --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 1px;
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L4);
  --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2);
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
  --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
  --lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px;
  --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6);
  --lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px;
  --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5);
  --lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px;
  --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4);
  --lumx-tabs-link-height: 48px;
  --lumx-tabs-link-border-radius: 0;
  --lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;
  --lumx-tabs-link-emphasis-low-state-default-border-right-width: 0;
  --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
  --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
  --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
  --lumx-tabs-link-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4);
  --lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent;
  --lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L4);
  --lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0;
  --lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0;
  --lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px;
  --lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0;
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L4);
  --lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L4);
  --lumx-tabs-link-emphasis-low-state-active-border-top-width: 0;
  --lumx-tabs-link-emphasis-low-state-active-border-right-width: 0;
  --lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px;
  --lumx-tabs-link-emphasis-low-state-active-border-left-width: 0;
  --lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
  --lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L4);
  --lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L4);
  --lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0;
  --lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0;
  --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
  --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0;
  --lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0;
  --lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 2px;
  --lumx-tabs-link-emphasis-selected-state-hover-border-left-width: 0;
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0;
  --lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0;
  --lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 2px;
  --lumx-tabs-link-emphasis-selected-state-active-border-left-width: 0;
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-dark-L1);
  --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-L1);
  --lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
  --lumx-text-field-input-min-height: 36px;
  --lumx-text-field-input-padding-horizontal: var(--lumx-spacing-unit-medium);
  --lumx-text-field-input-border-radius: var(--lumx-border-radius);
  --lumx-text-field-state-default-input-border-top-width: 1px;
  --lumx-text-field-state-default-input-border-right-width: 1px;
  --lumx-text-field-state-default-input-border-bottom-width: 1px;
  --lumx-text-field-state-default-input-border-left-width: 1px;
  --lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N);
  --lumx-text-field-state-default-theme-light-input-background-color: var(--lumx-color-dark-L6);
  --lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L3);
  --lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N);
  --lumx-text-field-state-default-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
  --lumx-text-field-state-default-theme-dark-header-label-color: var(--lumx-color-light-N);
  --lumx-text-field-state-default-theme-dark-input-background-color: var(--lumx-color-light-L6);
  --lumx-text-field-state-default-theme-dark-input-border-color: var(--lumx-color-light-L4);
  --lumx-text-field-state-default-theme-dark-input-content-color: var(--lumx-color-light-N);
  --lumx-text-field-state-default-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
  --lumx-text-field-state-hover-input-border-top-width: 1px;
  --lumx-text-field-state-hover-input-border-right-width: 1px;
  --lumx-text-field-state-hover-input-border-bottom-width: 1px;
  --lumx-text-field-state-hover-input-border-left-width: 1px;
  --lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N);
  --lumx-text-field-state-hover-theme-light-input-background-color: var(--lumx-color-dark-L5);
  --lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L3);
  --lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N);
  --lumx-text-field-state-hover-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
  --lumx-text-field-state-hover-theme-dark-header-label-color: var(--lumx-color-light-N);
  --lumx-text-field-state-hover-theme-dark-input-background-color: var(--lumx-color-light-L5);
  --lumx-text-field-state-hover-theme-dark-input-border-color: var(--lumx-color-light-L4);
  --lumx-text-field-state-hover-theme-dark-input-content-color: var(--lumx-color-light-N);
  --lumx-text-field-state-hover-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
  --lumx-text-field-state-focus-input-border-top-width: 2px;
  --lumx-text-field-state-focus-input-border-right-width: 2px;
  --lumx-text-field-state-focus-input-border-bottom-width: 2px;
  --lumx-text-field-state-focus-input-border-left-width: 2px;
  --lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N);
  --lumx-text-field-state-focus-theme-light-input-background-color: transparent;
  --lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N);
  --lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N);
  --lumx-text-field-state-focus-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
  --lumx-text-field-state-focus-theme-dark-header-label-color: var(--lumx-color-light-N);
  --lumx-text-field-state-focus-theme-dark-input-background-color: transparent;
  --lumx-text-field-state-focus-theme-dark-input-border-color: var(--lumx-color-light-N);
  --lumx-text-field-state-focus-theme-dark-input-content-color: var(--lumx-color-light-N);
  --lumx-text-field-state-focus-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
  --lumx-border-radius: 4px;
  --lumx-color-dark-N: rgb(0 0 0 / 0.87); /* Neutral dark color */
  --lumx-color-dark-L1: rgb(0 0 0 / 0.7); /* Base dark color with 70% opacity */
  --lumx-color-dark-L2: rgb(0 0 0 / 0.6); /* Base dark color with 60% opacity */
  --lumx-color-dark-L3: rgb(0 0 0 / 0.38); /* Base dark color with 38% opacity */
  --lumx-color-dark-L4: rgb(0 0 0 / 0.2); /* Base dark color with 20% opacity */
  --lumx-color-dark-L5: rgb(0 0 0 / 0.12); /* Base dark color with 12% opacity */
  --lumx-color-dark-L6: rgb(0 0 0 / 0.03); /* Base dark color with 3% opacity */
  --lumx-color-light-N: rgb(255 255 255); /* Neutral light color */
  --lumx-color-light-L1: rgb(255 255 255 / 0.9); /* Base light color with 90% opacity */
  --lumx-color-light-L2: rgb(255 255 255 / 0.8); /* Base light color with 80% opacity */
  --lumx-color-light-L3: rgb(255 255 255 / 0.6); /* Base light color with 60% opacity */
  --lumx-color-light-L4: rgb(255 255 255 / 0.4); /* Base light color with 40% opacity */
  --lumx-color-light-L5: rgb(255 255 255 / 0.2); /* Base light color with 20% opacity */
  --lumx-color-light-L6: rgb(255 255 255 / 0.1); /* Base light color with 10% opacity */
  --lumx-color-blue-D2: rgb(21 70 193); /* Darkest blue color */
  --lumx-color-blue-D1: rgb(24 78 216); /* Dark blue color */
  --lumx-color-blue-N: rgb(36 91 231); /* Neutral blue color */
  --lumx-color-blue-L1: rgb(36 91 231 / 0.8); /* Base blue color with 80% opacity */
  --lumx-color-blue-L2: rgb(36 91 231 / 0.6); /* Base blue color with 60% opacity */
  --lumx-color-blue-L3: rgb(36 91 231 / 0.4); /* Base blue color with 40% opacity */
  --lumx-color-blue-L4: rgb(36 91 231 / 0.2); /* Base blue color with 20% opacity */
  --lumx-color-blue-L5: rgb(36 91 231 / 0.1); /* Base blue color with 10% opacity */
  --lumx-color-blue-L6: rgb(36 91 231 / 0.05); /* Base blue color with 5% opacity */
  --lumx-color-green-D2: rgb(25 109 88); /* Darkest green color */
  --lumx-color-green-D1: rgb(23 122 97); /* Dark green color */
  --lumx-color-green-N: rgb(19 134 105); /* Neutral green color */
  --lumx-color-green-L1: rgb(19 134 105 / 0.8); /* Base green color with 80% opacity */
  --lumx-color-green-L2: rgb(19 134 105 / 0.6); /* Base green color with 60% opacity */
  --lumx-color-green-L3: rgb(19 134 105 / 0.4); /* Base green color with 40% opacity */
  --lumx-color-green-L4: rgb(19 134 105 / 0.2); /* Base green color with 20% opacity */
  --lumx-color-green-L5: rgb(19 134 105 / 0.1); /* Base green color with 10% opacity */
  --lumx-color-green-L6: rgb(19 134 105 / 0.05); /* Base green color with 5% opacity */
  --lumx-color-yellow-D2: rgb(255 161 37); /* Darkest yellow color */
  --lumx-color-yellow-D1: rgb(255 179 37); /* Dark yellow color */
  --lumx-color-yellow-N: rgb(255 196 37); /* Neutral yellow color */
  --lumx-color-yellow-L1: rgb(255 196 37 / 0.9); /* Base yellow color with 80% opacity */
  --lumx-color-yellow-L2: rgb(255 196 37 / 0.8); /* Base yellow color with 70% opacity */
  --lumx-color-yellow-L3: rgb(255 196 37 / 0.6); /* Base yellow color with 60% opacity */
  --lumx-color-yellow-L4: rgb(255 196 37 / 0.48); /* Base yellow color with 40% opacity */
  --lumx-color-yellow-L5: rgb(255 196 37 / 0.24); /* Base yellow color with 20% opacity */
  --lumx-color-yellow-L6: rgb(255 196 37 / 0.12); /* Base yellow color with 10% opacity */
  --lumx-color-red-D2: rgb(188 9 48); /* Darkest red color */
  --lumx-color-red-D1: rgb(212 33 72); /* Dark red color */
  --lumx-color-red-N: rgb(223 42 75); /* Neutral red color */
  --lumx-color-red-L1: rgb(223 42 75 / 0.8); /* Base red color with 80% opacity */
  --lumx-color-red-L2: rgb(223 42 75 / 0.6); /* Base red color with 60% opacity */
  --lumx-color-red-L3: rgb(223 42 75 / 0.4); /* Base red color with 40% opacity */
  --lumx-color-red-L4: rgb(223 42 75 / 0.2); /* Base red color with 20% opacity */
  --lumx-color-red-L5: rgb(223 42 75 / 0.1); /* Base red color with 10% opacity */
  --lumx-color-red-L6: rgb(223 42 75 / 0.05); /* Base red color with 5% opacity */
  --lumx-color-grey-N: rgb(117 117 117); /* Neutral grey color */
  --lumx-color-grey-L1: rgb(117 117 117 / 0.8); /* Base grey color with 80% opacity */
  --lumx-color-grey-L2: rgb(117 117 117 / 0.6); /* Base grey color with 60% opacity */
  --lumx-color-grey-L3: rgb(117 117 117 / 0.4); /* Base grey color with 40% opacity */
  --lumx-color-grey-L4: rgb(117 117 117 / 0.2); /* Base grey color with 20% opacity */
  --lumx-color-grey-L5: rgb(117 117 117 / 0.1); /* Base grey color with 10% opacity */
  --lumx-color-grey-L6: rgb(117 117 117 / 0.05); /* Base grey color with 5% opacity */
  --lumx-color-primary-D2: rgb(21 70 193); /* Darkest blue color */
  --lumx-color-primary-D1: rgb(24 78 216); /* Dark blue color */
  --lumx-color-primary-N: rgb(36 91 231); /* Neutral blue color */
  --lumx-color-primary-L1: rgb(36 91 231 / 0.8); /* Base blue color with 80% opacity */
  --lumx-color-primary-L2: rgb(36 91 231 / 0.6); /* Base blue color with 60% opacity */
  --lumx-color-primary-L3: rgb(36 91 231 / 0.4); /* Base blue color with 40% opacity */
  --lumx-color-primary-L4: rgb(36 91 231 / 0.2); /* Base blue color with 20% opacity */
  --lumx-color-primary-L5: rgb(36 91 231 / 0.1); /* Base blue color with 10% opacity */
  --lumx-color-primary-L6: rgb(36 91 231 / 0.05); /* Base blue color with 5% opacity */
  --lumx-color-secondary-D2: rgb(25 109 88); /* Darkest green color */
  --lumx-color-secondary-D1: rgb(23 122 97); /* Dark green color */
  --lumx-color-secondary-N: rgb(19 134 105); /* Neutral green color */
  --lumx-color-secondary-L1: rgb(19 134 105 / 0.8); /* Base green color with 80% opacity */
  --lumx-color-secondary-L2: rgb(19 134 105 / 0.6); /* Base green color with 60% opacity */
  --lumx-color-secondary-L3: rgb(19 134 105 / 0.4); /* Base green color with 40% opacity */
  --lumx-color-secondary-L4: rgb(19 134 105 / 0.2); /* Base green color with 20% opacity */
  --lumx-color-secondary-L5: rgb(19 134 105 / 0.1); /* Base green color with 10% opacity */
  --lumx-color-secondary-L6: rgb(19 134 105 / 0.05); /* Base green color with 5% opacity */
  --lumx-color-accent-D2: rgb(25 109 88); /* Darkest green color */
  --lumx-color-accent-D1: rgb(23 122 97); /* Dark green color */
  --lumx-color-accent-N: rgb(19 134 105); /* Neutral green color */
  --lumx-color-accent-L1: rgb(19 134 105 / 0.8); /* Base green color with 80% opacity */
  --lumx-color-accent-L2: rgb(19 134 105 / 0.6); /* Base green color with 60% opacity */
  --lumx-color-accent-L3: rgb(19 134 105 / 0.4); /* Base green color with 40% opacity */
  --lumx-color-accent-L4: rgb(19 134 105 / 0.2); /* Base green color with 20% opacity */
  --lumx-color-accent-L5: rgb(19 134 105 / 0.1); /* Base green color with 10% opacity */
  --lumx-color-accent-L6: rgb(19 134 105 / 0.05); /* Base green color with 5% opacity */
  --lumx-color-black-N: rgb(0 0 0 / 0.87); /* Neutral dark color */
  --lumx-color-black-L1: rgb(0 0 0 / 0.7); /* Base dark color with 70% opacity */
  --lumx-color-black-L2: rgb(0 0 0 / 0.6); /* Base dark color with 60% opacity */
  --lumx-color-black-L3: rgb(0 0 0 / 0.38); /* Base dark color with 38% opacity */
  --lumx-color-black-L4: rgb(0 0 0 / 0.2); /* Base dark color with 20% opacity */
  --lumx-color-black-L5: rgb(0 0 0 / 0.12); /* Base dark color with 12% opacity */
  --lumx-color-black-L6: rgb(0 0 0 / 0.03); /* Base dark color with 3% opacity */
  --lumx-color-white-N: rgb(255 255 255); /* Neutral light color */
  --lumx-color-white-L1: rgb(255 255 255 / 0.9); /* Base light color with 90% opacity */
  --lumx-color-white-L2: rgb(255 255 255 / 0.8); /* Base light color with 80% opacity */
  --lumx-color-white-L3: rgb(255 255 255 / 0.6); /* Base light color with 60% opacity */
  --lumx-color-white-L4: rgb(255 255 255 / 0.4); /* Base light color with 40% opacity */
  --lumx-color-white-L5: rgb(255 255 255 / 0.2); /* Base light color with 20% opacity */
  --lumx-color-white-L6: rgb(255 255 255 / 0.1); /* Base light color with 10% opacity */
  --lumx-color-orange-D2: rgb(255 161 37); /* Darkest yellow color */
  --lumx-color-orange-D1: rgb(255 179 37); /* Dark yellow color */
  --lumx-color-orange-N: rgb(255 196 37); /* Neutral yellow color */
  --lumx-color-orange-L1: rgb(255 196 37 / 0.9); /* Base yellow color with 80% opacity */
  --lumx-color-orange-L2: rgb(255 196 37 / 0.8); /* Base yellow color with 70% opacity */
  --lumx-color-orange-L3: rgb(255 196 37 / 0.6); /* Base yellow color with 60% opacity */
  --lumx-color-orange-L4: rgb(255 196 37 / 0.48); /* Base yellow color with 40% opacity */
  --lumx-color-orange-L5: rgb(255 196 37 / 0.24); /* Base yellow color with 20% opacity */
  --lumx-color-orange-L6: rgb(255 196 37 / 0.12); /* Base yellow color with 10% opacity */
  --lumx-size-xxs: 14px;
  --lumx-size-xs: 20px;
  --lumx-size-s: 24px;
  --lumx-size-m: 36px;
  --lumx-size-l: 64px;
  --lumx-size-xl: 128px;
  --lumx-size-xxl: 256px;
  --lumx-spacing-unit-tiny: 4px;
  --lumx-spacing-unit-regular: 8px;
  --lumx-spacing-unit-medium: 12px;
  --lumx-spacing-unit-big: 16px;
  --lumx-spacing-unit-huge: 24px;
  --lumx-typography-font-family: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif";
  --lumx-typography-font-weight-regular: 400;
  --lumx-typography-font-weight-medium: 500;
  --lumx-typography-font-weight-bold: 700;
  --lumx-typography-font-weight-light: 300;
  --lumx-typography-interface-display1-font-size: 34px;
  --lumx-typography-interface-display1-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-interface-display1-line-height: 40px;
  --lumx-typography-interface-headline-font-size: 24px;
  --lumx-typography-interface-headline-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-interface-headline-line-height: 32px;
  --lumx-typography-interface-title-font-size: 20px;
  --lumx-typography-interface-title-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-interface-title-line-height: 30px;
  --lumx-typography-interface-subtitle2-font-size: 16px;
  --lumx-typography-interface-subtitle2-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-interface-subtitle2-line-height: 24px;
  --lumx-typography-interface-subtitle1-font-size: 14px;
  --lumx-typography-interface-subtitle1-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-interface-subtitle1-line-height: 20px;
  --lumx-typography-interface-body2-font-size: 16px;
  --lumx-typography-interface-body2-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-typography-interface-body2-line-height: 24px;
  --lumx-typography-interface-body1-font-size: 14px;
  --lumx-typography-interface-body1-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-typography-interface-body1-line-height: 20px;
  --lumx-typography-interface-caption-font-size: 12px;
  --lumx-typography-interface-caption-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-typography-interface-caption-line-height: 16px;
  --lumx-typography-interface-overline-font-size: 10px;
  --lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-interface-overline-line-height: 12px;
  --lumx-typography-custom-title1-font-size: 40px;
  --lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-title2-font-size: 30px;
  --lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-title3-font-size: 24px;
  --lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-title4-font-size: 20px;
  --lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-title5-font-size: 16px;
  --lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-title6-font-size: 14px;
  --lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-intro-font-size: 18px;
  --lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-intro-line-height: 30px;
  --lumx-typography-custom-body-large-font-size: 16px;
  --lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-typography-custom-body-large-line-height: 24px;
  --lumx-typography-custom-body-font-size: 14px;
  --lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-typography-custom-body-line-height: 20px;
  --lumx-typography-custom-quote-font-size: 16px;
  --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-typography-custom-quote-font-style: italic;
  --lumx-typography-custom-quote-line-height: 24px;
  --lumx-typography-custom-publish-info-font-size: 14px;
  --lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular);
  --lumx-typography-custom-publish-info-line-height: 20px;
  --lumx-typography-custom-button-size-m-font-size: 14px;
  --lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-button-size-s-font-size: 12px;
  --lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-navigation-item-font-size: 14px;
  --lumx-typography-custom-navigation-item-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-typography-custom-navigation-item-line-height: 20px;
}

/**
 * List of deprecated v2 variables that have been removed or renamed.
 * Warning: These will be removed in the next major version.
 */
:root {
  --lumx-button-font-weight: var(--lumx-typography-font-weight-bold);
  --lumx-button-text-transform: var(--lumx-material-button-text-transform);
  --lumx-button-variant-icon-border-radius: var(--lumx-material-button-variant-icon-border-radius);
  --lumx-button-size-m-font-size: var(--lumx-typography-custom-button-size-m-font-size);
  --lumx-button-size-s-font-size: var(--lumx-typography-custom-button-size-s-font-size);
  --lumx-checkbox-wrapper-size: var(--lumx-material-checkbox-wrapper-size);
  --lumx-checkbox-control-size: var(--lumx-material-checkbox-control-size);
  --lumx-chip-size-m-height: var(--lumx-material-chip-size-m-height);
  --lumx-chip-size-m-border-radius: var(--lumx-material-chip-size-m-border-radius);
  --lumx-chip-size-m-padding-vertical: var(--lumx-material-chip-size-m-padding-vertical);
  --lumx-chip-size-s-height: var(--lumx-material-chip-size-s-height);
  --lumx-chip-size-s-border-radius: var(--lumx-material-chip-size-s-border-radius);
  --lumx-chip-size-s-padding-vertical: var(--lumx-material-chip-size-s-padding-vertical);
  --lumx-input-helper-font-size: var(--lumx-material-input-helper-font-size);
  --lumx-input-helper-font-weight: var(--lumx-material-input-helper-font-weight);
  --lumx-input-helper-line-height: var(--lumx-material-input-helper-line-height);
  --lumx-input-label-font-size: var(--lumx-material-input-label-font-size);
  --lumx-input-label-font-weight: var(--lumx-material-input-label-font-weight);
  --lumx-input-label-line-height: var(--lumx-material-input-label-line-height);
  --lumx-radio-button-wrapper-size: var(--lumx-material-radio-button-wrapper-size);
  --lumx-radio-button-control-size: var(--lumx-material-radio-button-control-size);
  --lumx-radio-button-indicator-size: var(--lumx-material-radio-button-indicator-size);
  --lumx-switch-wrapper-width: var(--lumx-material-switch-wrapper-width);
  --lumx-switch-wrapper-height: var(--lumx-material-switch-wrapper-height);
  --lumx-switch-control-width: var(--lumx-material-switch-control-width);
  --lumx-switch-control-height: var(--lumx-material-switch-control-height);
  --lumx-switch-indicator-size: var(--lumx-material-switch-indicator-size);
  --lumx-switch-indicator-offset: var(--lumx-material-switch-indicator-offset);
  --lumx-text-field-padding-top: var(--lumx-material-text-field-padding-top);
  --lumx-text-field-padding-bottom: var(--lumx-material-text-field-padding-bottom);
  --lumx-text-field-header-margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
  --lumx-text-field-label-font-size: var(--lumx-material-text-field-header-label-font-size);
  --lumx-text-field-label-font-weight: var(--lumx-material-text-field-header-label-font-weight);
  --lumx-text-field-label-line-height: var(--lumx-material-text-field-header-label-line-height);
  --lumx-text-field-wrapper-min-height: var(--lumx-text-field-input-min-height);
  --lumx-text-field-wrapper-border-radius: var(--lumx-text-field-input-border-radius);
  --lumx-text-field-wrapper-padding-vertical: var(--lumx-spacing-unit-tiny);
  --lumx-text-field-wrapper-padding-horizontal: var(--lumx-text-field-input-padding-horizontal);
  --lumx-text-field-state-default-border-top-width: var(--lumx-text-field-state-default-input-border-top-width);
  --lumx-text-field-state-default-border-right-width: var(--lumx-text-field-state-default-input-border-right-width);
  --lumx-text-field-state-default-border-bottom-width: var(--lumx-text-field-state-default-input-border-bottom-width);
  --lumx-text-field-state-default-border-left-width: var(--lumx-text-field-state-default-input-border-left-width);
  --lumx-text-field-state-default-theme-light-background-color: var(
      --lumx-text-field-state-default-theme-light-input-background-color
  );
  --lumx-text-field-state-default-theme-light-border-color: var(
      --lumx-text-field-state-default-theme-light-input-border-color
  );
  --lumx-text-field-state-default-theme-dark-background-color: var(
      --lumx-text-field-state-default-theme-dark-input-background-color
  );
  --lumx-text-field-state-default-theme-dark-border-color: var(
      --lumx-text-field-state-default-theme-dark-input-border-color
  );
  --lumx-text-field-state-hover-theme-light-background-color: var(
      --lumx-text-field-state-hover-theme-light-input-background-color
  );
  --lumx-text-field-state-hover-theme-dark-background-color: var(
      --lumx-text-field-state-hover-theme-dark-input-background-color
  );
  --lumx-text-field-state-focus-border-top-width: var(--lumx-text-field-state-focus-input-border-top-width);
  --lumx-text-field-state-focus-border-right-width: var(--lumx-text-field-state-focus-input-border-right-width);
  --lumx-text-field-state-focus-border-bottom-width: var(--lumx-text-field-state-focus-input-border-bottom-width);
  --lumx-text-field-state-focus-border-left-width: var(--lumx-text-field-state-focus-input-border-left-width);
  --lumx-text-field-state-focus-theme-light-background-color: var(
      --lumx-text-field-state-focus-theme-light-input-background-color
  );
  --lumx-text-field-state-focus-theme-light-border-color: var(
      --lumx-text-field-state-focus-theme-light-input-border-color
  );
  --lumx-text-field-state-focus-theme-dark-background-color: var(
      --lumx-text-field-state-focus-theme-dark-input-background-color
  );
  --lumx-text-field-state-focus-theme-dark-border-color: var(
      --lumx-text-field-state-focus-theme-dark-input-border-color
  );
  --lumx-text-field-input-icon-size: var(--lumx-size-xs);
  --lumx-text-field-input-font-size: var(--lumx-material-text-field-input-content-font-size);
  --lumx-text-field-input-font-weight: var(--lumx-material-text-field-input-content-font-weight);
  --lumx-text-field-input-line-height: var(--lumx-material-text-field-input-content-line-height);
  --lumx-text-field-input-validity-size: var(--lumx-size-xxs);
  --lumx-text-field-input-clear-size: var(--lumx-size-s);
  --lumx-progress-bounce: var(--lumx-material-progress-bounce);
  --lumx-progress-rotate: var(--lumx-material-progress-rotate);
  --lumx-typography-style-display1-font-size: var(--lumx-typography-interface-display1-font-size);
  --lumx-typography-style-display1-font-weight: var(--lumx-typography-interface-display1-font-weight);
  --lumx-typography-style-display1-line-height: var(--lumx-typography-interface-display1-line-height);
  --lumx-typography-style-headline-font-size: var(--lumx-typography-interface-headline-font-size);
  --lumx-typography-style-headline-font-weight: var(--lumx-typography-interface-headline-font-weight);
  --lumx-typography-style-headline-line-height: var(--lumx-typography-interface-headline-line-height);
  --lumx-typography-style-title-font-size: var(--lumx-typography-interface-title-font-size);
  --lumx-typography-style-title-font-weight: var(--lumx-typography-interface-title-font-weight);
  --lumx-typography-style-title-line-height: var(--lumx-typography-interface-title-line-height);
  --lumx-typography-style-subtitle2-font-size: var(--lumx-typography-interface-subtitle2-font-size);
  --lumx-typography-style-subtitle2-font-weight: var(--lumx-typography-interface-subtitle2-font-weight);
  --lumx-typography-style-subtitle2-line-height: var(--lumx-typography-interface-subtitle2-line-height);
  --lumx-typography-style-subtitle1-font-size: var(--lumx-typography-interface-subtitle1-font-size);
  --lumx-typography-style-subtitle1-font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  --lumx-typography-style-subtitle1-line-height: var(--lumx-typography-interface-subtitle1-line-height);
  --lumx-typography-style-body2-font-size: var(--lumx-typography-interface-body2-font-size);
  --lumx-typography-style-body2-font-weight: var(--lumx-typography-interface-body2-font-weight);
  --lumx-typography-style-body2-line-height: var(--lumx-typography-interface-body2-line-height);
  --lumx-typography-style-body1-font-size: var(--lumx-typography-interface-body1-font-size);
  --lumx-typography-style-body1-font-weight: var(--lumx-typography-interface-body1-font-weight);
  --lumx-typography-style-body1-line-height: var(--lumx-typography-interface-body1-line-height);
  --lumx-typography-style-caption-font-size: var(--lumx-typography-interface-caption-font-size);
  --lumx-typography-style-caption-font-weight: var(--lumx-typography-interface-caption-font-weight);
  --lumx-typography-style-caption-line-height: var(--lumx-typography-interface-caption-line-height);
  --lumx-typography-style-overline-font-size: var(--lumx-typography-interface-overline-font-size);
  --lumx-typography-style-overline-font-weight: var(--lumx-typography-interface-overline-font-weight);
  --lumx-typography-style-overline-line-height: var(--lumx-typography-interface-overline-line-height);
}

/* stylelint-disable custom-property-pattern, max-line-length, scss/dollar-variable-pattern, length-zero-no-unit */
/**
 * Do not edit directly
 * Generated on Mon, 13 Jan 2025 09:24:38 GMT
 */
/**
 * List of deprecated v2 variables that have been removed or renamed.
 * Warning: These will be removed in the next major version.
 */
/* stylelint-disable custom-property-pattern */
/** @deprecated: replaced with $lumx-progress-circular-size-map */
/**
 * 1. https://github.com/philipwalton/flexbugs/blob/master/README.md#flexbug-3
 */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  overflow: visible; /* 2 */
  height: 0; /* 1 */
  box-sizing: content-box; /* 1 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  /* stylelint-disable-next-line font-family-no-duplicate-names */
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  /* stylelint-disable-next-line font-family-no-duplicate-names */
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  margin: 0; /* 2 */
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  box-sizing: border-box; /* 1 */
  padding: 0; /* 3 */
  color: inherit; /* 2 */
  white-space: normal; /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
  font-family: var(--lumx-typography-font-family);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.5;
  color: var(--lumx-color-dark-N);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
dd,
ol,
ul,
figure,
hr,
fieldset,
legend {
  padding: 0;
  margin: 0;
}

li > ol,
li > ul {
  margin-bottom: 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* Align
   ========================================================================== */
.lumx-base-text-left {
  text-align: left;
}

.lumx-base-text-right {
  text-align: right;
}

.lumx-base-text-center {
  text-align: center;
}

/* Display
   ========================================================================== */
.lumx-base-display-block {
  display: block;
}

/* A11Y
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}

/** Need to remove the margin style on popper elements or else we get warnings in the console */
.lumx-popover.visually-hidden, .lumx-tooltip.visually-hidden {
  margin: revert !important;
}

/* ==========================================================================
   Action area
   ========================================================================== */
.lumx-action-area {
  position: relative;
}

/* Action element
   ========================================================================== */
.lumx-action-area__action {
  all: unset;
  /* ==================================================================
     Overlay (hover / active)
     ================================================================== */
  /* ==================================================================
     Focus outline
     ================================================================== */
}
.lumx-action-area__action::before {
  transition-duration: 150ms;
  transition-property: background-color, box-shadow, color;
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
  content: "";
  outline: 2px none var(--lumx-color-dark-N);
}
.lumx-action-area__action--has-overlay[data-focus-visible-added]::before, .lumx-action-area__action--has-overlay[data-lumx-hover]::before {
  background-color: var(--lumx-color-dark-L5);
}
@media (hover: hover) {
.lumx-action-area__action--has-overlay:hover::before {
  background-color: var(--lumx-color-dark-L5);
}}
.lumx-action-area__action--has-overlay:active::before, .lumx-action-area__action--has-overlay[data-lumx-active]::before {
  background-color: var(--lumx-color-dark-L4);
}
.lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay[data-focus-visible-added]::before, .lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay[data-lumx-hover]::before {
  background-color: var(--lumx-color-light-L5);
}
@media (hover: hover) {
.lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay:hover::before {
  background-color: var(--lumx-color-light-L5);
}}
.lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay:active::before, .lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay[data-lumx-active]::before {
  background-color: var(--lumx-color-light-L4);
}
.lumx-action-area__action--focus-outset[data-focus-visible-added]::before {
  outline-style: solid;
  outline-offset: 2px;
}
.lumx-action-area__action--focus-inset[data-focus-visible-added]::before {
  outline-style: solid;
  outline-offset: -2px;
}
.lumx-action-area__action--theme-dark[data-focus-visible-added]::before {
  outline-color: var(--lumx-color-light-N);
}

/* ==========================================================================
   Spacing
   ========================================================================== */
.lumx-spacing-padding {
  padding: 8px !important;
}

.lumx-spacing-padding-tiny {
  padding: 4px !important;
}

.lumx-spacing-padding-regular {
  padding: 8px !important;
}

.lumx-spacing-padding-big {
  padding: 16px !important;
}

.lumx-spacing-padding-huge {
  padding: 24px !important;
}

.lumx-spacing-padding-none {
  padding: 0 !important;
}

.lumx-spacing-padding-top {
  padding-top: 8px !important;
}

.lumx-spacing-padding-top-tiny {
  padding-top: 4px !important;
}

.lumx-spacing-padding-top-regular {
  padding-top: 8px !important;
}

.lumx-spacing-padding-top-big {
  padding-top: 16px !important;
}

.lumx-spacing-padding-top-huge {
  padding-top: 24px !important;
}

.lumx-spacing-padding-top-none {
  padding-top: 0 !important;
}

.lumx-spacing-padding-right {
  padding-right: 8px !important;
}

.lumx-spacing-padding-right-tiny {
  padding-right: 4px !important;
}

.lumx-spacing-padding-right-regular {
  padding-right: 8px !important;
}

.lumx-spacing-padding-right-big {
  padding-right: 16px !important;
}

.lumx-spacing-padding-right-huge {
  padding-right: 24px !important;
}

.lumx-spacing-padding-right-none {
  padding-right: 0 !important;
}

.lumx-spacing-padding-bottom {
  padding-bottom: 8px !important;
}

.lumx-spacing-padding-bottom-tiny {
  padding-bottom: 4px !important;
}

.lumx-spacing-padding-bottom-regular {
  padding-bottom: 8px !important;
}

.lumx-spacing-padding-bottom-big {
  padding-bottom: 16px !important;
}

.lumx-spacing-padding-bottom-huge {
  padding-bottom: 24px !important;
}

.lumx-spacing-padding-bottom-none {
  padding-bottom: 0 !important;
}

.lumx-spacing-padding-left {
  padding-left: 8px !important;
}

.lumx-spacing-padding-left-tiny {
  padding-left: 4px !important;
}

.lumx-spacing-padding-left-regular {
  padding-left: 8px !important;
}

.lumx-spacing-padding-left-big {
  padding-left: 16px !important;
}

.lumx-spacing-padding-left-huge {
  padding-left: 24px !important;
}

.lumx-spacing-padding-left-none {
  padding-left: 0 !important;
}

.lumx-spacing-padding-horizontal {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.lumx-spacing-padding-horizontal-tiny {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.lumx-spacing-padding-horizontal-regular {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.lumx-spacing-padding-horizontal-big {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.lumx-spacing-padding-horizontal-huge {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.lumx-spacing-padding-horizontal-none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.lumx-spacing-padding-vertical {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.lumx-spacing-padding-vertical-tiny {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.lumx-spacing-padding-vertical-regular {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.lumx-spacing-padding-vertical-big {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.lumx-spacing-padding-vertical-huge {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.lumx-spacing-padding-vertical-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.lumx-spacing-margin {
  margin: 8px !important;
}

.lumx-spacing-margin-tiny {
  margin: 4px !important;
}

.lumx-spacing-margin-regular {
  margin: 8px !important;
}

.lumx-spacing-margin-big {
  margin: 16px !important;
}

.lumx-spacing-margin-huge {
  margin: 24px !important;
}

.lumx-spacing-margin-none {
  margin: 0 !important;
}

.lumx-spacing-margin-top {
  margin-top: 8px !important;
}

.lumx-spacing-margin-top-tiny {
  margin-top: 4px !important;
}

.lumx-spacing-margin-top-regular {
  margin-top: 8px !important;
}

.lumx-spacing-margin-top-big {
  margin-top: 16px !important;
}

.lumx-spacing-margin-top-huge {
  margin-top: 24px !important;
}

.lumx-spacing-margin-top-none {
  margin-top: 0 !important;
}

.lumx-spacing-margin-right {
  margin-right: 8px !important;
}

.lumx-spacing-margin-right-tiny {
  margin-right: 4px !important;
}

.lumx-spacing-margin-right-regular {
  margin-right: 8px !important;
}

.lumx-spacing-margin-right-big {
  margin-right: 16px !important;
}

.lumx-spacing-margin-right-huge {
  margin-right: 24px !important;
}

.lumx-spacing-margin-right-none {
  margin-right: 0 !important;
}

.lumx-spacing-margin-bottom {
  margin-bottom: 8px !important;
}

.lumx-spacing-margin-bottom-tiny {
  margin-bottom: 4px !important;
}

.lumx-spacing-margin-bottom-regular {
  margin-bottom: 8px !important;
}

.lumx-spacing-margin-bottom-big {
  margin-bottom: 16px !important;
}

.lumx-spacing-margin-bottom-huge {
  margin-bottom: 24px !important;
}

.lumx-spacing-margin-bottom-none {
  margin-bottom: 0 !important;
}

.lumx-spacing-margin-left {
  margin-left: 8px !important;
}

.lumx-spacing-margin-left-tiny {
  margin-left: 4px !important;
}

.lumx-spacing-margin-left-regular {
  margin-left: 8px !important;
}

.lumx-spacing-margin-left-big {
  margin-left: 16px !important;
}

.lumx-spacing-margin-left-huge {
  margin-left: 24px !important;
}

.lumx-spacing-margin-left-none {
  margin-left: 0 !important;
}

.lumx-spacing-margin-horizontal {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.lumx-spacing-margin-horizontal-tiny {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.lumx-spacing-margin-horizontal-regular {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.lumx-spacing-margin-horizontal-big {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.lumx-spacing-margin-horizontal-huge {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.lumx-spacing-margin-horizontal-none {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.lumx-spacing-margin-vertical {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.lumx-spacing-margin-vertical-tiny {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.lumx-spacing-margin-vertical-regular {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.lumx-spacing-margin-vertical-big {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.lumx-spacing-margin-vertical-huge {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.lumx-spacing-margin-vertical-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Color (font & background)
   ========================================================================== */
.lumx-color-background-dark-D2 {
  background-color: var(--lumx-color-dark-N);
}

.lumx-color-font-dark-D2 {
  color: var(--lumx-color-dark-N);
}

.lumx-color-background-dark-D1 {
  background-color: var(--lumx-color-dark-N);
}

.lumx-color-font-dark-D1 {
  color: var(--lumx-color-dark-N);
}

.lumx-color-background-dark-N {
  background-color: var(--lumx-color-dark-N);
}

.lumx-color-font-dark-N {
  color: var(--lumx-color-dark-N);
}

.lumx-color-background-dark-L1 {
  background-color: var(--lumx-color-dark-L1);
}

.lumx-color-font-dark-L1 {
  color: var(--lumx-color-dark-L1);
}

.lumx-color-background-dark-L2 {
  background-color: var(--lumx-color-dark-L2);
}

.lumx-color-font-dark-L2 {
  color: var(--lumx-color-dark-L2);
}

.lumx-color-background-dark-L3 {
  background-color: var(--lumx-color-dark-L3);
}

.lumx-color-font-dark-L3 {
  color: var(--lumx-color-dark-L3);
}

.lumx-color-background-dark-L4 {
  background-color: var(--lumx-color-dark-L4);
}

.lumx-color-font-dark-L4 {
  color: var(--lumx-color-dark-L4);
}

.lumx-color-background-dark-L5 {
  background-color: var(--lumx-color-dark-L5);
}

.lumx-color-font-dark-L5 {
  color: var(--lumx-color-dark-L5);
}

.lumx-color-background-dark-L6 {
  background-color: var(--lumx-color-dark-L6);
}

.lumx-color-font-dark-L6 {
  color: var(--lumx-color-dark-L6);
}

.lumx-color-background-light-D2 {
  background-color: var(--lumx-color-light-N);
}

.lumx-color-font-light-D2 {
  color: var(--lumx-color-light-N);
}

.lumx-color-background-light-D1 {
  background-color: var(--lumx-color-light-N);
}

.lumx-color-font-light-D1 {
  color: var(--lumx-color-light-N);
}

.lumx-color-background-light-N {
  background-color: var(--lumx-color-light-N);
}

.lumx-color-font-light-N {
  color: var(--lumx-color-light-N);
}

.lumx-color-background-light-L1 {
  background-color: var(--lumx-color-light-L1);
}

.lumx-color-font-light-L1 {
  color: var(--lumx-color-light-L1);
}

.lumx-color-background-light-L2 {
  background-color: var(--lumx-color-light-L2);
}

.lumx-color-font-light-L2 {
  color: var(--lumx-color-light-L2);
}

.lumx-color-background-light-L3 {
  background-color: var(--lumx-color-light-L3);
}

.lumx-color-font-light-L3 {
  color: var(--lumx-color-light-L3);
}

.lumx-color-background-light-L4 {
  background-color: var(--lumx-color-light-L4);
}

.lumx-color-font-light-L4 {
  color: var(--lumx-color-light-L4);
}

.lumx-color-background-light-L5 {
  background-color: var(--lumx-color-light-L5);
}

.lumx-color-font-light-L5 {
  color: var(--lumx-color-light-L5);
}

.lumx-color-background-light-L6 {
  background-color: var(--lumx-color-light-L6);
}

.lumx-color-font-light-L6 {
  color: var(--lumx-color-light-L6);
}

.lumx-color-background-blue-D2 {
  background-color: var(--lumx-color-blue-D2);
}

.lumx-color-font-blue-D2 {
  color: var(--lumx-color-blue-D2);
}

.lumx-color-background-blue-D1 {
  background-color: var(--lumx-color-blue-D1);
}

.lumx-color-font-blue-D1 {
  color: var(--lumx-color-blue-D1);
}

.lumx-color-background-blue-N {
  background-color: var(--lumx-color-blue-N);
}

.lumx-color-font-blue-N {
  color: var(--lumx-color-blue-N);
}

.lumx-color-background-blue-L1 {
  background-color: var(--lumx-color-blue-L1);
}

.lumx-color-font-blue-L1 {
  color: var(--lumx-color-blue-L1);
}

.lumx-color-background-blue-L2 {
  background-color: var(--lumx-color-blue-L2);
}

.lumx-color-font-blue-L2 {
  color: var(--lumx-color-blue-L2);
}

.lumx-color-background-blue-L3 {
  background-color: var(--lumx-color-blue-L3);
}

.lumx-color-font-blue-L3 {
  color: var(--lumx-color-blue-L3);
}

.lumx-color-background-blue-L4 {
  background-color: var(--lumx-color-blue-L4);
}

.lumx-color-font-blue-L4 {
  color: var(--lumx-color-blue-L4);
}

.lumx-color-background-blue-L5 {
  background-color: var(--lumx-color-blue-L5);
}

.lumx-color-font-blue-L5 {
  color: var(--lumx-color-blue-L5);
}

.lumx-color-background-blue-L6 {
  background-color: var(--lumx-color-blue-L6);
}

.lumx-color-font-blue-L6 {
  color: var(--lumx-color-blue-L6);
}

.lumx-color-background-green-D2 {
  background-color: var(--lumx-color-green-D2);
}

.lumx-color-font-green-D2 {
  color: var(--lumx-color-green-D2);
}

.lumx-color-background-green-D1 {
  background-color: var(--lumx-color-green-D1);
}

.lumx-color-font-green-D1 {
  color: var(--lumx-color-green-D1);
}

.lumx-color-background-green-N {
  background-color: var(--lumx-color-green-N);
}

.lumx-color-font-green-N {
  color: var(--lumx-color-green-N);
}

.lumx-color-background-green-L1 {
  background-color: var(--lumx-color-green-L1);
}

.lumx-color-font-green-L1 {
  color: var(--lumx-color-green-L1);
}

.lumx-color-background-green-L2 {
  background-color: var(--lumx-color-green-L2);
}

.lumx-color-font-green-L2 {
  color: var(--lumx-color-green-L2);
}

.lumx-color-background-green-L3 {
  background-color: var(--lumx-color-green-L3);
}

.lumx-color-font-green-L3 {
  color: var(--lumx-color-green-L3);
}

.lumx-color-background-green-L4 {
  background-color: var(--lumx-color-green-L4);
}

.lumx-color-font-green-L4 {
  color: var(--lumx-color-green-L4);
}

.lumx-color-background-green-L5 {
  background-color: var(--lumx-color-green-L5);
}

.lumx-color-font-green-L5 {
  color: var(--lumx-color-green-L5);
}

.lumx-color-background-green-L6 {
  background-color: var(--lumx-color-green-L6);
}

.lumx-color-font-green-L6 {
  color: var(--lumx-color-green-L6);
}

.lumx-color-background-yellow-D2 {
  background-color: var(--lumx-color-yellow-D2);
}

.lumx-color-font-yellow-D2 {
  color: var(--lumx-color-yellow-D2);
}

.lumx-color-background-yellow-D1 {
  background-color: var(--lumx-color-yellow-D1);
}

.lumx-color-font-yellow-D1 {
  color: var(--lumx-color-yellow-D1);
}

.lumx-color-background-yellow-N {
  background-color: var(--lumx-color-yellow-N);
}

.lumx-color-font-yellow-N {
  color: var(--lumx-color-yellow-N);
}

.lumx-color-background-yellow-L1 {
  background-color: var(--lumx-color-yellow-L1);
}

.lumx-color-font-yellow-L1 {
  color: var(--lumx-color-yellow-L1);
}

.lumx-color-background-yellow-L2 {
  background-color: var(--lumx-color-yellow-L2);
}

.lumx-color-font-yellow-L2 {
  color: var(--lumx-color-yellow-L2);
}

.lumx-color-background-yellow-L3 {
  background-color: var(--lumx-color-yellow-L3);
}

.lumx-color-font-yellow-L3 {
  color: var(--lumx-color-yellow-L3);
}

.lumx-color-background-yellow-L4 {
  background-color: var(--lumx-color-yellow-L4);
}

.lumx-color-font-yellow-L4 {
  color: var(--lumx-color-yellow-L4);
}

.lumx-color-background-yellow-L5 {
  background-color: var(--lumx-color-yellow-L5);
}

.lumx-color-font-yellow-L5 {
  color: var(--lumx-color-yellow-L5);
}

.lumx-color-background-yellow-L6 {
  background-color: var(--lumx-color-yellow-L6);
}

.lumx-color-font-yellow-L6 {
  color: var(--lumx-color-yellow-L6);
}

.lumx-color-background-red-D2 {
  background-color: var(--lumx-color-red-D2);
}

.lumx-color-font-red-D2 {
  color: var(--lumx-color-red-D2);
}

.lumx-color-background-red-D1 {
  background-color: var(--lumx-color-red-D1);
}

.lumx-color-font-red-D1 {
  color: var(--lumx-color-red-D1);
}

.lumx-color-background-red-N {
  background-color: var(--lumx-color-red-N);
}

.lumx-color-font-red-N {
  color: var(--lumx-color-red-N);
}

.lumx-color-background-red-L1 {
  background-color: var(--lumx-color-red-L1);
}

.lumx-color-font-red-L1 {
  color: var(--lumx-color-red-L1);
}

.lumx-color-background-red-L2 {
  background-color: var(--lumx-color-red-L2);
}

.lumx-color-font-red-L2 {
  color: var(--lumx-color-red-L2);
}

.lumx-color-background-red-L3 {
  background-color: var(--lumx-color-red-L3);
}

.lumx-color-font-red-L3 {
  color: var(--lumx-color-red-L3);
}

.lumx-color-background-red-L4 {
  background-color: var(--lumx-color-red-L4);
}

.lumx-color-font-red-L4 {
  color: var(--lumx-color-red-L4);
}

.lumx-color-background-red-L5 {
  background-color: var(--lumx-color-red-L5);
}

.lumx-color-font-red-L5 {
  color: var(--lumx-color-red-L5);
}

.lumx-color-background-red-L6 {
  background-color: var(--lumx-color-red-L6);
}

.lumx-color-font-red-L6 {
  color: var(--lumx-color-red-L6);
}

.lumx-color-background-grey-D2 {
  background-color: var(--lumx-color-grey-N);
}

.lumx-color-font-grey-D2 {
  color: var(--lumx-color-grey-N);
}

.lumx-color-background-grey-D1 {
  background-color: var(--lumx-color-grey-N);
}

.lumx-color-font-grey-D1 {
  color: var(--lumx-color-grey-N);
}

.lumx-color-background-grey-N {
  background-color: var(--lumx-color-grey-N);
}

.lumx-color-font-grey-N {
  color: var(--lumx-color-grey-N);
}

.lumx-color-background-grey-L1 {
  background-color: var(--lumx-color-grey-L1);
}

.lumx-color-font-grey-L1 {
  color: var(--lumx-color-grey-L1);
}

.lumx-color-background-grey-L2 {
  background-color: var(--lumx-color-grey-L2);
}

.lumx-color-font-grey-L2 {
  color: var(--lumx-color-grey-L2);
}

.lumx-color-background-grey-L3 {
  background-color: var(--lumx-color-grey-L3);
}

.lumx-color-font-grey-L3 {
  color: var(--lumx-color-grey-L3);
}

.lumx-color-background-grey-L4 {
  background-color: var(--lumx-color-grey-L4);
}

.lumx-color-font-grey-L4 {
  color: var(--lumx-color-grey-L4);
}

.lumx-color-background-grey-L5 {
  background-color: var(--lumx-color-grey-L5);
}

.lumx-color-font-grey-L5 {
  color: var(--lumx-color-grey-L5);
}

.lumx-color-background-grey-L6 {
  background-color: var(--lumx-color-grey-L6);
}

.lumx-color-font-grey-L6 {
  color: var(--lumx-color-grey-L6);
}

.lumx-color-background-primary-D2 {
  background-color: var(--lumx-color-primary-D2);
}

.lumx-color-font-primary-D2 {
  color: var(--lumx-color-primary-D2);
}

.lumx-color-background-primary-D1 {
  background-color: var(--lumx-color-primary-D1);
}

.lumx-color-font-primary-D1 {
  color: var(--lumx-color-primary-D1);
}

.lumx-color-background-primary-N {
  background-color: var(--lumx-color-primary-N);
}

.lumx-color-font-primary-N {
  color: var(--lumx-color-primary-N);
}

.lumx-color-background-primary-L1 {
  background-color: var(--lumx-color-primary-L1);
}

.lumx-color-font-primary-L1 {
  color: var(--lumx-color-primary-L1);
}

.lumx-color-background-primary-L2 {
  background-color: var(--lumx-color-primary-L2);
}

.lumx-color-font-primary-L2 {
  color: var(--lumx-color-primary-L2);
}

.lumx-color-background-primary-L3 {
  background-color: var(--lumx-color-primary-L3);
}

.lumx-color-font-primary-L3 {
  color: var(--lumx-color-primary-L3);
}

.lumx-color-background-primary-L4 {
  background-color: var(--lumx-color-primary-L4);
}

.lumx-color-font-primary-L4 {
  color: var(--lumx-color-primary-L4);
}

.lumx-color-background-primary-L5 {
  background-color: var(--lumx-color-primary-L5);
}

.lumx-color-font-primary-L5 {
  color: var(--lumx-color-primary-L5);
}

.lumx-color-background-primary-L6 {
  background-color: var(--lumx-color-primary-L6);
}

.lumx-color-font-primary-L6 {
  color: var(--lumx-color-primary-L6);
}

.lumx-color-background-secondary-D2 {
  background-color: var(--lumx-color-secondary-D2);
}

.lumx-color-font-secondary-D2 {
  color: var(--lumx-color-secondary-D2);
}

.lumx-color-background-secondary-D1 {
  background-color: var(--lumx-color-secondary-D1);
}

.lumx-color-font-secondary-D1 {
  color: var(--lumx-color-secondary-D1);
}

.lumx-color-background-secondary-N {
  background-color: var(--lumx-color-secondary-N);
}

.lumx-color-font-secondary-N {
  color: var(--lumx-color-secondary-N);
}

.lumx-color-background-secondary-L1 {
  background-color: var(--lumx-color-secondary-L1);
}

.lumx-color-font-secondary-L1 {
  color: var(--lumx-color-secondary-L1);
}

.lumx-color-background-secondary-L2 {
  background-color: var(--lumx-color-secondary-L2);
}

.lumx-color-font-secondary-L2 {
  color: var(--lumx-color-secondary-L2);
}

.lumx-color-background-secondary-L3 {
  background-color: var(--lumx-color-secondary-L3);
}

.lumx-color-font-secondary-L3 {
  color: var(--lumx-color-secondary-L3);
}

.lumx-color-background-secondary-L4 {
  background-color: var(--lumx-color-secondary-L4);
}

.lumx-color-font-secondary-L4 {
  color: var(--lumx-color-secondary-L4);
}

.lumx-color-background-secondary-L5 {
  background-color: var(--lumx-color-secondary-L5);
}

.lumx-color-font-secondary-L5 {
  color: var(--lumx-color-secondary-L5);
}

.lumx-color-background-secondary-L6 {
  background-color: var(--lumx-color-secondary-L6);
}

.lumx-color-font-secondary-L6 {
  color: var(--lumx-color-secondary-L6);
}

.lumx-color-background-accent-D2 {
  background-color: var(--lumx-color-accent-D2);
}

.lumx-color-font-accent-D2 {
  color: var(--lumx-color-accent-D2);
}

.lumx-color-background-accent-D1 {
  background-color: var(--lumx-color-accent-D1);
}

.lumx-color-font-accent-D1 {
  color: var(--lumx-color-accent-D1);
}

.lumx-color-background-accent-N {
  background-color: var(--lumx-color-accent-N);
}

.lumx-color-font-accent-N {
  color: var(--lumx-color-accent-N);
}

.lumx-color-background-accent-L1 {
  background-color: var(--lumx-color-accent-L1);
}

.lumx-color-font-accent-L1 {
  color: var(--lumx-color-accent-L1);
}

.lumx-color-background-accent-L2 {
  background-color: var(--lumx-color-accent-L2);
}

.lumx-color-font-accent-L2 {
  color: var(--lumx-color-accent-L2);
}

.lumx-color-background-accent-L3 {
  background-color: var(--lumx-color-accent-L3);
}

.lumx-color-font-accent-L3 {
  color: var(--lumx-color-accent-L3);
}

.lumx-color-background-accent-L4 {
  background-color: var(--lumx-color-accent-L4);
}

.lumx-color-font-accent-L4 {
  color: var(--lumx-color-accent-L4);
}

.lumx-color-background-accent-L5 {
  background-color: var(--lumx-color-accent-L5);
}

.lumx-color-font-accent-L5 {
  color: var(--lumx-color-accent-L5);
}

.lumx-color-background-accent-L6 {
  background-color: var(--lumx-color-accent-L6);
}

.lumx-color-font-accent-L6 {
  color: var(--lumx-color-accent-L6);
}

.lumx-color-background-black-D2 {
  background-color: var(--lumx-color-black-N);
}

.lumx-color-font-black-D2 {
  color: var(--lumx-color-black-N);
}

.lumx-color-background-black-D1 {
  background-color: var(--lumx-color-black-N);
}

.lumx-color-font-black-D1 {
  color: var(--lumx-color-black-N);
}

.lumx-color-background-black-N {
  background-color: var(--lumx-color-black-N);
}

.lumx-color-font-black-N {
  color: var(--lumx-color-black-N);
}

.lumx-color-background-black-L1 {
  background-color: var(--lumx-color-black-L1);
}

.lumx-color-font-black-L1 {
  color: var(--lumx-color-black-L1);
}

.lumx-color-background-black-L2 {
  background-color: var(--lumx-color-black-L2);
}

.lumx-color-font-black-L2 {
  color: var(--lumx-color-black-L2);
}

.lumx-color-background-black-L3 {
  background-color: var(--lumx-color-black-L3);
}

.lumx-color-font-black-L3 {
  color: var(--lumx-color-black-L3);
}

.lumx-color-background-black-L4 {
  background-color: var(--lumx-color-black-L4);
}

.lumx-color-font-black-L4 {
  color: var(--lumx-color-black-L4);
}

.lumx-color-background-black-L5 {
  background-color: var(--lumx-color-black-L5);
}

.lumx-color-font-black-L5 {
  color: var(--lumx-color-black-L5);
}

.lumx-color-background-black-L6 {
  background-color: var(--lumx-color-black-L6);
}

.lumx-color-font-black-L6 {
  color: var(--lumx-color-black-L6);
}

.lumx-color-background-white-D2 {
  background-color: var(--lumx-color-white-N);
}

.lumx-color-font-white-D2 {
  color: var(--lumx-color-white-N);
}

.lumx-color-background-white-D1 {
  background-color: var(--lumx-color-white-N);
}

.lumx-color-font-white-D1 {
  color: var(--lumx-color-white-N);
}

.lumx-color-background-white-N {
  background-color: var(--lumx-color-white-N);
}

.lumx-color-font-white-N {
  color: var(--lumx-color-white-N);
}

.lumx-color-background-white-L1 {
  background-color: var(--lumx-color-white-L1);
}

.lumx-color-font-white-L1 {
  color: var(--lumx-color-white-L1);
}

.lumx-color-background-white-L2 {
  background-color: var(--lumx-color-white-L2);
}

.lumx-color-font-white-L2 {
  color: var(--lumx-color-white-L2);
}

.lumx-color-background-white-L3 {
  background-color: var(--lumx-color-white-L3);
}

.lumx-color-font-white-L3 {
  color: var(--lumx-color-white-L3);
}

.lumx-color-background-white-L4 {
  background-color: var(--lumx-color-white-L4);
}

.lumx-color-font-white-L4 {
  color: var(--lumx-color-white-L4);
}

.lumx-color-background-white-L5 {
  background-color: var(--lumx-color-white-L5);
}

.lumx-color-font-white-L5 {
  color: var(--lumx-color-white-L5);
}

.lumx-color-background-white-L6 {
  background-color: var(--lumx-color-white-L6);
}

.lumx-color-font-white-L6 {
  color: var(--lumx-color-white-L6);
}

.lumx-color-background-orange-D2 {
  background-color: var(--lumx-color-orange-D2);
}

.lumx-color-font-orange-D2 {
  color: var(--lumx-color-orange-D2);
}

.lumx-color-background-orange-D1 {
  background-color: var(--lumx-color-orange-D1);
}

.lumx-color-font-orange-D1 {
  color: var(--lumx-color-orange-D1);
}

.lumx-color-background-orange-N {
  background-color: var(--lumx-color-orange-N);
}

.lumx-color-font-orange-N {
  color: var(--lumx-color-orange-N);
}

.lumx-color-background-orange-L1 {
  background-color: var(--lumx-color-orange-L1);
}

.lumx-color-font-orange-L1 {
  color: var(--lumx-color-orange-L1);
}

.lumx-color-background-orange-L2 {
  background-color: var(--lumx-color-orange-L2);
}

.lumx-color-font-orange-L2 {
  color: var(--lumx-color-orange-L2);
}

.lumx-color-background-orange-L3 {
  background-color: var(--lumx-color-orange-L3);
}

.lumx-color-font-orange-L3 {
  color: var(--lumx-color-orange-L3);
}

.lumx-color-background-orange-L4 {
  background-color: var(--lumx-color-orange-L4);
}

.lumx-color-font-orange-L4 {
  color: var(--lumx-color-orange-L4);
}

.lumx-color-background-orange-L5 {
  background-color: var(--lumx-color-orange-L5);
}

.lumx-color-font-orange-L5 {
  color: var(--lumx-color-orange-L5);
}

.lumx-color-background-orange-L6 {
  background-color: var(--lumx-color-orange-L6);
}

.lumx-color-font-orange-L6 {
  color: var(--lumx-color-orange-L6);
}

/* ==========================================================================
   Typography
   ========================================================================== */
.lumx-typography-display1,
.lumx-typography-interface-display1 {
  font-size: 34px;
  font-weight: var(--lumx-typography-interface-display1-font-weight);
  line-height: 40px;
}

.lumx-typography-headline,
.lumx-typography-interface-headline {
  font-size: 24px;
  font-weight: var(--lumx-typography-interface-headline-font-weight);
  line-height: 32px;
}

.lumx-typography-title,
.lumx-typography-interface-title {
  font-size: 20px;
  font-weight: var(--lumx-typography-interface-title-font-weight);
  line-height: 30px;
}

.lumx-typography-subtitle2,
.lumx-typography-interface-subtitle2 {
  font-size: 16px;
  font-weight: var(--lumx-typography-interface-subtitle2-font-weight);
  line-height: 24px;
}

.lumx-typography-subtitle1,
.lumx-typography-interface-subtitle1 {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
}

.lumx-typography-body2,
.lumx-typography-interface-body2 {
  font-size: 16px;
  font-weight: var(--lumx-typography-interface-body2-font-weight);
  line-height: 24px;
}

.lumx-typography-body1,
.lumx-typography-interface-body1 {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}

.lumx-typography-caption,
.lumx-typography-interface-caption {
  font-size: 12px;
  font-weight: var(--lumx-typography-interface-caption-font-weight);
  line-height: 16px;
}

.lumx-typography-overline,
.lumx-typography-interface-overline {
  font-size: 10px;
  font-weight: var(--lumx-typography-interface-overline-font-weight);
  line-height: 12px;
  text-transform: uppercase;
}

.lumx-typography-custom-title1 {
  font-family: var(--lumx-typography-custom-title1-font-family);
  font-size: var(--lumx-typography-custom-title1-font-size);
  font-style: var(--lumx-typography-custom-title1-font-style);
  font-weight: var(--lumx-typography-custom-title1-font-weight);
  line-height: var(--lumx-typography-custom-title1-line-height);
}

.lumx-typography-custom-title2 {
  font-family: var(--lumx-typography-custom-title2-font-family);
  font-size: var(--lumx-typography-custom-title2-font-size);
  font-style: var(--lumx-typography-custom-title2-font-style);
  font-weight: var(--lumx-typography-custom-title2-font-weight);
  line-height: var(--lumx-typography-custom-title2-line-height);
}

.lumx-typography-custom-title3 {
  font-family: var(--lumx-typography-custom-title3-font-family);
  font-size: var(--lumx-typography-custom-title3-font-size);
  font-style: var(--lumx-typography-custom-title3-font-style);
  font-weight: var(--lumx-typography-custom-title3-font-weight);
  line-height: var(--lumx-typography-custom-title3-line-height);
}

.lumx-typography-custom-title4 {
  font-family: var(--lumx-typography-custom-title4-font-family);
  font-size: var(--lumx-typography-custom-title4-font-size);
  font-style: var(--lumx-typography-custom-title4-font-style);
  font-weight: var(--lumx-typography-custom-title4-font-weight);
  line-height: var(--lumx-typography-custom-title4-line-height);
}

.lumx-typography-custom-title5 {
  font-family: var(--lumx-typography-custom-title5-font-family);
  font-size: var(--lumx-typography-custom-title5-font-size);
  font-style: var(--lumx-typography-custom-title5-font-style);
  font-weight: var(--lumx-typography-custom-title5-font-weight);
  line-height: var(--lumx-typography-custom-title5-line-height);
}

.lumx-typography-custom-title6 {
  font-family: var(--lumx-typography-custom-title6-font-family);
  font-size: var(--lumx-typography-custom-title6-font-size);
  font-style: var(--lumx-typography-custom-title6-font-style);
  font-weight: var(--lumx-typography-custom-title6-font-weight);
  line-height: var(--lumx-typography-custom-title6-line-height);
}

.lumx-typography-custom-intro {
  font-family: var(--lumx-typography-custom-intro-font-family);
  font-size: var(--lumx-typography-custom-intro-font-size);
  font-style: var(--lumx-typography-custom-intro-font-style);
  font-weight: var(--lumx-typography-custom-intro-font-weight);
  line-height: var(--lumx-typography-custom-intro-line-height);
}

.lumx-typography-custom-body-large {
  font-family: var(--lumx-typography-custom-body-large-font-family);
  font-size: var(--lumx-typography-custom-body-large-font-size);
  font-style: var(--lumx-typography-custom-body-large-font-style);
  font-weight: var(--lumx-typography-custom-body-large-font-weight);
  line-height: var(--lumx-typography-custom-body-large-line-height);
}

.lumx-typography-custom-body {
  font-family: var(--lumx-typography-custom-body-font-family);
  font-size: var(--lumx-typography-custom-body-font-size);
  font-style: var(--lumx-typography-custom-body-font-style);
  font-weight: var(--lumx-typography-custom-body-font-weight);
  line-height: var(--lumx-typography-custom-body-line-height);
}

.lumx-typography-custom-quote {
  font-family: var(--lumx-typography-custom-quote-font-family);
  font-size: var(--lumx-typography-custom-quote-font-size);
  font-style: var(--lumx-typography-custom-quote-font-style);
  font-weight: var(--lumx-typography-custom-quote-font-weight);
  line-height: var(--lumx-typography-custom-quote-line-height);
}

.lumx-typography-custom-publish-info {
  font-family: var(--lumx-typography-custom-publish-info-font-family);
  font-size: var(--lumx-typography-custom-publish-info-font-size);
  font-style: var(--lumx-typography-custom-publish-info-font-style);
  font-weight: var(--lumx-typography-custom-publish-info-font-weight);
  line-height: var(--lumx-typography-custom-publish-info-line-height);
}

.lumx-typography-custom-button {
  font-family: var(--lumx-typography-custom-button-font-family);
  font-size: var(--lumx-typography-custom-button-font-size);
  font-style: var(--lumx-typography-custom-button-font-style);
  font-weight: var(--lumx-typography-custom-button-font-weight);
  line-height: var(--lumx-typography-custom-button-line-height);
}

.lumx-typography-custom-navigation-item {
  font-family: var(--lumx-typography-custom-navigation-item-font-family);
  font-size: var(--lumx-typography-custom-navigation-item-font-size);
  font-style: var(--lumx-typography-custom-navigation-item-font-style);
  font-weight: var(--lumx-typography-custom-navigation-item-font-weight);
  line-height: var(--lumx-typography-custom-navigation-item-line-height);
}

/* ==========================================================================
   Avatar
   ========================================================================== */
.lumx-avatar {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  outline: none;
}
.lumx-avatar__thumbnail {
  overflow: hidden;
  border-radius: 50%;
}
.lumx-avatar__actions {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
}
.lumx-avatar__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
}

/* Avatar sizes
   ========================================================================== */
.lumx-avatar--size-xxs {
  width: 14px;
  height: 14px;
}

.lumx-avatar--size-xs {
  width: 20px;
  height: 20px;
}

.lumx-avatar--size-s {
  width: 24px;
  height: 24px;
}

.lumx-avatar--size-m {
  width: 36px;
  height: 36px;
}

.lumx-avatar--size-l {
  width: 64px;
  height: 64px;
}

.lumx-avatar--size-xl {
  width: 128px;
  height: 128px;
}

.lumx-avatar--size-xxl {
  width: 256px;
  height: 256px;
}

/* ==========================================================================
   Badge
   ========================================================================== */
.lumx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  pointer-events: none;
  border-radius: 50%;
}
.lumx-badge span {
  font-size: 10px;
  font-weight: var(--lumx-typography-interface-overline-font-weight);
  line-height: 12px;
  text-transform: uppercase;
  line-height: 20px;
}
.lumx-badge i {
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
}

/* Badge colors
   ========================================================================== */
.lumx-badge--color-dark {
  background-color: var(--lumx-color-dark-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-light {
  background-color: var(--lumx-color-light-N);
  box-shadow: 0 1px 4px 0 var(--lumx-color-dark-L4);
}

.lumx-badge--color-blue {
  background-color: var(--lumx-color-blue-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-green {
  background-color: var(--lumx-color-green-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-yellow {
  background-color: var(--lumx-color-yellow-N);
  color: var(--lumx-color-dark-L1);
}

.lumx-badge--color-red {
  background-color: var(--lumx-color-red-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-grey {
  background-color: var(--lumx-color-grey-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-primary {
  background-color: var(--lumx-color-primary-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-secondary {
  background-color: var(--lumx-color-secondary-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-accent {
  background-color: var(--lumx-color-accent-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-black {
  background-color: var(--lumx-color-black-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-white {
  background-color: var(--lumx-color-white-N);
  color: var(--lumx-color-light-N);
}

.lumx-badge--color-orange {
  background-color: var(--lumx-color-orange-N);
  color: var(--lumx-color-light-N);
}

/* Badge wrapper
   ========================================================================== */
.lumx-badge-wrapper {
  position: relative;
  display: inline-block;
  outline: none;
}
.lumx-badge-wrapper__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
}

/* ==========================================================================
   Button
   ========================================================================== */
.lumx-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  text-decoration: none;
  vertical-align: top;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: transparent;
  border: none;
  outline: none;
  transition-duration: 150ms;
  transition-property: padding, border-radius, background-color, color;
}
.lumx-button[class*="--is-hovered"] {
  cursor: pointer;
}
@media (hover: hover) {
.lumx-button:hover {
  cursor: pointer;
}}
.lumx-button::before {
  transition-duration: 150ms;
  transition-property: border-radius, border-width, border-color;
}
.lumx-button .lumx-badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Button sizes
   ========================================================================== */
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button {
  height: calc(var(--lumx-button-height) / 1.5);
  border-radius: var(--lumx-button-border-radius);
  padding: 0 calc(var(--lumx-button-emphasis-high-state-default-padding-horizontal) / 1.5);
}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-high-state-default-border-width);
  border-radius: var(--lumx-button-border-radius);
}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-hovered"] {
  padding: 0 calc(var(--lumx-button-emphasis-high-state-hover-padding-horizontal) / 1.5);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button:hover {
  padding: 0 calc(var(--lumx-button-emphasis-high-state-hover-padding-horizontal) / 1.5);
}}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button:hover::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button:active, .lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-active"] {
  padding: 0 calc(var(--lumx-button-emphasis-high-state-active-padding-horizontal) / 1.5);
}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button:active::before, .lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-high-state-active-border-width);
}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-icon {
  height: calc(var(--lumx-button-height) / 1.5);
  width: calc(var(--lumx-button-height) / 1.5);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-icon::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-high-state-default-border-width);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-icon[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-icon:hover::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}}
.lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-icon:active::before, .lumx-button--size-s.lumx-button--emphasis-high.lumx-button--variant-icon[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-high-state-active-border-width);
}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button {
  height: calc(var(--lumx-button-height) / 1.5);
  border-radius: var(--lumx-button-border-radius);
  padding: 0 calc(var(--lumx-button-emphasis-medium-state-default-padding-horizontal) / 1.5);
}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-medium-state-default-border-width);
  border-radius: var(--lumx-button-border-radius);
}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-hovered"] {
  padding: 0 calc(var(--lumx-button-emphasis-medium-state-hover-padding-horizontal) / 1.5);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button:hover {
  padding: 0 calc(var(--lumx-button-emphasis-medium-state-hover-padding-horizontal) / 1.5);
}}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button:hover::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button:active, .lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-active"] {
  padding: 0 calc(var(--lumx-button-emphasis-medium-state-active-padding-horizontal) / 1.5);
}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button:active::before, .lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-active-border-width);
}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-icon {
  height: calc(var(--lumx-button-height) / 1.5);
  width: calc(var(--lumx-button-height) / 1.5);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-icon::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-medium-state-default-border-width);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-icon[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-icon:hover::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}}
.lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-icon:active::before, .lumx-button--size-s.lumx-button--emphasis-medium.lumx-button--variant-icon[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-active-border-width);
}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button {
  height: calc(var(--lumx-button-height) / 1.5);
  border-radius: var(--lumx-button-border-radius);
  padding: 0 calc(var(--lumx-button-emphasis-low-state-default-padding-horizontal) / 1.5);
}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-low-state-default-border-width);
  border-radius: var(--lumx-button-border-radius);
}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-hovered"] {
  padding: 0 calc(var(--lumx-button-emphasis-low-state-hover-padding-horizontal) / 1.5);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button:hover {
  padding: 0 calc(var(--lumx-button-emphasis-low-state-hover-padding-horizontal) / 1.5);
}}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button:hover::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button:active, .lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-active"] {
  padding: 0 calc(var(--lumx-button-emphasis-low-state-active-padding-horizontal) / 1.5);
}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button:active::before, .lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-low-state-active-border-width);
}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-icon {
  height: calc(var(--lumx-button-height) / 1.5);
  width: calc(var(--lumx-button-height) / 1.5);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-icon::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-low-state-default-border-width);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-icon[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-icon:hover::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}}
.lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-icon:active::before, .lumx-button--size-s.lumx-button--emphasis-low.lumx-button--variant-icon[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-low-state-active-border-width);
}
.lumx-button--size-s.lumx-button--variant-button i:first-child {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  pointer-events: none;
  margin-right: 4px;
}
.lumx-button--size-s.lumx-button--variant-button i:last-child {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  pointer-events: none;
  margin-left: 4px;
}
.lumx-button--size-s.lumx-button--variant-icon > i, .lumx-button--size-s.lumx-button--variant-icon > img {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  pointer-events: none;
}
.lumx-button--size-s > span {
  font-family: var(--lumx-typography-custom-button-size-s-font-family);
  font-size: var(--lumx-typography-custom-button-size-s-font-size);
  font-weight: var(--lumx-typography-custom-button-size-s-font-weight);
  text-transform: var(--lumx-material-button-text-transform);
  pointer-events: none;
  line-height: calc(var(--lumx-button-height) / 1.5);
}

.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button {
  height: var(--lumx-button-height);
  border-radius: var(--lumx-button-border-radius);
  padding: 0 var(--lumx-button-emphasis-high-state-default-padding-horizontal);
}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-high-state-default-border-width);
  border-radius: var(--lumx-button-border-radius);
}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-hovered"] {
  padding: 0 var(--lumx-button-emphasis-high-state-hover-padding-horizontal);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button:hover {
  padding: 0 var(--lumx-button-emphasis-high-state-hover-padding-horizontal);
}}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button:hover::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button:active, .lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-active"] {
  padding: 0 var(--lumx-button-emphasis-high-state-active-padding-horizontal);
}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button:active::before, .lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-button[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-high-state-active-border-width);
}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-icon {
  height: var(--lumx-button-height);
  width: var(--lumx-button-height);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-icon::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-high-state-default-border-width);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-icon[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-icon:hover::before {
  border-width: var(--lumx-button-emphasis-high-state-hover-border-width);
}}
.lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-icon:active::before, .lumx-button--size-m.lumx-button--emphasis-high.lumx-button--variant-icon[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-high-state-active-border-width);
}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button {
  height: var(--lumx-button-height);
  border-radius: var(--lumx-button-border-radius);
  padding: 0 var(--lumx-button-emphasis-medium-state-default-padding-horizontal);
}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-medium-state-default-border-width);
  border-radius: var(--lumx-button-border-radius);
}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-hovered"] {
  padding: 0 var(--lumx-button-emphasis-medium-state-hover-padding-horizontal);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button:hover {
  padding: 0 var(--lumx-button-emphasis-medium-state-hover-padding-horizontal);
}}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button:hover::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button:active, .lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-active"] {
  padding: 0 var(--lumx-button-emphasis-medium-state-active-padding-horizontal);
}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button:active::before, .lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-button[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-active-border-width);
}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-icon {
  height: var(--lumx-button-height);
  width: var(--lumx-button-height);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-icon::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-medium-state-default-border-width);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-icon[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-icon:hover::before {
  border-width: var(--lumx-button-emphasis-medium-state-hover-border-width);
}}
.lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-icon:active::before, .lumx-button--size-m.lumx-button--emphasis-medium.lumx-button--variant-icon[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-medium-state-active-border-width);
}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button {
  height: var(--lumx-button-height);
  border-radius: var(--lumx-button-border-radius);
  padding: 0 var(--lumx-button-emphasis-low-state-default-padding-horizontal);
}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-low-state-default-border-width);
  border-radius: var(--lumx-button-border-radius);
}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-hovered"] {
  padding: 0 var(--lumx-button-emphasis-low-state-hover-padding-horizontal);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button:hover {
  padding: 0 var(--lumx-button-emphasis-low-state-hover-padding-horizontal);
}}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button:hover::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button:active, .lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-active"] {
  padding: 0 var(--lumx-button-emphasis-low-state-active-padding-horizontal);
}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button:active::before, .lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-button[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-low-state-active-border-width);
}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-icon {
  height: var(--lumx-button-height);
  width: var(--lumx-button-height);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-icon::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-low-state-default-border-width);
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-icon[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-icon:hover::before {
  border-width: var(--lumx-button-emphasis-low-state-hover-border-width);
}}
.lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-icon:active::before, .lumx-button--size-m.lumx-button--emphasis-low.lumx-button--variant-icon[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-low-state-active-border-width);
}
.lumx-button--size-m.lumx-button--variant-button i:first-child {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  pointer-events: none;
  margin-right: 8px;
}
.lumx-button--size-m.lumx-button--variant-button i:last-child {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  pointer-events: none;
  margin-left: 8px;
}
.lumx-button--size-m.lumx-button--variant-icon > i, .lumx-button--size-m.lumx-button--variant-icon > img {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  pointer-events: none;
}
.lumx-button--size-m > span {
  font-family: var(--lumx-typography-custom-button-size-m-font-family);
  font-size: var(--lumx-typography-custom-button-size-m-font-size);
  font-weight: var(--lumx-typography-custom-button-size-m-font-weight);
  text-transform: var(--lumx-material-button-text-transform);
  pointer-events: none;
  line-height: var(--lumx-button-height);
}

/* Button colors
   ========================================================================== */
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-blue-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-blue-D1);
}
@media (hover: hover) {
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-blue-D1);
}}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-blue-D2);
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-blue-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-blue.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-green-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-green-D1);
}
@media (hover: hover) {
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-green-D1);
}}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-green-D2);
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-green-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-green.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-yellow-N);
  color: var(--lumx-color-dark-L1);
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-yellow-D1);
}
@media (hover: hover) {
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-yellow-D1);
}}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-yellow-D2);
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-yellow-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-yellow.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-red-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-red-D1);
}
@media (hover: hover) {
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-red-D1);
}}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-red-D2);
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-red-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-red.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-grey-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-grey-N);
}
@media (hover: hover) {
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-grey-N);
}}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-grey-N);
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-grey-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-grey.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light {
  color: var(--lumx-button-emphasis-high-state-default-theme-light-color);
  background-color: var(--lumx-button-emphasis-high-state-default-theme-light-background-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: var(--lumx-button-emphasis-high-state-default-theme-light-border-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-high-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-high-state-hover-theme-light-background-color);
}
@media (hover: hover) {
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-high-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-high-state-hover-theme-light-background-color);
}}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-high-state-hover-theme-light-border-color);
}
@media (hover: hover) {
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-high-state-hover-theme-light-border-color);
}}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  color: var(--lumx-button-emphasis-high-state-active-theme-light-color);
  background-color: var(--lumx-button-emphasis-high-state-active-theme-light-background-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true])::before, .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-high-state-active-theme-light-border-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-button-emphasis-high-state-default-theme-dark-color);
  background-color: var(--lumx-button-emphasis-high-state-default-theme-dark-background-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: var(--lumx-button-emphasis-high-state-default-theme-dark-border-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-high-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-high-state-hover-theme-dark-background-color);
}
@media (hover: hover) {
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-high-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-high-state-hover-theme-dark-background-color);
}}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-high-state-hover-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-high-state-hover-theme-dark-border-color);
}}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  color: var(--lumx-button-emphasis-high-state-active-theme-dark-color);
  background-color: var(--lumx-button-emphasis-high-state-active-theme-dark-background-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true])::before, .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-high-state-active-theme-dark-border-color);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-primary.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-secondary-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-secondary-D1);
}
@media (hover: hover) {
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-secondary-D1);
}}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-secondary-D2);
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-secondary-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-secondary.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-accent-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-accent-D1);
}
@media (hover: hover) {
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-accent-D1);
}}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-accent-D2);
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-accent-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-accent.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-black-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-black-N);
}
@media (hover: hover) {
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-black-N);
}}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-black-N);
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-black-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-black.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-white-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-white-N);
}
@media (hover: hover) {
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-white-N);
}}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-white-N);
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-white-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-white.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light {
  background-color: var(--lumx-color-orange-N);
  color: var(--lumx-color-light-N);
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light::before {
  border-color: transparent;
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-hovered"] {
  background-color: var(--lumx-color-orange-D1);
}
@media (hover: hover) {
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-orange-D1);
}}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light:active:not([aria-disabled=true]), .lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-active"] {
  background-color: var(--lumx-color-orange-D2);
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light[data-focus-visible-added], .lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light:disabled, .lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-light[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark {
  color: var(--lumx-color-orange-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark::before {
  border-color: transparent;
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-hovered"] {
  background-color: var(--lumx-color-light-L1);
}
@media (hover: hover) {
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-light-L1);
}}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark:active:not([aria-disabled=true]), .lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-active"] {
  background-color: var(--lumx-color-light-L2);
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark[data-focus-visible-added], .lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark[class*="--is-focused"] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}
.lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark:disabled, .lumx-button--color-orange.lumx-button--emphasis-high.lumx-button--theme-dark[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-dark.lumx-button--emphasis-medium {
  color: var(--lumx-button-emphasis-medium-state-default-theme-light-color);
  background-color: var(--lumx-button-emphasis-medium-state-default-theme-light-background-color);
}
.lumx-button--color-dark.lumx-button--emphasis-medium::before {
  border-color: var(--lumx-button-emphasis-medium-state-default-theme-light-border-color);
}
.lumx-button--color-dark.lumx-button--emphasis-medium[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-medium-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-medium-state-hover-theme-light-background-color);
}
@media (hover: hover) {
.lumx-button--color-dark.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-medium-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-medium-state-hover-theme-light-background-color);
}}
.lumx-button--color-dark.lumx-button--emphasis-medium[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-medium-state-hover-theme-light-border-color);
}
@media (hover: hover) {
.lumx-button--color-dark.lumx-button--emphasis-medium:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-medium-state-hover-theme-light-border-color);
}}
.lumx-button--color-dark.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-dark.lumx-button--emphasis-medium[class*="--is-active"] {
  color: var(--lumx-button-emphasis-medium-state-active-theme-light-color);
  background-color: var(--lumx-button-emphasis-medium-state-active-theme-light-background-color);
}
.lumx-button--color-dark.lumx-button--emphasis-medium:active:not([aria-disabled=true])::before, .lumx-button--color-dark.lumx-button--emphasis-medium[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-medium-state-active-theme-light-border-color);
}
.lumx-button--color-dark.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-dark.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-button--color-dark.lumx-button--emphasis-medium:disabled, .lumx-button--color-dark.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-dark.lumx-button--emphasis-low {
  color: var(--lumx-button-emphasis-low-state-default-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-default-theme-light-background-color);
}
.lumx-button--color-dark.lumx-button--emphasis-low::before {
  border-color: var(--lumx-button-emphasis-low-state-default-theme-light-border-color);
}
.lumx-button--color-dark.lumx-button--emphasis-low[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-low-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-hover-theme-light-background-color);
}
@media (hover: hover) {
.lumx-button--color-dark.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-low-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-hover-theme-light-background-color);
}}
.lumx-button--color-dark.lumx-button--emphasis-low[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-low-state-hover-theme-light-border-color);
}
@media (hover: hover) {
.lumx-button--color-dark.lumx-button--emphasis-low:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-low-state-hover-theme-light-border-color);
}}
.lumx-button--color-dark.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-dark.lumx-button--emphasis-low[class*="--is-active"] {
  color: var(--lumx-button-emphasis-low-state-active-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-active-theme-light-background-color);
}
.lumx-button--color-dark.lumx-button--emphasis-low:active:not([aria-disabled=true])::before, .lumx-button--color-dark.lumx-button--emphasis-low[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-low-state-active-theme-light-border-color);
}
.lumx-button--color-dark.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-dark.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-button--color-dark.lumx-button--emphasis-low:disabled, .lumx-button--color-dark.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-light.lumx-button--emphasis-medium {
  color: var(--lumx-button-emphasis-medium-state-default-theme-dark-color);
  background-color: var(--lumx-button-emphasis-medium-state-default-theme-dark-background-color);
}
.lumx-button--color-light.lumx-button--emphasis-medium::before {
  border-color: var(--lumx-button-emphasis-medium-state-default-theme-dark-border-color);
}
.lumx-button--color-light.lumx-button--emphasis-medium[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-medium-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-medium-state-hover-theme-dark-background-color);
}
@media (hover: hover) {
.lumx-button--color-light.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-medium-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-medium-state-hover-theme-dark-background-color);
}}
.lumx-button--color-light.lumx-button--emphasis-medium[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-medium-state-hover-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-button--color-light.lumx-button--emphasis-medium:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-medium-state-hover-theme-dark-border-color);
}}
.lumx-button--color-light.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-light.lumx-button--emphasis-medium[class*="--is-active"] {
  color: var(--lumx-button-emphasis-medium-state-active-theme-dark-color);
  background-color: var(--lumx-button-emphasis-medium-state-active-theme-dark-background-color);
}
.lumx-button--color-light.lumx-button--emphasis-medium:active:not([aria-disabled=true])::before, .lumx-button--color-light.lumx-button--emphasis-medium[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-medium-state-active-theme-dark-border-color);
}
.lumx-button--color-light.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-light.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-button--color-light.lumx-button--emphasis-medium:disabled, .lumx-button--color-light.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-light.lumx-button--emphasis-low {
  color: var(--lumx-button-emphasis-low-state-default-theme-dark-color);
  background-color: var(--lumx-button-emphasis-low-state-default-theme-dark-background-color);
}
.lumx-button--color-light.lumx-button--emphasis-low::before {
  border-color: var(--lumx-button-emphasis-low-state-default-theme-dark-border-color);
}
.lumx-button--color-light.lumx-button--emphasis-low[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-low-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-low-state-hover-theme-dark-background-color);
}
@media (hover: hover) {
.lumx-button--color-light.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-low-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-low-state-hover-theme-dark-background-color);
}}
.lumx-button--color-light.lumx-button--emphasis-low[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-low-state-hover-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-button--color-light.lumx-button--emphasis-low:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-low-state-hover-theme-dark-border-color);
}}
.lumx-button--color-light.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-light.lumx-button--emphasis-low[class*="--is-active"] {
  color: var(--lumx-button-emphasis-low-state-active-theme-dark-color);
  background-color: var(--lumx-button-emphasis-low-state-active-theme-dark-background-color);
}
.lumx-button--color-light.lumx-button--emphasis-low:active:not([aria-disabled=true])::before, .lumx-button--color-light.lumx-button--emphasis-low[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-low-state-active-theme-dark-border-color);
}
.lumx-button--color-light.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-light.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-button--color-light.lumx-button--emphasis-low:disabled, .lumx-button--color-light.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-blue.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-blue-L5);
  color: var(--lumx-color-blue-D2);
}
.lumx-button--color-blue.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-blue.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-blue-L4);
}
@media (hover: hover) {
.lumx-button--color-blue.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-blue-L4);
}}
.lumx-button--color-blue.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-blue.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-blue-L3);
}
.lumx-button--color-blue.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-blue.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-blue-N);
  outline-offset: 2px;
}
.lumx-button--color-blue.lumx-button--emphasis-medium:disabled, .lumx-button--color-blue.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-blue.lumx-button--emphasis-low {
  color: var(--lumx-color-blue-D2);
  background-color: transparent;
}
.lumx-button--color-blue.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-blue.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-blue-L5);
}
@media (hover: hover) {
.lumx-button--color-blue.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-blue-L5);
}}
.lumx-button--color-blue.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-blue.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-blue-L4);
}
.lumx-button--color-blue.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-blue.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-blue-N);
  outline-offset: 2px;
}
.lumx-button--color-blue.lumx-button--emphasis-low:disabled, .lumx-button--color-blue.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-green.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-green-L5);
  color: var(--lumx-color-green-D2);
}
.lumx-button--color-green.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-green.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-green-L4);
}
@media (hover: hover) {
.lumx-button--color-green.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-green-L4);
}}
.lumx-button--color-green.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-green.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-green-L3);
}
.lumx-button--color-green.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-green.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-green-N);
  outline-offset: 2px;
}
.lumx-button--color-green.lumx-button--emphasis-medium:disabled, .lumx-button--color-green.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-green.lumx-button--emphasis-low {
  color: var(--lumx-color-green-D2);
  background-color: transparent;
}
.lumx-button--color-green.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-green.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-green-L5);
}
@media (hover: hover) {
.lumx-button--color-green.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-green-L5);
}}
.lumx-button--color-green.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-green.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-green-L4);
}
.lumx-button--color-green.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-green.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-green-N);
  outline-offset: 2px;
}
.lumx-button--color-green.lumx-button--emphasis-low:disabled, .lumx-button--color-green.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-yellow.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-yellow-L5);
  color: var(--lumx-color-dark-L1);
}
.lumx-button--color-yellow.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-yellow.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-yellow-L4);
}
@media (hover: hover) {
.lumx-button--color-yellow.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-yellow-L4);
}}
.lumx-button--color-yellow.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-yellow.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-yellow-L3);
}
.lumx-button--color-yellow.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-yellow.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-yellow-N);
  outline-offset: 2px;
}
.lumx-button--color-yellow.lumx-button--emphasis-medium:disabled, .lumx-button--color-yellow.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-yellow.lumx-button--emphasis-low {
  color: var(--lumx-color-yellow-D2);
  background-color: transparent;
}
.lumx-button--color-yellow.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-yellow.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-yellow-L5);
}
@media (hover: hover) {
.lumx-button--color-yellow.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-yellow-L5);
}}
.lumx-button--color-yellow.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-yellow.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-yellow-L4);
}
.lumx-button--color-yellow.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-yellow.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-yellow-N);
  outline-offset: 2px;
}
.lumx-button--color-yellow.lumx-button--emphasis-low:disabled, .lumx-button--color-yellow.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-red.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-red-L5);
  color: var(--lumx-color-red-D2);
}
.lumx-button--color-red.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-red.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-red-L4);
}
@media (hover: hover) {
.lumx-button--color-red.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-red-L4);
}}
.lumx-button--color-red.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-red.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-red-L3);
}
.lumx-button--color-red.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-red.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-red-N);
  outline-offset: 2px;
}
.lumx-button--color-red.lumx-button--emphasis-medium:disabled, .lumx-button--color-red.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-red.lumx-button--emphasis-low {
  color: var(--lumx-color-red-D2);
  background-color: transparent;
}
.lumx-button--color-red.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-red.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-red-L5);
}
@media (hover: hover) {
.lumx-button--color-red.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-red-L5);
}}
.lumx-button--color-red.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-red.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-red-L4);
}
.lumx-button--color-red.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-red.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-red-N);
  outline-offset: 2px;
}
.lumx-button--color-red.lumx-button--emphasis-low:disabled, .lumx-button--color-red.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-grey.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-grey-L5);
  color: var(--lumx-color-grey-N);
}
.lumx-button--color-grey.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-grey.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-grey-L4);
}
@media (hover: hover) {
.lumx-button--color-grey.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-grey-L4);
}}
.lumx-button--color-grey.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-grey.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-grey-L3);
}
.lumx-button--color-grey.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-grey.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-grey-N);
  outline-offset: 2px;
}
.lumx-button--color-grey.lumx-button--emphasis-medium:disabled, .lumx-button--color-grey.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-grey.lumx-button--emphasis-low {
  color: var(--lumx-color-grey-N);
  background-color: transparent;
}
.lumx-button--color-grey.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-grey.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-grey-L5);
}
@media (hover: hover) {
.lumx-button--color-grey.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-grey-L5);
}}
.lumx-button--color-grey.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-grey.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-grey-L4);
}
.lumx-button--color-grey.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-grey.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-grey-N);
  outline-offset: 2px;
}
.lumx-button--color-grey.lumx-button--emphasis-low:disabled, .lumx-button--color-grey.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-primary.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-primary-L5);
  color: var(--lumx-color-primary-D2);
}
.lumx-button--color-primary.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-primary.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-primary-L4);
}
@media (hover: hover) {
.lumx-button--color-primary.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-primary-L4);
}}
.lumx-button--color-primary.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-primary.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-primary-L3);
}
.lumx-button--color-primary.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-primary.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-primary-N);
  outline-offset: 2px;
}
.lumx-button--color-primary.lumx-button--emphasis-medium:disabled, .lumx-button--color-primary.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-primary.lumx-button--emphasis-low {
  color: var(--lumx-color-primary-D2);
  background-color: transparent;
}
.lumx-button--color-primary.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-primary.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-primary-L5);
}
@media (hover: hover) {
.lumx-button--color-primary.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-primary-L5);
}}
.lumx-button--color-primary.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-primary.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-primary-L4);
}
.lumx-button--color-primary.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-primary.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-primary-N);
  outline-offset: 2px;
}
.lumx-button--color-primary.lumx-button--emphasis-low:disabled, .lumx-button--color-primary.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-secondary.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-secondary-L5);
  color: var(--lumx-color-secondary-D2);
}
.lumx-button--color-secondary.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-secondary.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-secondary-L4);
}
@media (hover: hover) {
.lumx-button--color-secondary.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-secondary-L4);
}}
.lumx-button--color-secondary.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-secondary.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-secondary-L3);
}
.lumx-button--color-secondary.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-secondary.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-secondary-N);
  outline-offset: 2px;
}
.lumx-button--color-secondary.lumx-button--emphasis-medium:disabled, .lumx-button--color-secondary.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-secondary.lumx-button--emphasis-low {
  color: var(--lumx-color-secondary-D2);
  background-color: transparent;
}
.lumx-button--color-secondary.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-secondary.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-secondary-L5);
}
@media (hover: hover) {
.lumx-button--color-secondary.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-secondary-L5);
}}
.lumx-button--color-secondary.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-secondary.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-secondary-L4);
}
.lumx-button--color-secondary.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-secondary.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-secondary-N);
  outline-offset: 2px;
}
.lumx-button--color-secondary.lumx-button--emphasis-low:disabled, .lumx-button--color-secondary.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-accent.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-accent-L5);
  color: var(--lumx-color-accent-D2);
}
.lumx-button--color-accent.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-accent.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-accent-L4);
}
@media (hover: hover) {
.lumx-button--color-accent.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-accent-L4);
}}
.lumx-button--color-accent.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-accent.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-accent-L3);
}
.lumx-button--color-accent.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-accent.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-accent-N);
  outline-offset: 2px;
}
.lumx-button--color-accent.lumx-button--emphasis-medium:disabled, .lumx-button--color-accent.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-accent.lumx-button--emphasis-low {
  color: var(--lumx-color-accent-D2);
  background-color: transparent;
}
.lumx-button--color-accent.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-accent.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-accent-L5);
}
@media (hover: hover) {
.lumx-button--color-accent.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-accent-L5);
}}
.lumx-button--color-accent.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-accent.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-accent-L4);
}
.lumx-button--color-accent.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-accent.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-accent-N);
  outline-offset: 2px;
}
.lumx-button--color-accent.lumx-button--emphasis-low:disabled, .lumx-button--color-accent.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-black.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-black-L5);
  color: var(--lumx-color-black-N);
}
.lumx-button--color-black.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-black.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-black-L4);
}
@media (hover: hover) {
.lumx-button--color-black.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-black-L4);
}}
.lumx-button--color-black.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-black.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-black-L3);
}
.lumx-button--color-black.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-black.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-black-N);
  outline-offset: 2px;
}
.lumx-button--color-black.lumx-button--emphasis-medium:disabled, .lumx-button--color-black.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-black.lumx-button--emphasis-low {
  color: var(--lumx-color-black-N);
  background-color: transparent;
}
.lumx-button--color-black.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-black.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-black-L5);
}
@media (hover: hover) {
.lumx-button--color-black.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-black-L5);
}}
.lumx-button--color-black.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-black.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-black-L4);
}
.lumx-button--color-black.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-black.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-black-N);
  outline-offset: 2px;
}
.lumx-button--color-black.lumx-button--emphasis-low:disabled, .lumx-button--color-black.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-white.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-white-L5);
  color: var(--lumx-color-white-N);
}
.lumx-button--color-white.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-white.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-white-L4);
}
@media (hover: hover) {
.lumx-button--color-white.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-white-L4);
}}
.lumx-button--color-white.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-white.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-white-L3);
}
.lumx-button--color-white.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-white.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-white-N);
  outline-offset: 2px;
}
.lumx-button--color-white.lumx-button--emphasis-medium:disabled, .lumx-button--color-white.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-white.lumx-button--emphasis-low {
  color: var(--lumx-color-white-N);
  background-color: transparent;
}
.lumx-button--color-white.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-white.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-white-L5);
}
@media (hover: hover) {
.lumx-button--color-white.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-white-L5);
}}
.lumx-button--color-white.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-white.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-white-L4);
}
.lumx-button--color-white.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-white.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-white-N);
  outline-offset: 2px;
}
.lumx-button--color-white.lumx-button--emphasis-low:disabled, .lumx-button--color-white.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

.lumx-button--color-orange.lumx-button--emphasis-medium {
  background-color: var(--lumx-color-orange-L5);
  color: var(--lumx-color-orange-D2);
}
.lumx-button--color-orange.lumx-button--emphasis-medium::before {
  border-color: transparent;
}
.lumx-button--color-orange.lumx-button--emphasis-medium[class*="--is-hovered"] {
  background-color: var(--lumx-color-orange-L4);
}
@media (hover: hover) {
.lumx-button--color-orange.lumx-button--emphasis-medium:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-orange-L4);
}}
.lumx-button--color-orange.lumx-button--emphasis-medium:active:not([aria-disabled=true]), .lumx-button--color-orange.lumx-button--emphasis-medium[class*="--is-active"] {
  background-color: var(--lumx-color-orange-L3);
}
.lumx-button--color-orange.lumx-button--emphasis-medium[data-focus-visible-added], .lumx-button--color-orange.lumx-button--emphasis-medium[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-orange-N);
  outline-offset: 2px;
}
.lumx-button--color-orange.lumx-button--emphasis-medium:disabled, .lumx-button--color-orange.lumx-button--emphasis-medium[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button--color-orange.lumx-button--emphasis-low {
  color: var(--lumx-color-orange-D2);
  background-color: transparent;
}
.lumx-button--color-orange.lumx-button--emphasis-low::before {
  border-color: transparent;
}
.lumx-button--color-orange.lumx-button--emphasis-low[class*="--is-hovered"] {
  background-color: var(--lumx-color-orange-L5);
}
@media (hover: hover) {
.lumx-button--color-orange.lumx-button--emphasis-low:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-orange-L5);
}}
.lumx-button--color-orange.lumx-button--emphasis-low:active:not([aria-disabled=true]), .lumx-button--color-orange.lumx-button--emphasis-low[class*="--is-active"] {
  background-color: var(--lumx-color-orange-L4);
}
.lumx-button--color-orange.lumx-button--emphasis-low[data-focus-visible-added], .lumx-button--color-orange.lumx-button--emphasis-low[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-orange-N);
  outline-offset: 2px;
}
.lumx-button--color-orange.lumx-button--emphasis-low:disabled, .lumx-button--color-orange.lumx-button--emphasis-low[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

/* Button selected
   ========================================================================== */
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-button-emphasis-selected-state-default-border-width);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium[class*="--is-hovered"]::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low[class*="--is-hovered"]::before {
  border-width: var(--lumx-button-emphasis-selected-state-hover-border-width);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium:hover::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low:hover::before {
  border-width: var(--lumx-button-emphasis-selected-state-hover-border-width);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium:active::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium[class*="--is-active"]::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low:active::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low[class*="--is-active"]::before {
  border-width: var(--lumx-button-emphasis-selected-state-active-border-width);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected {
  color: var(--lumx-button-emphasis-selected-state-default-theme-light-color);
  background-color: var(--lumx-button-emphasis-selected-state-default-theme-light-background-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected::before {
  border-color: var(--lumx-button-emphasis-selected-state-default-theme-light-border-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-selected-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-selected-state-hover-theme-light-background-color);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-selected-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-selected-state-hover-theme-light-background-color);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected[class*="--is-hovered"]::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-selected-state-hover-theme-light-border-color);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected:hover:not([aria-disabled=true])::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-selected-state-hover-theme-light-border-color);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected[class*="--is-active"] {
  color: var(--lumx-button-emphasis-selected-state-active-theme-light-color);
  background-color: var(--lumx-button-emphasis-selected-state-active-theme-light-background-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected:active:not([aria-disabled=true])::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected[class*="--is-active"]::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected:active:not([aria-disabled=true])::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-selected-state-active-theme-light-border-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-dark.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-dark.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected {
  color: var(--lumx-button-emphasis-selected-state-default-theme-dark-color);
  background-color: var(--lumx-button-emphasis-selected-state-default-theme-dark-background-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected::before {
  border-color: var(--lumx-button-emphasis-selected-state-default-theme-dark-border-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-selected-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-selected-state-hover-theme-dark-background-color);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-selected-state-hover-theme-dark-color);
  background-color: var(--lumx-button-emphasis-selected-state-hover-theme-dark-background-color);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected[class*="--is-hovered"]::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-selected-state-hover-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected:hover:not([aria-disabled=true])::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-selected-state-hover-theme-dark-border-color);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected[class*="--is-active"] {
  color: var(--lumx-button-emphasis-selected-state-active-theme-dark-color);
  background-color: var(--lumx-button-emphasis-selected-state-active-theme-dark-background-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected:active:not([aria-disabled=true])::before, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected[class*="--is-active"]::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected:active:not([aria-disabled=true])::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-selected-state-active-theme-dark-border-color);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-light.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-light.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected {
  background-color: var(--lumx-color-blue-L5);
  color: var(--lumx-color-blue-D2);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-blue-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-blue-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-blue-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-blue-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-blue.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-blue.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected {
  background-color: var(--lumx-color-green-L5);
  color: var(--lumx-color-green-D2);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-green-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-green-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-green-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-green-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-green.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-green.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected {
  background-color: var(--lumx-color-yellow-L5);
  color: var(--lumx-color-dark-L1);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-yellow-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-yellow-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-yellow-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-yellow-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-yellow.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-yellow.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected {
  background-color: var(--lumx-color-red-L5);
  color: var(--lumx-color-red-D2);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-red-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-red-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-red-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-red-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-red.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-red.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected {
  background-color: var(--lumx-color-grey-L5);
  color: var(--lumx-color-grey-N);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-grey-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-grey-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-grey-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-grey-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-grey.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-grey.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected {
  background-color: var(--lumx-color-primary-L5);
  color: var(--lumx-color-primary-D2);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-primary-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-primary-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-primary-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-primary-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-primary.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-primary.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected {
  background-color: var(--lumx-color-secondary-L5);
  color: var(--lumx-color-secondary-D2);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-secondary-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-secondary-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-secondary-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-secondary-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-secondary.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-secondary.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected {
  background-color: var(--lumx-color-accent-L5);
  color: var(--lumx-color-accent-D2);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-accent-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-accent-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-accent-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-accent-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-accent.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-accent.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected {
  background-color: var(--lumx-color-black-L5);
  color: var(--lumx-color-black-N);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-black-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-black-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-black-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-black-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-black.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-black.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected {
  background-color: var(--lumx-color-white-L5);
  color: var(--lumx-color-white-N);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-white-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-white-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-white-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-white-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-white.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-white.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected {
  background-color: var(--lumx-color-orange-L5);
  color: var(--lumx-color-orange-D2);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected::before,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected::before {
  border-color: transparent;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected[class*="--is-hovered"], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected[class*="--is-hovered"] {
  background-color: var(--lumx-color-orange-L4);
}
@media (hover: hover) {
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected:hover:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected:hover:not([aria-disabled=true]) {
  background-color: var(--lumx-color-orange-L4);
}}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected:active:not([aria-disabled=true]), .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected[class*="--is-active"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected:active:not([aria-disabled=true]),
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected[class*="--is-active"] {
  background-color: var(--lumx-color-orange-L3);
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected[data-focus-visible-added], .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected[class*="--is-focused"],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected[data-focus-visible-added],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-orange-N);
  outline-offset: 2px;
}
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected:disabled, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium.lumx-button--color-orange.lumx-button--is-selected[aria-disabled=true],
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected:disabled,
.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low.lumx-button--color-orange.lumx-button--is-selected[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}

/* Button wrapper
   ========================================================================== */
.lumx-button-wrapper {
  width: -moz-fit-content;
  width: fit-content;
}
.lumx-button-wrapper--variant-button {
  border-radius: var(--lumx-border-radius);
}
.lumx-button-wrapper--variant-icon {
  border-radius: var(--lumx-material-button-variant-icon-border-radius, var(--lumx-button-border-radius));
}
.lumx-button-wrapper--color-light {
  background-color: var(--lumx-color-light-N);
}
.lumx-button-wrapper--color-dark {
  background-color: var(--lumx-color-dark-N);
}

/* Button group
   ========================================================================== */
.lumx-button-group {
  display: inline-flex;
  vertical-align: top;
  gap: 1px;
}
.lumx-button-group .lumx-button:not(:last-of-type:not(.visually-hidden)), .lumx-button-group .lumx-button:not(:last-of-type:not(.visually-hidden))::before {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.lumx-button-group .lumx-button:not(:first-of-type:not(.visually-hidden)), .lumx-button-group .lumx-button:not(:first-of-type:not(.visually-hidden))::before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Button full width
   ========================================================================== */
.lumx-button--is-full-width:not(.lumx-button--variant-icon),
.lumx-button-wrapper--is-full-width:not(.lumx-button-wrapper--variant-icon) {
  flex-grow: 1;
  width: 100%;
}

/* ==========================================================================
   Checkbox
   ========================================================================== */
.lumx-checkbox {
  display: flex;
}
.lumx-checkbox__input-wrapper {
  position: relative;
  width: var(--lumx-material-checkbox-wrapper-size);
  height: var(--lumx-material-checkbox-wrapper-size);
}
.lumx-checkbox__input-native {
  position: relative;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--lumx-material-checkbox-wrapper-size);
  height: var(--lumx-material-checkbox-wrapper-size);
  padding: 0;
  margin: 0;
  opacity: 0;
}
.lumx-checkbox__input-placeholder {
  position: absolute;
  top: calc((var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
  left: calc((var(--lumx-material-checkbox-wrapper-size) - var(--lumx-material-checkbox-control-size)) / 2);
  z-index: 1;
  width: var(--lumx-material-checkbox-control-size);
  height: var(--lumx-material-checkbox-control-size);
  border-radius: 2px;
}
.lumx-checkbox__input-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-style: solid;
  border-width: 2px;
  border-radius: 2px;
}
.lumx-checkbox--theme-light .lumx-checkbox__input-background {
  color: var(--lumx-color-dark-N);
  background-color: transparent;
}
.lumx-checkbox--theme-dark .lumx-checkbox__input-background {
  color: var(--lumx-color-light-N);
  background-color: transparent;
}
.lumx-checkbox--is-unchecked .lumx-checkbox__input-background {
  opacity: 1;
}
.lumx-checkbox--is-checked .lumx-checkbox__input-background {
  opacity: 0;
}
.lumx-checkbox__input-indicator {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--lumx-material-checkbox-control-size);
  border-radius: 2px;
}
.lumx-checkbox--theme-light .lumx-checkbox__input-indicator {
  background-color: var(--lumx-color-primary-N);
  color: var(--lumx-color-light-N);
}
.lumx-checkbox--theme-dark .lumx-checkbox__input-indicator {
  color: var(--lumx-color-primary-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-checkbox--is-unchecked .lumx-checkbox__input-indicator {
  opacity: 0;
}
.lumx-checkbox--is-checked .lumx-checkbox__input-indicator {
  opacity: 1;
}
.lumx-checkbox__label, .lumx-checkbox__helper {
  padding-left: 8px;
}
.lumx-checkbox__helper {
  margin-top: 4px;
}

/* Checkbox states
   ========================================================================== */
.lumx-checkbox--is-disabled .lumx-checkbox__input-placeholder {
  opacity: 0.5;
  cursor: default;
}
.lumx-checkbox--is-disabled.lumx-checkbox--theme-light .lumx-checkbox__label,
.lumx-checkbox--is-disabled.lumx-checkbox--theme-light .lumx-checkbox__helper {
  color: var(--lumx-color-dark-L3);
}
.lumx-checkbox--is-disabled.lumx-checkbox--theme-dark .lumx-checkbox__label,
.lumx-checkbox--is-disabled.lumx-checkbox--theme-dark .lumx-checkbox__helper {
  color: var(--lumx-color-light-L3);
}

@media (hover: hover) {

:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-light.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder .lumx-checkbox__input-background {
  background-color: var(--lumx-color-dark-L5);
}}
@media (hover: hover) {
:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder .lumx-checkbox__input-background {
  background-color: var(--lumx-color-light-L5);
}}
@media (hover: hover) {
:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-light.lumx-checkbox--is-checked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder .lumx-checkbox__input-indicator {
  background-color: var(--lumx-color-primary-D1);
}}
@media (hover: hover) {
:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-dark.lumx-checkbox--is-checked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder .lumx-checkbox__input-indicator {
  background-color: var(--lumx-color-light-L1);
}}
:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-light.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder .lumx-checkbox__input-background {
  background-color: var(--lumx-color-dark-L4);
}
:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder .lumx-checkbox__input-background {
  background-color: var(--lumx-color-light-L4);
}
:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-light.lumx-checkbox--is-checked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder .lumx-checkbox__input-indicator {
  background-color: var(--lumx-color-primary-D2);
}
:not(.lumx-checkbox--is-disabled).lumx-checkbox--theme-dark.lumx-checkbox--is-checked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder .lumx-checkbox__input-indicator {
  background-color: var(--lumx-color-light-L2);
}

.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}

.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

.lumx-checkbox--theme-light.lumx-checkbox--is-checked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}

.lumx-checkbox--theme-dark.lumx-checkbox--is-checked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}

/* ==========================================================================
   Chip
   ========================================================================== */
.lumx-chip {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  text-decoration: none;
  vertical-align: top;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: none;
  outline: none;
}
.lumx-chip__before {
  flex-shrink: 0;
  margin-right: 8px;
}
.lumx-chip--size-m .lumx-chip__label {
  flex: 1 1 auto;
  white-space: nowrap;
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-chip--size-s .lumx-chip__label {
  flex: 1 1 auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: var(--lumx-typography-interface-caption-font-weight);
  line-height: 16px;
}
.lumx-chip__after {
  flex-shrink: 0;
  margin-left: 8px;
}

/* Chip size
   ========================================================================== */
.lumx-chip--size-m {
  height: var(--lumx-material-chip-size-m-height);
  border-radius: var(--lumx-material-chip-size-m-border-radius);
  padding: 0 var(--lumx-material-chip-size-m-padding-vertical);
}
.lumx-chip--size-m.lumx-chip--has-before {
  padding-left: 12px;
}
.lumx-chip--size-m.lumx-chip--has-after {
  padding-right: 12px;
}

.lumx-chip--size-s {
  height: var(--lumx-material-chip-size-s-height);
  border-radius: var(--lumx-material-chip-size-s-border-radius);
  padding: 0 var(--lumx-material-chip-size-s-padding-vertical);
}
.lumx-chip--size-s.lumx-chip--has-before {
  padding-left: 8px;
}
.lumx-chip--size-s.lumx-chip--has-after {
  padding-right: 8px;
}

/* Chip states
   ========================================================================== */
.lumx-chip--is-clickable {
  transition-duration: 150ms;
  transition-property: background-color, box-shadow, color;
  cursor: pointer;
}

.lumx-chip--is-unselected.lumx-chip--color-dark {
  background-color: var(--lumx-color-dark-L5);
  color: var(--lumx-color-dark-N);
}
.lumx-chip--is-unselected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-dark-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-dark-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-dark-L3);
}
.lumx-chip--is-unselected.lumx-chip--color-dark .lumx-chip__label {
  color: var(--lumx-color-dark-L1);
}

.lumx-chip--color-dark[data-focus-visible-added], .lumx-chip--color-dark.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-light {
  background-color: var(--lumx-color-light-L5);
  color: var(--lumx-color-light-N);
}
.lumx-chip--is-unselected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-light-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-light-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-light-L3);
}

.lumx-chip--color-light[data-focus-visible-added], .lumx-chip--color-light.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-blue {
  background-color: var(--lumx-color-blue-L5);
  color: var(--lumx-color-blue-D2);
}
.lumx-chip--is-unselected.lumx-chip--color-blue.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-blue-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-blue.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-blue-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-blue.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-blue.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-blue-L3);
}

.lumx-chip--color-blue[data-focus-visible-added], .lumx-chip--color-blue.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-blue-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-green {
  background-color: var(--lumx-color-green-L5);
  color: var(--lumx-color-green-D2);
}
.lumx-chip--is-unselected.lumx-chip--color-green.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-green-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-green.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-green-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-green.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-green.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-green-L3);
}

.lumx-chip--color-green[data-focus-visible-added], .lumx-chip--color-green.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-green-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-yellow {
  background-color: var(--lumx-color-yellow-L5);
  color: var(--lumx-color-dark-L1);
}
.lumx-chip--is-unselected.lumx-chip--color-yellow.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-yellow-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-yellow.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-yellow-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-yellow.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-yellow.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-yellow-L3);
}

.lumx-chip--color-yellow[data-focus-visible-added], .lumx-chip--color-yellow.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-yellow-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-red {
  background-color: var(--lumx-color-red-L5);
  color: var(--lumx-color-red-D2);
}
.lumx-chip--is-unselected.lumx-chip--color-red.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-red-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-red.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-red-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-red.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-red.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-red-L3);
}

.lumx-chip--color-red[data-focus-visible-added], .lumx-chip--color-red.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-red-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-grey {
  background-color: var(--lumx-color-grey-L5);
  color: var(--lumx-color-grey-N);
}
.lumx-chip--is-unselected.lumx-chip--color-grey.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-grey-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-grey.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-grey-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-grey.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-grey.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-grey-L3);
}

.lumx-chip--color-grey[data-focus-visible-added], .lumx-chip--color-grey.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-grey-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-primary {
  background-color: var(--lumx-color-primary-L5);
  color: var(--lumx-color-primary-D2);
}
.lumx-chip--is-unselected.lumx-chip--color-primary.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-primary-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-primary.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-primary-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-primary.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-primary.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-primary-L3);
}

.lumx-chip--color-primary[data-focus-visible-added], .lumx-chip--color-primary.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-primary-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-secondary {
  background-color: var(--lumx-color-secondary-L5);
  color: var(--lumx-color-secondary-D2);
}
.lumx-chip--is-unselected.lumx-chip--color-secondary.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-secondary-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-secondary.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-secondary-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-secondary.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-secondary.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-secondary-L3);
}

.lumx-chip--color-secondary[data-focus-visible-added], .lumx-chip--color-secondary.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-secondary-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-accent {
  background-color: var(--lumx-color-accent-L5);
  color: var(--lumx-color-accent-D2);
}
.lumx-chip--is-unselected.lumx-chip--color-accent.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-accent-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-accent.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-accent-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-accent.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-accent.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-accent-L3);
}

.lumx-chip--color-accent[data-focus-visible-added], .lumx-chip--color-accent.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-accent-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-black {
  background-color: var(--lumx-color-black-L5);
  color: var(--lumx-color-black-N);
}
.lumx-chip--is-unselected.lumx-chip--color-black.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-black-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-black.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-black-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-black.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-black.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-black-L3);
}

.lumx-chip--color-black[data-focus-visible-added], .lumx-chip--color-black.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-black-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-white {
  background-color: var(--lumx-color-white-L5);
  color: var(--lumx-color-white-N);
}
.lumx-chip--is-unselected.lumx-chip--color-white.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-white-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-white.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-white-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-white.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-white.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-white-L3);
}

.lumx-chip--color-white[data-focus-visible-added], .lumx-chip--color-white.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-white-N);
  outline-offset: 2px;
}

.lumx-chip--is-unselected.lumx-chip--color-orange {
  background-color: var(--lumx-color-orange-L5);
  color: var(--lumx-color-orange-D2);
}
.lumx-chip--is-unselected.lumx-chip--color-orange.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-color-orange-L4);
}
@media (hover: hover) {
.lumx-chip--is-unselected.lumx-chip--color-orange.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-orange-L4);
}}
.lumx-chip--is-unselected.lumx-chip--color-orange.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-unselected.lumx-chip--color-orange.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-orange-L3);
}

.lumx-chip--color-orange[data-focus-visible-added], .lumx-chip--color-orange.lumx-chip--is-highlighted {
  outline: 2px solid var(--lumx-color-orange-N);
  outline-offset: 2px;
}

.lumx-chip--is-selected.lumx-chip--color-dark {
  color: var(--lumx-color-primary-D2);
  background-color: var(--lumx-chip-emphasis-selected-state-default-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-default-border-width) var(--lumx-chip-emphasis-selected-state-default-theme-light-border-color);
}
.lumx-chip--is-selected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-chip-emphasis-selected-state-hover-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-hover-border-width) var(--lumx-chip-emphasis-selected-state-hover-theme-light-border-color);
}
@media (hover: hover) {
.lumx-chip--is-selected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-chip-emphasis-selected-state-hover-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-hover-border-width) var(--lumx-chip-emphasis-selected-state-hover-theme-light-border-color);
}}
.lumx-chip--is-selected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-selected.lumx-chip--color-dark.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-chip-emphasis-selected-state-active-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-active-border-width) var(--lumx-chip-emphasis-selected-state-active-theme-light-border-color);
}
.lumx-chip--is-selected.lumx-chip--color-dark.lumx-chip--is-clickable[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-chip--is-selected.lumx-chip--color-light {
  color: var(--lumx-color-light-N);
  background-color: var(--lumx-chip-emphasis-selected-state-default-theme-dark-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-default-border-width) var(--lumx-chip-emphasis-selected-state-default-theme-dark-border-color);
}
.lumx-chip--is-selected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-hover] {
  background-color: var(--lumx-chip-emphasis-selected-state-hover-theme-dark-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-hover-border-width) var(--lumx-chip-emphasis-selected-state-hover-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-chip--is-selected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true]):hover {
  background-color: var(--lumx-chip-emphasis-selected-state-hover-theme-dark-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-hover-border-width) var(--lumx-chip-emphasis-selected-state-hover-theme-dark-border-color);
}}
.lumx-chip--is-selected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true]):active, .lumx-chip--is-selected.lumx-chip--color-light.lumx-chip--is-clickable:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-chip-emphasis-selected-state-active-theme-dark-background-color);
  box-shadow: inset 0 0 0 var(--lumx-chip-emphasis-selected-state-active-border-width) var(--lumx-chip-emphasis-selected-state-active-theme-dark-border-color);
}
.lumx-chip--is-selected.lumx-chip--color-light.lumx-chip--is-clickable[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

.lumx-chip--is-disabled {
  opacity: 0.5;
  cursor: default;
}

/* Chip group
   ========================================================================== */
.lumx-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Selection Chip group
   ========================================================================== */
.lumx-selection-chip-group {
  align-content: flex-start;
}
.lumx-selection-chip-group, .lumx-selection-chip-group .lumx-chip, .lumx-selection-chip-group .lumx-chip__label {
  min-width: 0;
}

/* ==========================================================================
   Combobox
   ========================================================================== */
.lumx-combobox-input .lumx-text-field__chips {
  width: -moz-min-content;
  width: min-content;
  min-width: 0;
}

.lumx-combobox-popover {
  max-height: 50vh;
  color: var(--lumx-color-dark-N);
}
.lumx-combobox-popover__scroll {
  overflow-y: auto;
  scroll-snap-type: y proximity;
}
@media (prefers-reduced-motion: no-preference) {
  .lumx-combobox-popover__scroll {
    scroll-behavior: smooth;
  }
}
.lumx-combobox-popover__scroll::before {
  content: "";
  display: block;
  scroll-snap-align: start;
}
.lumx-combobox-popover__scroll::after {
  content: "";
  display: block;
  scroll-snap-align: end;
}

.lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),
.lumx-combobox-list:empty,
.lumx-combobox-list:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)) {
  display: none;
}

.lumx-combobox-state {
  text-align: center;
}

.lumx-combobox-option-skeleton .lumx-skeleton-typography {
  width: min(65%, 200px);
}
.lumx-combobox-option-skeleton:nth-child(3n+1) .lumx-skeleton-typography {
  width: min(70%, 230px);
}
.lumx-combobox-option-skeleton:nth-child(3n+2) .lumx-skeleton-typography {
  width: min(55%, 170px);
}
.lumx-combobox-option .lumx-list-item__content {
  display: flex;
  flex-direction: column;
  justify-items: center;
}
.lumx-combobox-option-more-info__popover {
  max-width: 256px;
  padding: 16px;
}

/* ==========================================================================
   Comment block
   ========================================================================== */
.lumx-comment-block {
  position: relative;
  margin-bottom: 16px;
}
.lumx-comment-block:last-child {
  margin-bottom: 0;
}
.lumx-comment-block--has-children.lumx-comment-block--has-indented-children .lumx-comment-block::before {
  position: absolute;
  top: 52px;
  bottom: 0;
  left: 16px;
  width: 4px;
  content: "";
}
.lumx-comment-block--has-children.lumx-comment-block--has-indented-children.lumx-comment-block--theme-light .lumx-comment-block::before {
  background-color: var(--lumx-color-dark-L5);
}
.lumx-comment-block--has-children.lumx-comment-block--has-indented-children.lumx-comment-block--theme-dark .lumx-comment-block::before {
  background-color: var(--lumx-color-light-L5);
}
.lumx-comment-block--has-children.lumx-comment-block--has-indented-children .lumx-comment-block:last-child::before {
  display: none;
}
.lumx-comment-block__wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.lumx-comment-block--has-linear-children.lumx-comment-block--has-children .lumx-comment-block__wrapper::before {
  position: absolute;
  top: 52px;
  bottom: 0;
  left: 16px;
  width: 4px;
  content: "";
}
.lumx-comment-block--has-linear-children.lumx-comment-block--has-children.lumx-comment-block--theme-light .lumx-comment-block__wrapper::before {
  background-color: var(--lumx-color-dark-L5);
}
.lumx-comment-block--has-linear-children.lumx-comment-block--has-children.lumx-comment-block--theme-dark .lumx-comment-block__wrapper::before {
  background-color: var(--lumx-color-light-L5);
}
.lumx-comment-block--has-linear-children .lumx-comment-block__children .lumx-comment-block:last-child .lumx-comment-block__wrapper::before {
  display: none;
}
.lumx-comment-block__avatar {
  flex-shrink: 0;
  margin-right: 16px;
}
.lumx-comment-block__container {
  flex: 1 1 auto;
}
.lumx-comment-block__content {
  position: relative;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: var(--lumx-border-radius);
}
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__content {
  background-color: var(--lumx-color-dark-L6);
}
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__content {
  background-color: var(--lumx-color-light-L6);
}
.lumx-comment-block--is-relevant > .lumx-comment-block__wrapper .lumx-comment-block__content::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background-color: var(--lumx-color-green-N);
}
.lumx-comment-block__meta {
  display: flex;
  flex-wrap: wrap;
}
.lumx-comment-block__name {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
  margin-right: 8px;
  outline: none;
}
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name {
  color: var(--lumx-color-dark-N);
}
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name {
  color: var(--lumx-color-light-N);
}
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"] {
  display: inline;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  color: var(--lumx-color-dark-N);
}
:where(.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"] --has-typography)) {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(:disabled):not([aria-disabled=true])[data-lumx-hover], .lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(:disabled):not([aria-disabled=true])[data-focus-visible-added] {
  text-decoration: underline;
}
@media (hover: hover) {
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(:disabled):not([aria-disabled=true]):hover {
  text-decoration: underline;
}}
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"][data-focus-visible-added], .lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:focus-visible {
  outline: 1px auto currentColor;
  outline-offset: 2px;
}
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"] {
  display: inline;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  color: var(--lumx-color-light-N);
}
:where(.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"] --has-typography)) {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(:disabled):not([aria-disabled=true])[data-lumx-hover], .lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(:disabled):not([aria-disabled=true])[data-focus-visible-added] {
  text-decoration: underline;
}
@media (hover: hover) {
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:not(:disabled):not([aria-disabled=true]):hover {
  text-decoration: underline;
}}
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"][data-focus-visible-added], .lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__name[tabindex="0"]:focus-visible {
  outline: 1px auto currentColor;
  outline-offset: 2px;
}
.lumx-comment-block__date {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__date {
  color: var(--lumx-color-dark-L2);
}
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__date {
  color: var(--lumx-color-light-L2);
}
.lumx-comment-block__header-actions {
  margin-left: auto;
}
.lumx-comment-block__text {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  word-break: break-word;
}
.lumx-comment-block--theme-light > .lumx-comment-block__wrapper .lumx-comment-block__text {
  color: var(--lumx-color-dark-N);
}
.lumx-comment-block--theme-dark > .lumx-comment-block__wrapper .lumx-comment-block__text {
  color: var(--lumx-color-light-N);
}
.lumx-comment-block__actions {
  margin-top: 8px;
}
.lumx-comment-block__children {
  margin-top: 16px;
}
.lumx-comment-block--has-indented-children .lumx-comment-block__children {
  margin-left: 52px;
}

/* ==========================================================================
   Date picker
   ========================================================================== */
.lumx-date-picker__month {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
  display: block;
  text-align: center;
}
.lumx-date-picker__year input[type=number] {
  width: 6ch;
}
.lumx-date-picker__calendar {
  padding: 16px;
  padding-top: 0;
}
.lumx-date-picker__days-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 252px;
}
.lumx-date-picker__day-wrapper {
  display: flex;
  flex: 0 0 14.2857142857%;
  align-items: center;
  justify-content: center;
  max-width: 14.2857142857%;
  height: 36px;
}
.lumx-date-picker__week-day {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  display: block;
  color: var(--lumx-color-dark-L2);
}
.lumx-date-picker__month-day {
  transition-duration: 150ms;
  transition-property: background-color, box-shadow, color;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  text-decoration: none;
  vertical-align: top;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: transparent;
  border: none;
  outline: none;
  transition-duration: 150ms;
  transition-property: padding, border-radius, background-color, color;
  color: var(--lumx-button-emphasis-low-state-default-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-default-theme-light-background-color);
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
}
.lumx-date-picker__month-day[class*="--is-hovered"] {
  cursor: pointer;
}
@media (hover: hover) {
.lumx-date-picker__month-day:hover {
  cursor: pointer;
}}
.lumx-date-picker__month-day::before {
  transition-duration: 150ms;
  transition-property: border-radius, border-width, border-color;
}
.lumx-date-picker__month-day::before {
  border-color: var(--lumx-button-emphasis-low-state-default-theme-light-border-color);
}
.lumx-date-picker__month-day[class*="--is-hovered"] {
  color: var(--lumx-button-emphasis-low-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-hover-theme-light-background-color);
}
@media (hover: hover) {
.lumx-date-picker__month-day:hover:not([aria-disabled=true]) {
  color: var(--lumx-button-emphasis-low-state-hover-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-hover-theme-light-background-color);
}}
.lumx-date-picker__month-day[class*="--is-hovered"]::before {
  border-color: var(--lumx-button-emphasis-low-state-hover-theme-light-border-color);
}
@media (hover: hover) {
.lumx-date-picker__month-day:hover:not([aria-disabled=true])::before {
  border-color: var(--lumx-button-emphasis-low-state-hover-theme-light-border-color);
}}
.lumx-date-picker__month-day:active:not([aria-disabled=true]), .lumx-date-picker__month-day[class*="--is-active"] {
  color: var(--lumx-button-emphasis-low-state-active-theme-light-color);
  background-color: var(--lumx-button-emphasis-low-state-active-theme-light-background-color);
}
.lumx-date-picker__month-day:active:not([aria-disabled=true])::before, .lumx-date-picker__month-day[class*="--is-active"]::before {
  border-color: var(--lumx-button-emphasis-low-state-active-theme-light-border-color);
}
.lumx-date-picker__month-day[data-focus-visible-added], .lumx-date-picker__month-day[class*="--is-focused"] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-date-picker__month-day:disabled, .lumx-date-picker__month-day[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-date-picker__month-day span {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-date-picker__month-day--is-today span {
  font-weight: var(--lumx-button-font-weight);
}

/* ==========================================================================
   Dialog
   ========================================================================== */
.lumx-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: none;
  opacity: 1;
  transition: opacity 400ms;
}
@media (prefers-reduced-motion: reduce) {
  .lumx-dialog {
    transition: none;
  }
}
.lumx-dialog--is-shown {
  display: block;
}
.lumx-dialog--is-hidden {
  opacity: 0;
}
.lumx-dialog__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: var(--lumx-color-dark-L1);
  animation: lumx-dialog-overlay-show 400ms;
}
@media (max-width: 61.24em) {
  .lumx-dialog__overlay {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lumx-dialog__overlay {
    animation: none;
  }
}
.lumx-dialog__container {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
}
@media (max-width: 61.24em) {
  .lumx-dialog--is-hidden .lumx-dialog__container {
    transform: translateY(100%);
  }
}
@media (max-width: 61.24em) {
  .lumx-dialog__container {
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    animation: lumx-dialog-show-mobile 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
}
@media (min-width: 61.25em) {
  .lumx-dialog__container {
    animation: lumx-dialog-show-desktop 400ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lumx-dialog__container {
    animation: none;
  }
}
.lumx-dialog__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--lumx-color-light-N);
}
@media (max-width: 61.24em) {
  .lumx-dialog__wrapper {
    min-height: 100%;
  }
}
@media (min-width: 61.25em) {
  .lumx-dialog__wrapper {
    box-shadow: 0 8px 32px 0 var(--lumx-color-dark-L4);
    max-height: 100%;
    border-radius: var(--lumx-border-radius);
  }
}
@media (min-width: 61.25em) {
  .lumx-dialog--size-huge .lumx-dialog__wrapper {
    min-height: 100%;
  }
}
.lumx-dialog__header, .lumx-dialog__footer {
  flex-shrink: 0;
}
.lumx-dialog__header--has-divider {
  border-bottom-color: var(--lumx-color-dark-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.lumx-dialog__footer--has-divider {
  border-top-color: var(--lumx-color-dark-L5);
  border-top-style: solid;
  border-top-width: 1px;
}
.lumx-dialog__content {
  position: relative;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.lumx-dialog__progress-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lumx-color-light-L2);
  border-radius: var(--lumx-border-radius);
}

@keyframes lumx-dialog-overlay-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lumx-dialog-show-mobile {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes lumx-dialog-show-desktop {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Dialog sizes
   ========================================================================== */
@media (max-width: 61.24em) {
  .lumx-dialog--size-tiny .lumx-dialog__container {
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
  }
}
@media (min-width: 61.25em) {
  .lumx-dialog--size-tiny .lumx-dialog__container {
    top: 48px;
    left: 50%;
    width: 400px;
    height: calc(100% - 96px);
    margin-left: -200px;
  }
}

@media (max-width: 61.24em) {
  .lumx-dialog--size-regular .lumx-dialog__container {
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
  }
}
@media (min-width: 61.25em) {
  .lumx-dialog--size-regular .lumx-dialog__container {
    top: 48px;
    left: 50%;
    width: 600px;
    height: calc(100% - 96px);
    margin-left: -300px;
  }
}

@media (max-width: 61.24em) {
  .lumx-dialog--size-big .lumx-dialog__container {
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
  }
}
@media (min-width: 61.25em) {
  .lumx-dialog--size-big .lumx-dialog__container {
    top: 48px;
    left: 50%;
    width: 800px;
    height: calc(100% - 96px);
    margin-left: -400px;
  }
}

@media (max-width: 61.24em) {
  .lumx-dialog--size-huge .lumx-dialog__container {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@media (min-width: 61.25em) {
  .lumx-dialog--size-huge .lumx-dialog__container {
    top: 48px;
    right: 48px;
    bottom: 48px;
    left: 48px;
  }
}

/* ==========================================================================
   Divider
   ========================================================================== */
.lumx-divider--theme-light {
  height: 1px;
  margin: 0;
  border: none;
  background-color: var(--lumx-color-dark-L5);
}
.lumx-divider--theme-dark {
  height: 1px;
  margin: 0;
  border: none;
  background-color: var(--lumx-color-light-L5);
}

.lumx-has-divider {
  border-bottom-color: var(--lumx-color-dark-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.lumx-has-divider--theme-light {
  border-bottom-color: var(--lumx-color-dark-L5);
}
.lumx-has-divider--theme-dark {
  border-bottom-color: var(--lumx-color-light-L5);
}

.lumx-has-divider.lumx-has-divider--position-top {
  border-top-style: solid;
  border-top-width: 1px;
}
.lumx-has-divider.lumx-has-divider--position-top--theme-light {
  border-top-color: var(--lumx-color-dark-L5);
}
.lumx-has-divider.lumx-has-divider--position-top--theme-dark {
  border-top-color: var(--lumx-color-light-L5);
}

.lumx-has-divider.lumx-has-divider--position-right {
  border-right-style: solid;
  border-right-width: 1px;
}
.lumx-has-divider.lumx-has-divider--position-right--theme-light {
  border-right-color: var(--lumx-color-dark-L5);
}
.lumx-has-divider.lumx-has-divider--position-right--theme-dark {
  border-right-color: var(--lumx-color-light-L5);
}

.lumx-has-divider.lumx-has-divider--position-bottom {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.lumx-has-divider.lumx-has-divider--position-bottom--theme-light {
  border-bottom-color: var(--lumx-color-dark-L5);
}
.lumx-has-divider.lumx-has-divider--position-bottom--theme-dark {
  border-bottom-color: var(--lumx-color-light-L5);
}

.lumx-has-divider.lumx-has-divider--position-left {
  border-left-style: solid;
  border-left-width: 1px;
}
.lumx-has-divider.lumx-has-divider--position-left--theme-light {
  border-left-color: var(--lumx-color-dark-L5);
}
.lumx-has-divider.lumx-has-divider--position-left--theme-dark {
  border-left-color: var(--lumx-color-light-L5);
}

/* ==========================================================================
   Drag handle
   ========================================================================== */
.lumx-drag-handle {
  cursor: move;
}

/* ==========================================================================
   Dropdown
   ========================================================================== */
.lumx-dropdown {
  z-index: 999;
}
.lumx-dropdown--has-toggle {
  display: inline-block;
  vertical-align: top;
}
.lumx-dropdown__menu {
  box-shadow: 0 2px 8px 0 var(--lumx-color-dark-L4);
  overflow: auto;
  background-color: var(--lumx-color-light-N);
  border-radius: var(--lumx-border-radius);
}

/* ==========================================================================
   Expansion panel
   ========================================================================== */
.lumx-expansion-panel {
  border-radius: 2px;
}
.lumx-expansion-panel--has-background.lumx-expansion-panel--theme-light {
  background-color: var(--lumx-color-dark-L6);
}
.lumx-expansion-panel--has-background.lumx-expansion-panel--theme-dark {
  background-color: var(--lumx-color-light-L6);
}
.lumx-expansion-panel__header {
  display: flex;
  align-items: center;
}
.lumx-expansion-panel--theme-light.lumx-expansion-panel--is-open.lumx-expansion-panel--has-header-divider .lumx-expansion-panel__header {
  border-bottom-color: var(--lumx-color-dark-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.lumx-expansion-panel--theme-dark.lumx-expansion-panel--is-open.lumx-expansion-panel--has-header-divider .lumx-expansion-panel__header {
  border-bottom-color: var(--lumx-color-light-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.lumx-expansion-panel__header-drag {
  flex-shrink: 0;
  margin: 0 8px;
}
.lumx-expansion-panel__header-content {
  flex: 1 1 auto;
}
.lumx-expansion-panel--has-background:not(.lumx-expansion-panel--is-draggable):not(.lumx-expansion-panel--has-header) .lumx-expansion-panel__header-content {
  padding-left: 16px;
}
.lumx-expansion-panel__label {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  display: block;
}
.lumx-expansion-panel--theme-dark .lumx-expansion-panel__label {
  color: var(--lumx-color-light-N);
}
.lumx-expansion-panel__header-toggle {
  flex-shrink: 0;
}
.lumx-expansion-panel--has-background .lumx-expansion-panel__header-toggle {
  margin: 8px;
}
.lumx-expansion-panel--has-header .lumx-expansion-panel__header-toggle {
  margin-left: 0;
}
.lumx-expansion-panel__wrapper {
  display: grid;
  overflow: hidden;
  transition: grid-template-rows 400ms;
  grid-template-rows: 0fr;
}
@media (prefers-reduced-motion: reduce) {
  .lumx-expansion-panel__wrapper {
    transition: none;
  }
}
.lumx-expansion-panel--is-open > .lumx-expansion-panel__wrapper {
  grid-template-rows: 1fr;
}
.lumx-expansion-panel__container {
  min-height: 0;
  overflow: hidden;
}

/* ==========================================================================
   Flag
   ========================================================================== */
.lumx-flag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin: 0;
  border-radius: 10px;
  background-color: var(--lumx-color-light-N);
}
.lumx-flag--is-truncated {
  max-width: 100%;
}
.lumx-flag__icon {
  margin-right: 4px;
}

/* Flag colors
   ========================================================================== */
.lumx-flag--color-dark {
  border: 2px solid var(--lumx-color-dark-L4);
}
.lumx-flag--color-dark .lumx-flag__label,
.lumx-flag--color-dark .lumx-flag__icon {
  color: var(--lumx-color-dark-L1);
}

.lumx-flag--color-light {
  border: 2px solid var(--lumx-color-light-L4);
}
.lumx-flag--color-light .lumx-flag__label,
.lumx-flag--color-light .lumx-flag__icon {
  color: var(--lumx-color-light-N);
}

.lumx-flag--color-blue {
  border: 2px solid var(--lumx-color-blue-L4);
}
.lumx-flag--color-blue .lumx-flag__label,
.lumx-flag--color-blue .lumx-flag__icon {
  color: var(--lumx-color-blue-N);
}

.lumx-flag--color-green {
  border: 2px solid var(--lumx-color-green-L4);
}
.lumx-flag--color-green .lumx-flag__label,
.lumx-flag--color-green .lumx-flag__icon {
  color: var(--lumx-color-green-N);
}

.lumx-flag--color-yellow {
  border: 2px solid var(--lumx-color-yellow-L4);
}
.lumx-flag--color-yellow .lumx-flag__label,
.lumx-flag--color-yellow .lumx-flag__icon {
  color: var(--lumx-color-dark-L1);
}

.lumx-flag--color-red {
  border: 2px solid var(--lumx-color-red-L4);
}
.lumx-flag--color-red .lumx-flag__label,
.lumx-flag--color-red .lumx-flag__icon {
  color: var(--lumx-color-red-N);
}

.lumx-flag--color-grey {
  border: 2px solid var(--lumx-color-grey-L4);
}
.lumx-flag--color-grey .lumx-flag__label,
.lumx-flag--color-grey .lumx-flag__icon {
  color: var(--lumx-color-grey-N);
}

.lumx-flag--color-primary {
  border: 2px solid var(--lumx-color-primary-L4);
}
.lumx-flag--color-primary .lumx-flag__label,
.lumx-flag--color-primary .lumx-flag__icon {
  color: var(--lumx-color-primary-N);
}

.lumx-flag--color-secondary {
  border: 2px solid var(--lumx-color-secondary-L4);
}
.lumx-flag--color-secondary .lumx-flag__label,
.lumx-flag--color-secondary .lumx-flag__icon {
  color: var(--lumx-color-secondary-N);
}

.lumx-flag--color-accent {
  border: 2px solid var(--lumx-color-accent-L4);
}
.lumx-flag--color-accent .lumx-flag__label,
.lumx-flag--color-accent .lumx-flag__icon {
  color: var(--lumx-color-accent-N);
}

.lumx-flag--color-black {
  border: 2px solid var(--lumx-color-black-L4);
}
.lumx-flag--color-black .lumx-flag__label,
.lumx-flag--color-black .lumx-flag__icon {
  color: var(--lumx-color-black-N);
}

.lumx-flag--color-white {
  border: 2px solid var(--lumx-color-white-L4);
}
.lumx-flag--color-white .lumx-flag__label,
.lumx-flag--color-white .lumx-flag__icon {
  color: var(--lumx-color-white-N);
}

.lumx-flag--color-orange {
  border: 2px solid var(--lumx-color-orange-L4);
}
.lumx-flag--color-orange .lumx-flag__label,
.lumx-flag--color-orange .lumx-flag__icon {
  color: var(--lumx-color-orange-N);
}

/* ==========================================================================
   Flex-box
   ========================================================================== */
/* Orientation
   ========================================================================== */
.lumx-flex-box--orientation-horizontal,
.lumx-flex-box--orientation-vertical {
  display: flex;
}

.lumx-flex-box--orientation-horizontal {
  flex-direction: row;
}

.lumx-flex-box--orientation-vertical {
  flex-direction: column;
  min-height: 0;
}

/* Alignment
   ========================================================================== */
.lumx-flex-box--orientation-horizontal.lumx-flex-box--h-align-top,
.lumx-flex-box--orientation-vertical.lumx-flex-box--v-align-left {
  align-items: flex-start;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--h-align-center,
.lumx-flex-box--orientation-vertical.lumx-flex-box--v-align-center {
  align-items: center;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--h-align-bottom,
.lumx-flex-box--orientation-vertical.lumx-flex-box--v-align-right {
  align-items: flex-end;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-left,
.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-top {
  justify-content: flex-start;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-center,
.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-center {
  justify-content: center;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-right,
.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-bottom {
  justify-content: flex-end;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-space-between,
.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-between {
  justify-content: space-between;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-space-around,
.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-around {
  justify-content: space-around;
}

.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-space-evenly,
.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-evenly {
  justify-content: space-evenly;
}

/* Wrap
   ========================================================================== */
.lumx-flex-box--wrap {
  flex-wrap: wrap;
}

/* Fill space
   ========================================================================== */
.lumx-flex-box--fill-space {
  flex: 1 1 auto;
}

/* No shrink
   ========================================================================== */
.lumx-flex-box--no-shrink {
  flex-shrink: 0;
}

/* Margin
   ========================================================================== */
.lumx-flex-box--margin-auto-top {
  margin-top: auto;
}

.lumx-flex-box--margin-auto-right {
  margin-right: auto;
}

.lumx-flex-box--margin-auto-bottom {
  margin-bottom: auto;
}

.lumx-flex-box--margin-auto-left {
  margin-left: auto;
}

/* Gap
   ========================================================================== */
.lumx-flex-box--gap-tiny {
  gap: 4px;
}

.lumx-flex-box--gap-regular {
  gap: 8px;
}

.lumx-flex-box--gap-medium {
  gap: 12px;
}

.lumx-flex-box--gap-big {
  gap: 16px;
}

.lumx-flex-box--gap-huge {
  gap: 24px;
}

/* ==========================================================================
   Generic Block
   ========================================================================== */
.lumx-generic-block__content {
  overflow: clip;
  max-width: 100%;
  min-width: 0;
}

/* ==========================================================================
   Grid
   ========================================================================== */
.lumx-grid {
  display: flex;
}
.lumx-grid--orientation-horizontal {
  flex-direction: row;
}
.lumx-grid--orientation-vertical {
  flex-direction: column;
}

/* Grid wrap
   ========================================================================== */
.lumx-grid--wrap-nowrap {
  flex-wrap: nowrap;
}

.lumx-grid--wrap-wrap {
  flex-wrap: wrap;
}

.lumx-grid--wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Grid alignment
   ========================================================================== */
.lumx-grid--orientation-horizontal.lumx-grid--h-align-top,
.lumx-grid--orientation-vertical.lumx-grid--v-align-left {
  align-items: flex-start;
}

.lumx-grid--orientation-horizontal.lumx-grid--h-align-center,
.lumx-grid--orientation-vertical.lumx-grid--v-align-center {
  align-items: center;
}

.lumx-grid--orientation-horizontal.lumx-grid--h-align-bottom,
.lumx-grid--orientation-vertical.lumx-grid--v-align-right {
  align-items: flex-end;
}

.lumx-grid--orientation-horizontal.lumx-grid--v-align-left,
.lumx-grid--orientation-vertical.lumx-grid--h-align-top {
  justify-content: flex-start;
}

.lumx-grid--orientation-horizontal.lumx-grid--v-align-center,
.lumx-grid--orientation-vertical.lumx-grid--h-align-center {
  justify-content: center;
}

.lumx-grid--orientation-horizontal.lumx-grid--v-align-right,
.lumx-grid--orientation-vertical.lumx-grid--h-align-bottom {
  justify-content: flex-end;
}

.lumx-grid--orientation-horizontal.lumx-grid--v-align-space-around,
.lumx-grid--orientation-vertical.lumx-grid--h-align-space-around {
  justify-content: space-around;
}

.lumx-grid--orientation-horizontal.lumx-grid--v-align-space-between,
.lumx-grid--orientation-vertical.lumx-grid--h-align-space-between {
  justify-content: space-between;
}

/* Grid item
   ========================================================================== */
.lumx-grid-item {
  position: relative;
  flex: 1 1 auto;
}
.lumx-grid-item--align-start {
  align-self: flex-start;
}
.lumx-grid-item--align-center {
  align-self: center;
}
.lumx-grid-item--align-end {
  align-self: end;
}

/* Grid item order
   ========================================================================== */
.lumx-grid-item--order-1 {
  order: 1;
}

.lumx-grid-item--order-2 {
  order: 2;
}

.lumx-grid-item--order-3 {
  order: 3;
}

.lumx-grid-item--order-4 {
  order: 4;
}

.lumx-grid-item--order-5 {
  order: 5;
}

.lumx-grid-item--order-6 {
  order: 6;
}

.lumx-grid-item--order-7 {
  order: 7;
}

.lumx-grid-item--order-8 {
  order: 8;
}

.lumx-grid-item--order-9 {
  order: 9;
}

.lumx-grid-item--order-10 {
  order: 10;
}

.lumx-grid-item--order-11 {
  order: 11;
}

.lumx-grid-item--order-12 {
  order: 12;
}

/* Grid spacings
   ========================================================================== */
.lumx-grid--gutter-regular {
  margin: 0 -4px;
}
.lumx-grid--gutter-regular > .lumx-grid-item {
  padding: 0 4px;
}

.lumx-grid--gutter-big {
  margin: 0 -8px;
}
.lumx-grid--gutter-big > .lumx-grid-item {
  padding: 0 8px;
}

.lumx-grid--gutter-huge {
  margin: 0 -12px;
}
.lumx-grid--gutter-huge > .lumx-grid-item {
  padding: 0 12px;
}

/* Grid widths
   ========================================================================== */
.lumx-grid--orientation-horizontal > .lumx-grid-item--width-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-1 {
  flex: 0 0 8.3333333333%;
  max-height: 8.3333333333%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-2 {
  flex: 0 0 16.6666666667%;
  max-height: 16.6666666667%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-3 {
  flex: 0 0 25%;
  max-height: 25%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-4 {
  flex: 0 0 33.3333333333%;
  max-height: 33.3333333333%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-5 {
  flex: 0 0 41.6666666667%;
  max-height: 41.6666666667%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-6 {
  flex: 0 0 50%;
  max-height: 50%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-7 {
  flex: 0 0 58.3333333333%;
  max-height: 58.3333333333%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-8 {
  flex: 0 0 66.6666666667%;
  max-height: 66.6666666667%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-9 {
  flex: 0 0 75%;
  max-height: 75%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-10 {
  flex: 0 0 83.3333333333%;
  max-height: 83.3333333333%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-11 {
  flex: 0 0 91.6666666667%;
  max-height: 91.6666666667%;
}

.lumx-grid--orientation-horizontal > .lumx-grid-item--width-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.lumx-grid--orientation-vertical > .lumx-grid-item--width-12 {
  flex: 0 0 100%;
  max-height: 100%;
}

/* ==========================================================================
   Grid Column
   ========================================================================== */
.lumx-grid-column {
  --lumx-grid-column-gap: var(--lumx-spacing-unit-regular);
  --lumx-grid-column-columns: 1;
  --lumx-grid-column-item-min-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(min(var(--lumx-grid-column-item-min-width), 100%), calc((100% - (var(--lumx-grid-column-columns) - 1) * var(--lumx-grid-column-gap)) / var(--lumx-grid-column-columns))), 1fr));
  gap: var(--lumx-grid-column-gap);
}

/* ==========================================================================
   Icon
   ========================================================================== */
.lumx-icon--no-shape {
  display: block;
}
.lumx-icon--has-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.lumx-icon--path::before {
  display: none;
}
.lumx-icon--path svg {
  display: block;
}
.lumx-icon--font::before {
  display: block;
}
.lumx-icon--font svg {
  display: none;
}
.lumx-icon--has-dark-layer {
  position: relative;
}
.lumx-icon--has-dark-layer::after {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  content: "";
  background-color: var(--lumx-color-dark-L1);
  border-radius: 50%;
}
.lumx-icon--has-dark-layer::before,
.lumx-icon--has-dark-layer svg {
  position: relative;
  z-index: 1;
}
.lumx-icon--vertical-align-middle {
  vertical-align: middle;
}

/* Icon sizes
   ========================================================================== */
.lumx-icon--no-shape.lumx-icon--size-xxs {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.lumx-icon--no-shape.lumx-icon--size-xs {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.lumx-icon--no-shape.lumx-icon--size-s {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
}

.lumx-icon--no-shape.lumx-icon--size-m {
  width: 36px;
  height: 36px;
  font-size: 36px;
  line-height: 36px;
}

.lumx-icon--no-shape.lumx-icon--size-l {
  width: 64px;
  height: 64px;
  font-size: 64px;
  line-height: 64px;
}

.lumx-icon--no-shape.lumx-icon--size-xl {
  width: 128px;
  height: 128px;
  font-size: 128px;
  line-height: 128px;
}

.lumx-icon--no-shape.lumx-icon--size-xxl {
  width: 256px;
  height: 256px;
  font-size: 256px;
  line-height: 256px;
}

.lumx-icon--has-shape.lumx-icon--size-s {
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 14px;
}

.lumx-icon--has-shape.lumx-icon--size-m {
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 20px;
}

.lumx-icon--has-shape.lumx-icon--size-l {
  width: 64px;
  height: 64px;
  font-size: 36px;
  line-height: 36px;
}

.lumx-icon--has-shape.lumx-icon--size-xl {
  width: 128px;
  height: 128px;
  font-size: 64px;
  line-height: 64px;
}

/* Icon colors
   ========================================================================== */
.lumx-icon--color-dark.lumx-icon--no-shape {
  color: var(--lumx-color-dark-L1);
}
.lumx-icon--color-dark.lumx-icon--has-shape {
  background-color: var(--lumx-color-dark-L6);
  color: var(--lumx-color-dark-N);
}
.lumx-icon--color-dark.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-dark-L6), var(--lumx-color-dark-L6));
  color: var(--lumx-color-dark-N);
}

.lumx-icon--color-dark.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-dark-N);
}

.lumx-icon--color-dark.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-dark-N);
}

.lumx-icon--color-dark.lumx-icon--color-variant-N {
  color: var(--lumx-color-dark-N);
}

.lumx-icon--color-dark.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-dark.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-dark-L2);
}

.lumx-icon--color-dark.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-dark-L3);
}

.lumx-icon--color-dark.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-dark-L4);
}

.lumx-icon--color-dark.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-dark-L5);
}

.lumx-icon--color-dark.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-dark-L6);
}

.lumx-icon--color-light.lumx-icon--no-shape {
  color: var(--lumx-color-light-N);
}
.lumx-icon--color-light.lumx-icon--has-shape {
  background-color: var(--lumx-color-light-L6);
  color: var(--lumx-color-light-N);
}
.lumx-icon--color-light.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-L6);
  color: var(--lumx-color-light-N);
}

.lumx-icon--color-light.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-light-N);
}

.lumx-icon--color-light.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-light-N);
}

.lumx-icon--color-light.lumx-icon--color-variant-N {
  color: var(--lumx-color-light-N);
}

.lumx-icon--color-light.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-light-L1);
}

.lumx-icon--color-light.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-light-L2);
}

.lumx-icon--color-light.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-light-L3);
}

.lumx-icon--color-light.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-light-L4);
}

.lumx-icon--color-light.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-light-L5);
}

.lumx-icon--color-light.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-light-L6);
}

.lumx-icon--color-blue.lumx-icon--no-shape {
  color: var(--lumx-color-blue-N);
}
.lumx-icon--color-blue.lumx-icon--has-shape {
  background-color: var(--lumx-color-blue-L6);
  color: var(--lumx-color-blue-N);
}
.lumx-icon--color-blue.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-blue-L6), var(--lumx-color-blue-L6));
  color: var(--lumx-color-blue-N);
}

.lumx-icon--color-blue.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-blue-D2);
}

.lumx-icon--color-blue.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-blue-D1);
}

.lumx-icon--color-blue.lumx-icon--color-variant-N {
  color: var(--lumx-color-blue-N);
}

.lumx-icon--color-blue.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-blue-L1);
}

.lumx-icon--color-blue.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-blue-L2);
}

.lumx-icon--color-blue.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-blue-L3);
}

.lumx-icon--color-blue.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-blue-L4);
}

.lumx-icon--color-blue.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-blue-L5);
}

.lumx-icon--color-blue.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-blue-L6);
}

.lumx-icon--color-green.lumx-icon--no-shape {
  color: var(--lumx-color-green-N);
}
.lumx-icon--color-green.lumx-icon--has-shape {
  background-color: var(--lumx-color-green-L6);
  color: var(--lumx-color-green-N);
}
.lumx-icon--color-green.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-green-L6), var(--lumx-color-green-L6));
  color: var(--lumx-color-green-N);
}

.lumx-icon--color-green.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-green-D2);
}

.lumx-icon--color-green.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-green-D1);
}

.lumx-icon--color-green.lumx-icon--color-variant-N {
  color: var(--lumx-color-green-N);
}

.lumx-icon--color-green.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-green-L1);
}

.lumx-icon--color-green.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-green-L2);
}

.lumx-icon--color-green.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-green-L3);
}

.lumx-icon--color-green.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-green-L4);
}

.lumx-icon--color-green.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-green-L5);
}

.lumx-icon--color-green.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-green-L6);
}

.lumx-icon--color-yellow.lumx-icon--no-shape {
  color: var(--lumx-color-yellow-N);
}
.lumx-icon--color-yellow.lumx-icon--has-shape {
  background-color: var(--lumx-color-yellow-L6);
  color: var(--lumx-color-dark-L1);
}
.lumx-icon--color-yellow.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-yellow-L6), var(--lumx-color-yellow-L6));
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-yellow-D2);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-D2.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-yellow-D1);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-D1.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-N {
  color: var(--lumx-color-yellow-N);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-N.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-yellow-L1);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-L1.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-yellow-L2);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-L2.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-yellow-L3);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-L3.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-yellow-L4);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-L4.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-yellow-L5);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-L5.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-yellow.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-yellow-L6);
}
.lumx-icon--color-yellow.lumx-icon--color-variant-L6.lumx-icon--has-shape {
  color: var(--lumx-color-dark-L1);
}

.lumx-icon--color-red.lumx-icon--no-shape {
  color: var(--lumx-color-red-N);
}
.lumx-icon--color-red.lumx-icon--has-shape {
  background-color: var(--lumx-color-red-L6);
  color: var(--lumx-color-red-N);
}
.lumx-icon--color-red.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-red-L6), var(--lumx-color-red-L6));
  color: var(--lumx-color-red-N);
}

.lumx-icon--color-red.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-red-D2);
}

.lumx-icon--color-red.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-red-D1);
}

.lumx-icon--color-red.lumx-icon--color-variant-N {
  color: var(--lumx-color-red-N);
}

.lumx-icon--color-red.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-red-L1);
}

.lumx-icon--color-red.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-red-L2);
}

.lumx-icon--color-red.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-red-L3);
}

.lumx-icon--color-red.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-red-L4);
}

.lumx-icon--color-red.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-red-L5);
}

.lumx-icon--color-red.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-red-L6);
}

.lumx-icon--color-grey.lumx-icon--no-shape {
  color: var(--lumx-color-grey-N);
}
.lumx-icon--color-grey.lumx-icon--has-shape {
  background-color: var(--lumx-color-grey-L6);
  color: var(--lumx-color-grey-N);
}
.lumx-icon--color-grey.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-grey-L6), var(--lumx-color-grey-L6));
  color: var(--lumx-color-grey-N);
}

.lumx-icon--color-grey.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-grey-N);
}

.lumx-icon--color-grey.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-grey-N);
}

.lumx-icon--color-grey.lumx-icon--color-variant-N {
  color: var(--lumx-color-grey-N);
}

.lumx-icon--color-grey.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-grey-L1);
}

.lumx-icon--color-grey.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-grey-L2);
}

.lumx-icon--color-grey.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-grey-L3);
}

.lumx-icon--color-grey.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-grey-L4);
}

.lumx-icon--color-grey.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-grey-L5);
}

.lumx-icon--color-grey.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-grey-L6);
}

.lumx-icon--color-primary.lumx-icon--no-shape {
  color: var(--lumx-color-primary-N);
}
.lumx-icon--color-primary.lumx-icon--has-shape {
  background-color: var(--lumx-color-primary-L6);
  color: var(--lumx-color-primary-N);
}
.lumx-icon--color-primary.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-primary-L6), var(--lumx-color-primary-L6));
  color: var(--lumx-color-primary-N);
}

.lumx-icon--color-primary.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-primary-D2);
}

.lumx-icon--color-primary.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-primary-D1);
}

.lumx-icon--color-primary.lumx-icon--color-variant-N {
  color: var(--lumx-color-primary-N);
}

.lumx-icon--color-primary.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-primary-L1);
}

.lumx-icon--color-primary.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-primary-L2);
}

.lumx-icon--color-primary.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-primary-L3);
}

.lumx-icon--color-primary.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-primary-L4);
}

.lumx-icon--color-primary.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-primary-L5);
}

.lumx-icon--color-primary.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-primary-L6);
}

.lumx-icon--color-secondary.lumx-icon--no-shape {
  color: var(--lumx-color-secondary-N);
}
.lumx-icon--color-secondary.lumx-icon--has-shape {
  background-color: var(--lumx-color-secondary-L6);
  color: var(--lumx-color-secondary-N);
}
.lumx-icon--color-secondary.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-secondary-L6), var(--lumx-color-secondary-L6));
  color: var(--lumx-color-secondary-N);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-secondary-D2);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-secondary-D1);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-N {
  color: var(--lumx-color-secondary-N);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-secondary-L1);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-secondary-L2);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-secondary-L3);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-secondary-L4);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-secondary-L5);
}

.lumx-icon--color-secondary.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-secondary-L6);
}

.lumx-icon--color-accent.lumx-icon--no-shape {
  color: var(--lumx-color-accent-N);
}
.lumx-icon--color-accent.lumx-icon--has-shape {
  background-color: var(--lumx-color-accent-L6);
  color: var(--lumx-color-accent-N);
}
.lumx-icon--color-accent.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-accent-L6), var(--lumx-color-accent-L6));
  color: var(--lumx-color-accent-N);
}

.lumx-icon--color-accent.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-accent-D2);
}

.lumx-icon--color-accent.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-accent-D1);
}

.lumx-icon--color-accent.lumx-icon--color-variant-N {
  color: var(--lumx-color-accent-N);
}

.lumx-icon--color-accent.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-accent-L1);
}

.lumx-icon--color-accent.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-accent-L2);
}

.lumx-icon--color-accent.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-accent-L3);
}

.lumx-icon--color-accent.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-accent-L4);
}

.lumx-icon--color-accent.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-accent-L5);
}

.lumx-icon--color-accent.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-accent-L6);
}

.lumx-icon--color-black.lumx-icon--no-shape {
  color: var(--lumx-color-black-N);
}
.lumx-icon--color-black.lumx-icon--has-shape {
  background-color: var(--lumx-color-black-L6);
  color: var(--lumx-color-black-N);
}
.lumx-icon--color-black.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-black-L6), var(--lumx-color-black-L6));
  color: var(--lumx-color-black-N);
}

.lumx-icon--color-black.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-black-N);
}

.lumx-icon--color-black.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-black-N);
}

.lumx-icon--color-black.lumx-icon--color-variant-N {
  color: var(--lumx-color-black-N);
}

.lumx-icon--color-black.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-black-L1);
}

.lumx-icon--color-black.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-black-L2);
}

.lumx-icon--color-black.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-black-L3);
}

.lumx-icon--color-black.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-black-L4);
}

.lumx-icon--color-black.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-black-L5);
}

.lumx-icon--color-black.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-black-L6);
}

.lumx-icon--color-white.lumx-icon--no-shape {
  color: var(--lumx-color-white-N);
}
.lumx-icon--color-white.lumx-icon--has-shape {
  background-color: var(--lumx-color-white-L6);
  color: var(--lumx-color-white-N);
}
.lumx-icon--color-white.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-white-L6), var(--lumx-color-white-L6));
  color: var(--lumx-color-white-N);
}

.lumx-icon--color-white.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-white-N);
}

.lumx-icon--color-white.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-white-N);
}

.lumx-icon--color-white.lumx-icon--color-variant-N {
  color: var(--lumx-color-white-N);
}

.lumx-icon--color-white.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-white-L1);
}

.lumx-icon--color-white.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-white-L2);
}

.lumx-icon--color-white.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-white-L3);
}

.lumx-icon--color-white.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-white-L4);
}

.lumx-icon--color-white.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-white-L5);
}

.lumx-icon--color-white.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-white-L6);
}

.lumx-icon--color-orange.lumx-icon--no-shape {
  color: var(--lumx-color-orange-N);
}
.lumx-icon--color-orange.lumx-icon--has-shape {
  background-color: var(--lumx-color-orange-L6);
  color: var(--lumx-color-orange-N);
}
.lumx-icon--color-orange.lumx-icon--has-shape.lumx-icon--theme-dark {
  background-color: var(--lumx-color-light-N);
  background-image: linear-gradient(to right, var(--lumx-color-orange-L6), var(--lumx-color-orange-L6));
  color: var(--lumx-color-orange-N);
}

.lumx-icon--color-orange.lumx-icon--color-variant-D2 {
  color: var(--lumx-color-orange-D2);
}

.lumx-icon--color-orange.lumx-icon--color-variant-D1 {
  color: var(--lumx-color-orange-D1);
}

.lumx-icon--color-orange.lumx-icon--color-variant-N {
  color: var(--lumx-color-orange-N);
}

.lumx-icon--color-orange.lumx-icon--color-variant-L1 {
  color: var(--lumx-color-orange-L1);
}

.lumx-icon--color-orange.lumx-icon--color-variant-L2 {
  color: var(--lumx-color-orange-L2);
}

.lumx-icon--color-orange.lumx-icon--color-variant-L3 {
  color: var(--lumx-color-orange-L3);
}

.lumx-icon--color-orange.lumx-icon--color-variant-L4 {
  color: var(--lumx-color-orange-L4);
}

.lumx-icon--color-orange.lumx-icon--color-variant-L5 {
  color: var(--lumx-color-orange-L5);
}

.lumx-icon--color-orange.lumx-icon--color-variant-L6 {
  color: var(--lumx-color-orange-L6);
}

/* ==========================================================================
   Image block
   ========================================================================== */
.lumx-image-block {
  position: relative;
}
.lumx-image-block--fill-height {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.lumx-image-block__wrapper > * {
  max-width: 100%;
}
.lumx-image-block--fill-height .lumx-image-block__wrapper {
  flex-shrink: 0;
}
.lumx-image-block--caption-position-below .lumx-image-block__wrapper {
  padding-top: 16px;
}
.lumx-image-block--caption-position-over .lumx-image-block__wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
}
.lumx-image-block--theme-light.lumx-image-block--caption-position-over .lumx-image-block__wrapper {
  background-color: var(--lumx-color-light-L1);
}
.lumx-image-block--theme-dark.lumx-image-block--caption-position-over .lumx-image-block__wrapper {
  background-color: var(--lumx-color-dark-L1);
}
.lumx-image-block__actions {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Image block sizes
   ========================================================================== */
.lumx-image-block--size-xxs {
  width: 14px;
}

.lumx-image-block--size-xs {
  width: 20px;
}

.lumx-image-block--size-s {
  width: 24px;
}

.lumx-image-block--size-m {
  width: 36px;
}

.lumx-image-block--size-l {
  width: 64px;
}

.lumx-image-block--size-xl {
  width: 128px;
}

.lumx-image-block--size-xxl {
  width: 256px;
}

/* ==========================================================================
   Image Lightbox
   ========================================================================== */
@supports (view-transition-name: name) {
  .lumx-image-lightbox.lumx-lightbox {
    transition: none;
    animation: none;
  }
}
.lumx-image-lightbox .lumx-lightbox__wrapper {
  inset: 0;
}
.lumx-image-lightbox .lumx-slideshow-item-group,
.lumx-image-lightbox .lumx-slideshow-item {
  display: flex;
  width: 100%;
  height: 100%;
}
.lumx-image-lightbox__image-slide {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: none;
  color-scheme: dark;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
.lumx-image-lightbox__thumbnail {
  margin: auto;
}
.lumx-image-lightbox__footer {
  flex-shrink: 0;
  padding: 24px 8px;
  background: rgba(0, 0, 0, 0.7);
}

::view-transition-image-pair(lumx-image-lightbox) {
  overflow: hidden;
}

::view-transition-old(lumx-image-lightbox),
::view-transition-new(lumx-image-lightbox) {
  height: 100%;
}

::view-transition-group(lumx-image-lightbox) {
  animation-duration: 400ms;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(lumx-image-lightbox) {
    animation: none;
  }
}

/* ==========================================================================
   Inline list
   ========================================================================== */
.lumx-inline-list {
  display: flex;
  align-items: center;
  list-style: none;
}
.lumx-inline-list--wrap {
  flex-wrap: wrap;
}
.lumx-inline-list__item {
  display: contents;
}

/* ==========================================================================
   Input helper
   ========================================================================== */
.lumx-input-helper--theme-light {
  display: block;
  font-size: var(--lumx-material-input-helper-font-size);
  font-weight: var(--lumx-material-input-helper-font-weight);
  line-height: var(--lumx-material-input-helper-line-height);
  color: var(--lumx-color-dark-L2);
}
.lumx-input-helper--theme-light.lumx-input-helper--color-yellow {
  color: var(--lumx-color-yellow-D1);
}
.lumx-input-helper--theme-light.lumx-input-helper--color-red {
  color: var(--lumx-color-red-D1);
}
.lumx-input-helper--theme-light.lumx-input-helper--color-green {
  color: var(--lumx-color-green-D1);
}
.lumx-input-helper--theme-dark {
  display: block;
  font-size: var(--lumx-material-input-helper-font-size);
  font-weight: var(--lumx-material-input-helper-font-weight);
  line-height: var(--lumx-material-input-helper-line-height);
  color: var(--lumx-color-light-L2);
}
.lumx-input-helper__icon {
  margin-right: 4px;
}

/* ==========================================================================
   Input label
   ========================================================================== */
.lumx-input-label {
  /** When there is a custom typography, we create a more specific selector so that it overrides the typo added by the mixin `lumx-input-label` */
}
.lumx-input-label--is-required::before {
  margin-right: 4px;
  font-weight: 700;
  content: "*";
}
.lumx-input-label--theme-light {
  display: block;
  font-size: var(--lumx-material-input-label-font-size);
  font-weight: var(--lumx-material-input-label-font-weight);
  line-height: var(--lumx-material-input-label-line-height);
  color: var(--lumx-color-dark-N);
}
.lumx-input-label--theme-light::before {
  color: var(--lumx-color-red-N);
}
.lumx-input-label--theme-dark {
  display: block;
  font-size: var(--lumx-material-input-label-font-size);
  font-weight: var(--lumx-material-input-label-font-weight);
  line-height: var(--lumx-material-input-label-line-height);
  color: var(--lumx-color-light-N);
}
.lumx-input-label--has-custom-typography.lumx-typography-display1 {
  font-size: 34px;
  font-weight: var(--lumx-typography-interface-display1-font-weight);
  line-height: 40px;
}
.lumx-input-label--has-custom-typography.lumx-typography-headline {
  font-size: 24px;
  font-weight: var(--lumx-typography-interface-headline-font-weight);
  line-height: 32px;
}
.lumx-input-label--has-custom-typography.lumx-typography-title {
  font-size: 20px;
  font-weight: var(--lumx-typography-interface-title-font-weight);
  line-height: 30px;
}
.lumx-input-label--has-custom-typography.lumx-typography-subtitle2 {
  font-size: 16px;
  font-weight: var(--lumx-typography-interface-subtitle2-font-weight);
  line-height: 24px;
}
.lumx-input-label--has-custom-typography.lumx-typography-subtitle1 {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
}
.lumx-input-label--has-custom-typography.lumx-typography-body2 {
  font-size: 16px;
  font-weight: var(--lumx-typography-interface-body2-font-weight);
  line-height: 24px;
}
.lumx-input-label--has-custom-typography.lumx-typography-body1 {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-input-label--has-custom-typography.lumx-typography-caption {
  font-size: 12px;
  font-weight: var(--lumx-typography-interface-caption-font-weight);
  line-height: 16px;
}
.lumx-input-label--has-custom-typography.lumx-typography-overline {
  font-size: 10px;
  font-weight: var(--lumx-typography-interface-overline-font-weight);
  line-height: 12px;
  text-transform: uppercase;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lumx-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: none;
  overflow: auto;
  background-color: var(--lumx-color-dark-L1);
  opacity: 1;
  transition: opacity 400ms;
  animation: lumx-lightbox-show 400ms;
}
@media (prefers-reduced-motion: reduce) {
  .lumx-lightbox {
    transition: none;
    animation: none;
  }
}
.lumx-lightbox--is-shown {
  display: block;
}
.lumx-lightbox--is-hidden {
  opacity: 0;
}
.lumx-lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1;
}
.lumx-lightbox__wrapper {
  position: absolute;
  top: 64px;
  right: 64px;
  bottom: 64px;
  left: 64px;
  display: flex;
  flex-direction: column;
}

@keyframes lumx-lightbox-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ==========================================================================
   Index
   ========================================================================== */
.lumx-link {
  display: inline;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  color: var(--lumx-color-primary-N);
}
:where(.lumx-link:not(.lumx-link--has-typography)) {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.lumx-link:not(:disabled):not([aria-disabled=true])[data-lumx-hover], .lumx-link:not(:disabled):not([aria-disabled=true])[data-focus-visible-added] {
  text-decoration: underline;
}
@media (hover: hover) {
.lumx-link:not(:disabled):not([aria-disabled=true]):hover {
  text-decoration: underline;
}}
.lumx-link[data-focus-visible-added], .lumx-link:focus-visible {
  outline: 1px auto currentColor;
  outline-offset: 2px;
}
.lumx-link:disabled, .lumx-link[aria-disabled=true] {
  opacity: 0.5;
  cursor: default;
}
.lumx-link > .lumx-icon, .lumx-link > .lumx-icon svg, .lumx-link__content > .lumx-icon, .lumx-link__content > .lumx-icon svg {
  display: inline;
  line-height: initial;
}

/* Link colors
   ========================================================================== */
.lumx-link.lumx-link--color-dark {
  color: var(--lumx-color-dark-N);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-D2 {
  color: var(--lumx-color-dark-N);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-D1 {
  color: var(--lumx-color-dark-N);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-N {
  color: var(--lumx-color-dark-N);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-L1 {
  color: var(--lumx-color-dark-L1);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-L2 {
  color: var(--lumx-color-dark-L2);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-L3 {
  color: var(--lumx-color-dark-L3);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-L4 {
  color: var(--lumx-color-dark-L4);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-L5 {
  color: var(--lumx-color-dark-L5);
}

.lumx-link.lumx-link--color-dark.lumx-link--color-variant-L6 {
  color: var(--lumx-color-dark-L6);
}

.lumx-link.lumx-link--color-light {
  color: var(--lumx-color-light-N);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-D2 {
  color: var(--lumx-color-light-N);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-D1 {
  color: var(--lumx-color-light-N);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-N {
  color: var(--lumx-color-light-N);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-L1 {
  color: var(--lumx-color-light-L1);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-L2 {
  color: var(--lumx-color-light-L2);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-L3 {
  color: var(--lumx-color-light-L3);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-L4 {
  color: var(--lumx-color-light-L4);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-L5 {
  color: var(--lumx-color-light-L5);
}

.lumx-link.lumx-link--color-light.lumx-link--color-variant-L6 {
  color: var(--lumx-color-light-L6);
}

.lumx-link.lumx-link--color-blue {
  color: var(--lumx-color-blue-N);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-D2 {
  color: var(--lumx-color-blue-D2);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-D1 {
  color: var(--lumx-color-blue-D1);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-N {
  color: var(--lumx-color-blue-N);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-L1 {
  color: var(--lumx-color-blue-L1);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-L2 {
  color: var(--lumx-color-blue-L2);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-L3 {
  color: var(--lumx-color-blue-L3);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-L4 {
  color: var(--lumx-color-blue-L4);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-L5 {
  color: var(--lumx-color-blue-L5);
}

.lumx-link.lumx-link--color-blue.lumx-link--color-variant-L6 {
  color: var(--lumx-color-blue-L6);
}

.lumx-link.lumx-link--color-green {
  color: var(--lumx-color-green-N);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-D2 {
  color: var(--lumx-color-green-D2);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-D1 {
  color: var(--lumx-color-green-D1);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-N {
  color: var(--lumx-color-green-N);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-L1 {
  color: var(--lumx-color-green-L1);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-L2 {
  color: var(--lumx-color-green-L2);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-L3 {
  color: var(--lumx-color-green-L3);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-L4 {
  color: var(--lumx-color-green-L4);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-L5 {
  color: var(--lumx-color-green-L5);
}

.lumx-link.lumx-link--color-green.lumx-link--color-variant-L6 {
  color: var(--lumx-color-green-L6);
}

.lumx-link.lumx-link--color-yellow {
  color: var(--lumx-color-yellow-N);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-D2 {
  color: var(--lumx-color-yellow-D2);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-D1 {
  color: var(--lumx-color-yellow-D1);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-N {
  color: var(--lumx-color-yellow-N);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-L1 {
  color: var(--lumx-color-yellow-L1);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-L2 {
  color: var(--lumx-color-yellow-L2);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-L3 {
  color: var(--lumx-color-yellow-L3);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-L4 {
  color: var(--lumx-color-yellow-L4);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-L5 {
  color: var(--lumx-color-yellow-L5);
}

.lumx-link.lumx-link--color-yellow.lumx-link--color-variant-L6 {
  color: var(--lumx-color-yellow-L6);
}

.lumx-link.lumx-link--color-red {
  color: var(--lumx-color-red-N);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-D2 {
  color: var(--lumx-color-red-D2);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-D1 {
  color: var(--lumx-color-red-D1);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-N {
  color: var(--lumx-color-red-N);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-L1 {
  color: var(--lumx-color-red-L1);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-L2 {
  color: var(--lumx-color-red-L2);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-L3 {
  color: var(--lumx-color-red-L3);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-L4 {
  color: var(--lumx-color-red-L4);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-L5 {
  color: var(--lumx-color-red-L5);
}

.lumx-link.lumx-link--color-red.lumx-link--color-variant-L6 {
  color: var(--lumx-color-red-L6);
}

.lumx-link.lumx-link--color-grey {
  color: var(--lumx-color-grey-N);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-D2 {
  color: var(--lumx-color-grey-N);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-D1 {
  color: var(--lumx-color-grey-N);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-N {
  color: var(--lumx-color-grey-N);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-L1 {
  color: var(--lumx-color-grey-L1);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-L2 {
  color: var(--lumx-color-grey-L2);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-L3 {
  color: var(--lumx-color-grey-L3);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-L4 {
  color: var(--lumx-color-grey-L4);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-L5 {
  color: var(--lumx-color-grey-L5);
}

.lumx-link.lumx-link--color-grey.lumx-link--color-variant-L6 {
  color: var(--lumx-color-grey-L6);
}

.lumx-link.lumx-link--color-primary {
  color: var(--lumx-color-primary-N);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-D2 {
  color: var(--lumx-color-primary-D2);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-D1 {
  color: var(--lumx-color-primary-D1);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-N {
  color: var(--lumx-color-primary-N);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-L1 {
  color: var(--lumx-color-primary-L1);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-L2 {
  color: var(--lumx-color-primary-L2);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-L3 {
  color: var(--lumx-color-primary-L3);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-L4 {
  color: var(--lumx-color-primary-L4);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-L5 {
  color: var(--lumx-color-primary-L5);
}

.lumx-link.lumx-link--color-primary.lumx-link--color-variant-L6 {
  color: var(--lumx-color-primary-L6);
}

.lumx-link.lumx-link--color-secondary {
  color: var(--lumx-color-secondary-N);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-D2 {
  color: var(--lumx-color-secondary-D2);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-D1 {
  color: var(--lumx-color-secondary-D1);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-N {
  color: var(--lumx-color-secondary-N);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-L1 {
  color: var(--lumx-color-secondary-L1);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-L2 {
  color: var(--lumx-color-secondary-L2);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-L3 {
  color: var(--lumx-color-secondary-L3);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-L4 {
  color: var(--lumx-color-secondary-L4);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-L5 {
  color: var(--lumx-color-secondary-L5);
}

.lumx-link.lumx-link--color-secondary.lumx-link--color-variant-L6 {
  color: var(--lumx-color-secondary-L6);
}

.lumx-link.lumx-link--color-accent {
  color: var(--lumx-color-accent-N);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-D2 {
  color: var(--lumx-color-accent-D2);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-D1 {
  color: var(--lumx-color-accent-D1);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-N {
  color: var(--lumx-color-accent-N);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-L1 {
  color: var(--lumx-color-accent-L1);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-L2 {
  color: var(--lumx-color-accent-L2);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-L3 {
  color: var(--lumx-color-accent-L3);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-L4 {
  color: var(--lumx-color-accent-L4);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-L5 {
  color: var(--lumx-color-accent-L5);
}

.lumx-link.lumx-link--color-accent.lumx-link--color-variant-L6 {
  color: var(--lumx-color-accent-L6);
}

.lumx-link.lumx-link--color-black {
  color: var(--lumx-color-black-N);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-D2 {
  color: var(--lumx-color-black-N);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-D1 {
  color: var(--lumx-color-black-N);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-N {
  color: var(--lumx-color-black-N);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-L1 {
  color: var(--lumx-color-black-L1);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-L2 {
  color: var(--lumx-color-black-L2);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-L3 {
  color: var(--lumx-color-black-L3);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-L4 {
  color: var(--lumx-color-black-L4);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-L5 {
  color: var(--lumx-color-black-L5);
}

.lumx-link.lumx-link--color-black.lumx-link--color-variant-L6 {
  color: var(--lumx-color-black-L6);
}

.lumx-link.lumx-link--color-white {
  color: var(--lumx-color-white-N);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-D2 {
  color: var(--lumx-color-white-N);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-D1 {
  color: var(--lumx-color-white-N);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-N {
  color: var(--lumx-color-white-N);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-L1 {
  color: var(--lumx-color-white-L1);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-L2 {
  color: var(--lumx-color-white-L2);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-L3 {
  color: var(--lumx-color-white-L3);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-L4 {
  color: var(--lumx-color-white-L4);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-L5 {
  color: var(--lumx-color-white-L5);
}

.lumx-link.lumx-link--color-white.lumx-link--color-variant-L6 {
  color: var(--lumx-color-white-L6);
}

.lumx-link.lumx-link--color-orange {
  color: var(--lumx-color-orange-N);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-D2 {
  color: var(--lumx-color-orange-D2);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-D1 {
  color: var(--lumx-color-orange-D1);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-N {
  color: var(--lumx-color-orange-N);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-L1 {
  color: var(--lumx-color-orange-L1);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-L2 {
  color: var(--lumx-color-orange-L2);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-L3 {
  color: var(--lumx-color-orange-L3);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-L4 {
  color: var(--lumx-color-orange-L4);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-L5 {
  color: var(--lumx-color-orange-L5);
}

.lumx-link.lumx-link--color-orange.lumx-link--color-variant-L6 {
  color: var(--lumx-color-orange-L6);
}

/* ==========================================================================
   Web bookmark
   ========================================================================== */
.lumx-link-preview--size-big {
  position: relative;
  padding-top: 66.66%;
}
.lumx-link-preview--theme-light {
  background-color: var(--lumx-color-dark-L6);
}
.lumx-link-preview--theme-dark {
  background-color: var(--lumx-color-light-L6);
}
.lumx-link-preview__wrapper {
  display: flex;
}
.lumx-link-preview--size-regular .lumx-link-preview__wrapper {
  flex-direction: row;
}
.lumx-link-preview--size-big .lumx-link-preview__wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
}
.lumx-link-preview__thumbnail {
  display: flex;
  flex-direction: column;
}
.lumx-link-preview--size-regular .lumx-link-preview__thumbnail {
  flex: 0 0 138px;
}
.lumx-link-preview--size-big .lumx-link-preview__thumbnail {
  flex: 1 1 auto;
}
.lumx-link-preview__container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.lumx-link-preview--size-regular .lumx-link-preview__container {
  flex: 1 1 auto;
}
.lumx-link-preview--size-big .lumx-link-preview__container {
  flex-shrink: 0;
}
.lumx-link-preview__title, .lumx-link-preview__description, .lumx-link-preview__link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lumx-link-preview__title {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
}
.lumx-link-preview__description {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-link-preview--theme-light .lumx-link-preview__description {
  color: var(--lumx-color-dark-L2);
}
.lumx-link-preview--theme-dark .lumx-link-preview__description {
  color: var(--lumx-color-light-L2);
}
.lumx-link-preview__link {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}

/* ==========================================================================
   List
   ========================================================================== */
.lumx-list {
  padding: 8px 0;
  margin: 0;
  list-style: none;
  outline: none;
}

/* Item sizes
   ========================================================================== */
.lumx-list-item--size-tiny .lumx-list-item__wrapper,
.lumx-list-item--size-tiny .lumx-list-item__link {
  display: flex;
  text-decoration: none;
  outline: none;
  align-items: center;
  min-height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.lumx-list-item--size-tiny .lumx-list-item__before {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 24px;
  margin-right: 8px;
}
.lumx-list-item--size-tiny .lumx-list-item__after {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-left: 8px;
}

.lumx-list-item--size-regular .lumx-list-item__wrapper,
.lumx-list-item--size-regular .lumx-list-item__link {
  display: flex;
  text-decoration: none;
  outline: none;
  align-items: center;
  min-height: 52px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.lumx-list-item--size-regular .lumx-list-item__before {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 36px;
  margin-right: 16px;
}
.lumx-list-item--size-regular .lumx-list-item__after {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-left: 16px;
}

.lumx-list-item--size-big .lumx-list-item__wrapper,
.lumx-list-item--size-big .lumx-list-item__link {
  display: flex;
  text-decoration: none;
  outline: none;
  align-items: center;
  min-height: 72px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.lumx-list-item--size-big .lumx-list-item__before {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 36px;
  margin-right: 16px;
}
.lumx-list-item--size-big .lumx-list-item__after {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-left: 16px;
}

.lumx-list-item--size-huge .lumx-list-item__wrapper,
.lumx-list-item--size-huge .lumx-list-item__link {
  display: flex;
  text-decoration: none;
  outline: none;
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 16px;
}
.lumx-list-item--size-huge .lumx-list-item__before {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 36px;
  margin-right: 16px;
}
.lumx-list-item--size-huge .lumx-list-item__after {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin-left: 16px;
}

/* Item link
   ========================================================================== */
.lumx-list-item {
  position: relative;
}
.lumx-list-item__link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: var(--lumx-color-dark-N);
  background-color: transparent;
}
.lumx-list-item__link[data-focus-visible-added], .lumx-list-item__link:has([data-focus-visible-added]) {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: -2px;
}
.lumx-list-item__link:not([aria-disabled=true])[data-lumx-hover], .lumx-list-item__link:not([aria-disabled=true])[data-focus-visible-added] {
  background-color: var(--lumx-color-dark-L5);
}
@media (hover: hover) {
.lumx-list-item__link:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-dark-L5);
}}
.lumx-list-item__link:not([aria-disabled=true]):active, .lumx-list-item__link:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-dark-L4);
}
.lumx-list-item__link--is-highlighted {
  cursor: pointer;
  background-color: var(--lumx-color-dark-L5);
}
.lumx-list-item__link--is-highlighted:active {
  background-color: var(--lumx-color-dark-L4);
}
.lumx-list-item__link--is-selected, .lumx-list-item .lumx-action-area__action[aria-selected=true]::before {
  color: var(--lumx-color-primary-D2);
  background-color: var(--lumx-color-primary-L5);
}
.lumx-list-item__link--is-selected[data-lumx-hover], .lumx-list-item__link--is-selected[data-focus-visible-added], .lumx-list-item .lumx-action-area__action[aria-selected=true]::before[data-lumx-hover], .lumx-list-item .lumx-action-area__action[aria-selected=true]::before[data-focus-visible-added] {
  background-color: var(--lumx-color-primary-L4);
}
@media (hover: hover) {
.lumx-list-item__link--is-selected:hover, .lumx-list-item .lumx-action-area__action[aria-selected=true]::before:hover {
  background-color: var(--lumx-color-primary-L4);
}}
.lumx-list-item__link--is-selected:active, .lumx-list-item__link--is-selected[data-lumx-active], .lumx-list-item .lumx-action-area__action[aria-selected=true]::before:active, .lumx-list-item .lumx-action-area__action[aria-selected=true]::before[data-lumx-active] {
  background-color: var(--lumx-color-primary-L3);
}
.lumx-list-item__link--is-disabled, .lumx-list-item__link[aria-disabled=true], .lumx-list-item:has(.lumx-action-area__action[aria-disabled=true]) {
  opacity: 0.5;
  cursor: default;
}
.lumx-list-item__before, .lumx-list-item__after {
  position: relative;
  z-index: 1;
}

/* Item spacing
   ========================================================================== */
.lumx-list:has(.lumx-list-item__link) .lumx-list-item__link, .lumx-list.lumx-list--item-padding-big .lumx-list-item__link,
.lumx-list:has(.lumx-list-item__link) .lumx-list-item__wrapper,
.lumx-list.lumx-list--item-padding-big .lumx-list-item__wrapper {
  padding-right: 16px;
  padding-left: 16px;
}
.lumx-list.lumx-list--item-padding-huge .lumx-list-item__link,
.lumx-list.lumx-list--item-padding-huge .lumx-list-item__wrapper {
  padding-right: 24px;
  padding-left: 24px;
}

/* Item content
   ========================================================================== */
.lumx-list-item__content {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  flex: 1 1 auto;
}

/* Subheader
   ========================================================================== */
.lumx-list-subheader {
  font-size: 10px;
  font-weight: var(--lumx-typography-interface-overline-font-weight);
  line-height: 12px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  height: 36px;
  color: var(--lumx-color-dark-L2);
}
.lumx-list-subheader i {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  margin-right: 8px;
}
.lumx-list:has(.lumx-list-item__link) .lumx-list-subheader, .lumx-list.lumx-list--item-padding-big .lumx-list-subheader {
  padding-right: 16px;
  padding-left: 16px;
}
.lumx-list.lumx-list--item-padding-huge .lumx-list-subheader {
  padding-right: 24px;
  padding-left: 24px;
}

/* Section
   ========================================================================== */
.lumx-list-section:not([hidden]) ~ .lumx-list-section:not(.lumx-list-section:not([hidden]) + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
  content: "";
  display: block;
  height: 1px;
  margin: 8px 0;
  background-color: var(--lumx-color-dark-L5);
}
.lumx-list-section:not(:last-child):not(:has(+ .lumx-list-divider)):not(:has(+ [hidden]))::after {
  content: "";
  display: block;
  height: 1px;
  margin: 8px 0;
  background-color: var(--lumx-color-dark-L5);
}
.lumx-list-section__title {
  font-size: 10px;
  font-weight: var(--lumx-typography-interface-overline-font-weight);
  line-height: 12px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  height: 36px;
  color: var(--lumx-color-dark-L2);
}
.lumx-list-section__title i {
  margin-right: 4px;
}
.lumx-list:has(.lumx-list-item__link) .lumx-list-section__title, .lumx-list.lumx-list--item-padding-big .lumx-list-section__title {
  padding-right: 16px;
  padding-left: 16px;
}
.lumx-list.lumx-list--item-padding-huge .lumx-list-section__title {
  padding-right: 24px;
  padding-left: 24px;
}
.lumx-list-section__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Divider
   ========================================================================== */
.lumx-list-divider {
  height: 1px;
  margin: 8px 0;
  background-color: var(--lumx-color-dark-L5);
}

/* ==========================================================================
   Message
   ========================================================================== */
.lumx-message {
  display: flex;
  align-items: flex-start;
}
.lumx-message--has-background {
  padding: 16px;
  border-radius: var(--lumx-border-radius);
}
.lumx-message__icon {
  flex-shrink: 0;
  margin-right: 8px;
}
.lumx-message__text {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  flex: 1 1 auto;
  color: var(--lumx-color-dark-N);
}
.lumx-message__close-button {
  flex-shrink: 0;
}

/* Message kind
   ========================================================================== */
.lumx-message--color-blue.lumx-message--has-background {
  background-color: var(--lumx-color-blue-L6);
}

.lumx-message--color-yellow.lumx-message--has-background {
  background-color: var(--lumx-color-yellow-L6);
}

.lumx-message--color-red.lumx-message--has-background {
  background-color: var(--lumx-color-red-L6);
}

.lumx-message--color-green.lumx-message--has-background {
  background-color: var(--lumx-color-green-L6);
}

/* ==========================================================================
   Mosaic
   ========================================================================== */
.lumx-mosaic {
  position: relative;
  padding-top: 66.66%;
}
.lumx-mosaic__wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 2px;
}
.lumx-mosaic--has-1-thumbnail .lumx-mosaic__wrapper {
  grid: minmax(0, 1fr)/1fr;
  grid-template-areas: "b";
}
.lumx-mosaic--has-2-thumbnails .lumx-mosaic__wrapper {
  grid: minmax(0, 1fr)/1fr 1fr;
  grid-template-areas: "b21 b22";
}
.lumx-mosaic--has-3-thumbnails .lumx-mosaic__wrapper {
  grid: minmax(0, 1fr) minmax(0, 1fr)/3fr 1fr;
  grid-template-areas: "b3 s31" "b3 s32";
}
.lumx-mosaic--has-4-thumbnails .lumx-mosaic__wrapper {
  grid: minmax(0, 2fr) minmax(0, 1fr)/1fr 1fr 1fr;
  grid-template-areas: "b4 b4 b4" "s41 s42 s43";
}
.lumx-mosaic__thumbnail {
  position: relative;
  display: flex;
  flex-direction: column;
}
.lumx-mosaic__thumbnail:has([data-focus-visible-added]) {
  z-index: 1;
}
.lumx-mosaic--has-1-thumbnail .lumx-mosaic__thumbnail:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: b;
}
.lumx-mosaic--has-2-thumbnails .lumx-mosaic__thumbnail:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: b21;
}
.lumx-mosaic--has-2-thumbnails .lumx-mosaic__thumbnail:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: b22;
}
.lumx-mosaic--has-3-thumbnails .lumx-mosaic__thumbnail:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: b3;
}
.lumx-mosaic--has-3-thumbnails .lumx-mosaic__thumbnail:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: s31;
}
.lumx-mosaic--has-3-thumbnails .lumx-mosaic__thumbnail:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: s32;
}
.lumx-mosaic--has-4-thumbnails .lumx-mosaic__thumbnail:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: b4;
}
.lumx-mosaic--has-4-thumbnails .lumx-mosaic__thumbnail:nth-child(2) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: s41;
}
.lumx-mosaic--has-4-thumbnails .lumx-mosaic__thumbnail:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: s42;
}
.lumx-mosaic--has-4-thumbnails .lumx-mosaic__thumbnail:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: s43;
}
.lumx-mosaic__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-color: var(--lumx-color-dark-L3);
}
.lumx-mosaic__overlay span {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
  color: var(--lumx-color-light-N);
}

/* stylelint-disable custom-property-pattern */
/* ==========================================================================
   Navigation
   ========================================================================== */
/* Navigation Item
   ========================================================================== */
.lumx-navigation-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  order: 0;
}
.lumx-navigation-item__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
  min-height: var(--lumx-navigation-item-min-height);
  padding: 0 var(--lumx-navigation-item-padding-horizontal);
  padding-right: calc(var(--lumx-navigation-item-padding-horizontal) - var(--_border-right-width));
  padding-left: calc(var(--lumx-navigation-item-padding-horizontal) - var(--_border-left-width));
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--_background-color);
  border-color: var(--_border-color);
  border-style: solid;
  border-width: var(--_border-top-width) var(--_border-right-width) var(--_border-bottom-width) var(--_border-left-width);
  border-radius: var(--lumx-navigation-item-border-radius);
  outline: none;
  font-family: var(--lumx-typography-custom-navigation-item-font-family);
  font-size: var(--lumx-typography-custom-navigation-item-font-size);
  font-style: var(--lumx-typography-custom-navigation-item-font-style);
  font-weight: var(--lumx-typography-custom-navigation-item-font-weight);
  line-height: var(--lumx-typography-custom-navigation-item-line-height);
}
.lumx-navigation-item .lumx-navigation-item__label {
  overflow: hidden;
  color: var(--_label-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lumx-navigation-item .lumx-navigation-item__icon {
  margin-right: 8px;
  color: var(--_icon-color);
}

.lumx-navigation-item--theme-light > .lumx-navigation-item__link {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-default-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-default-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-default-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-default-border-left-width);
}
.lumx-navigation-item--theme-light > .lumx-navigation-item__link[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-navigation-item--theme-light > .lumx-navigation-item__link[data-lumx-hover] {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-left-width);
}
@media (hover: hover) {
.lumx-navigation-item--theme-light > .lumx-navigation-item__link:hover {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-left-width);
}}
.lumx-navigation-item--theme-light > .lumx-navigation-item__link:active, .lumx-navigation-item--theme-light > .lumx-navigation-item__link[data-lumx-active] {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-active-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-active-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-active-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-active-border-left-width);
}

.lumx-navigation-item--theme-dark > .lumx-navigation-item__link {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-default-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-default-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-default-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-default-border-left-width);
}
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link[data-lumx-hover] {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-left-width);
}
@media (hover: hover) {
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link:hover {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-hover-border-left-width);
}}
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link:active, .lumx-navigation-item--theme-dark > .lumx-navigation-item__link[data-lumx-active] {
  --_background-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-low-state-active-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-low-state-active-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-low-state-active-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-low-state-active-border-left-width);
}

.lumx-navigation-item--theme-light > .lumx-navigation-item__link--is-selected {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-left-width);
}
.lumx-navigation-item--theme-light > .lumx-navigation-item__link--is-selected[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-navigation-item--theme-light > .lumx-navigation-item__link--is-selected[data-lumx-hover] {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-left-width);
}
@media (hover: hover) {
.lumx-navigation-item--theme-light > .lumx-navigation-item__link--is-selected:hover {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-left-width);
}}
.lumx-navigation-item--theme-light > .lumx-navigation-item__link--is-selected:active, .lumx-navigation-item--theme-light > .lumx-navigation-item__link--is-selected[data-lumx-active] {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-left-width);
}

.lumx-navigation-item--theme-dark > .lumx-navigation-item__link--is-selected {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-default-border-left-width);
}
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link--is-selected[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link--is-selected[data-lumx-hover] {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-left-width);
}
@media (hover: hover) {
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link--is-selected:hover {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-hover-border-left-width);
}}
.lumx-navigation-item--theme-dark > .lumx-navigation-item__link--is-selected:active, .lumx-navigation-item--theme-dark > .lumx-navigation-item__link--is-selected[data-lumx-active] {
  --_background-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color);
  --_border-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color);
  --_label-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color);
  --_icon-color: var(--lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color);
  --_border-top-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-top-width);
  --_border-right-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-right-width);
  --_border-bottom-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-bottom-width);
  --_border-left-width: var(--lumx-navigation-item-emphasis-selected-state-active-border-left-width);
}

/* Navigation Section
  ========================================================================== */
.lumx-navigation-section {
  flex-direction: column;
  align-items: normal;
}
.lumx-navigation-section__drawer {
  padding-left: 24px;
}
.lumx-navigation-section .lumx-navigation-section__chevron {
  padding-left: 8px;
  margin-right: 0;
  margin-left: auto;
}

/* Navigation
   ========================================================================== */
.lumx-navigation {
  padding: 0;
  margin: 0;
  list-style: none;
  outline: none;
}
.lumx-navigation--orientation-horizontal .lumx-navigation__list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow: hidden;
}
.lumx-navigation--orientation-horizontal .lumx-navigation-item {
  max-width: 216px;
}
.lumx-navigation--orientation-horizontal .lumx-navigation-section__drawer--popover {
  flex-direction: column;
  min-width: 256px;
  max-width: 400px;
  padding: 8px;
}
.lumx-navigation--orientation-horizontal .lumx-navigation-section__drawer--popover .lumx-navigation-item {
  width: 100%;
  max-width: 100%;
}

/* ==========================================================================
   Notification
   ========================================================================== */
.lumx-notification {
  box-shadow: 0 4px 16px 0 var(--lumx-color-dark-L4);
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--lumx-color-light-N);
  border-radius: var(--lumx-border-radius);
  transition: opacity 200ms;
  animation: lumx-notification-show 200ms;
}
@media (prefers-reduced-motion: reduce) {
  .lumx-notification {
    transition: none;
    animation: none;
  }
}
.lumx-notification--is-hidden {
  opacity: 0;
}
.lumx-notification__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}
.lumx-notification__content {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  padding: 0 16px;
  color: var(--lumx-color-dark-N);
}
.lumx-notification__action {
  padding-right: 8px;
}

@keyframes lumx-notification-show {
  0% {
    opacity: 0;
    transform: translateY(52px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Notification colors
   ========================================================================== */
.lumx-notification--color-blue .lumx-notification__icon {
  background-color: var(--lumx-color-blue-N);
  color: var(--lumx-color-light-N);
}

.lumx-notification--color-yellow .lumx-notification__icon {
  background-color: var(--lumx-color-yellow-N);
  color: var(--lumx-color-dark-L1);
}

.lumx-notification--color-red .lumx-notification__icon {
  background-color: var(--lumx-color-red-N);
  color: var(--lumx-color-light-N);
}

.lumx-notification--color-green .lumx-notification__icon {
  background-color: var(--lumx-color-green-N);
  color: var(--lumx-color-light-N);
}

/* ==========================================================================
   Notification block
   ========================================================================== */
.lumx-notification-block {
  display: flex;
  align-items: flex-start;
}
.lumx-notification-block__before {
  flex-shrink: 0;
  margin-right: 16px;
}
.lumx-notification-block__content {
  flex: 1 1 auto;
}
.lumx-notification-block__title {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
  display: block;
  margin-bottom: 4px;
}
.lumx-notification-block__description {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-notification-block__date {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  display: block;
  color: var(--lumx-color-dark-L2);
}
.lumx-notification-block__after {
  flex-shrink: 0;
  margin-left: 16px;
}

/* ==========================================================================
   Popover
   ========================================================================== */
.lumx-popover {
  z-index: 999;
  display: flex;
  background-color: var(--lumx-color-light-N);
  border-radius: var(--lumx-border-radius);
}
.lumx-popover--is-hidden {
  display: none;
}
.lumx-popover--is-initializing {
  opacity: 0;
}
.lumx-popover > * {
  flex: 1 auto;
}
.lumx-popover__wrapper {
  position: relative;
}
.lumx-popover__arrow {
  position: absolute;
  z-index: -1;
  width: 14px;
  height: 14px;
  fill: var(--lumx-color-light-N);
}
.lumx-popover__arrow svg {
  display: block;
}
.lumx-popover[data-popper-placement^=top] .lumx-popover__arrow {
  bottom: -14px;
}
.lumx-popover[data-popper-placement^=top] .lumx-popover__arrow svg {
  transform: rotate(180deg);
}
.lumx-popover[data-popper-placement^=bottom] .lumx-popover__arrow {
  top: -14px;
}
.lumx-popover[data-popper-placement^=left] .lumx-popover__arrow {
  right: -14px;
}
.lumx-popover[data-popper-placement^=left] .lumx-popover__arrow svg {
  transform: rotate(90deg);
}
.lumx-popover[data-popper-placement^=right] .lumx-popover__arrow {
  left: -14px;
}
.lumx-popover[data-popper-placement^=right] .lumx-popover__arrow svg {
  transform: rotate(-90deg);
}
.lumx-popover--theme-dark {
  background: var(--lumx-color-dark-N);
  color: var(--lumx-color-light-N);
}
.lumx-popover--theme-dark .lumx-popover__arrow {
  fill: var(--lumx-color-dark-N);
}

/* Elevations
   ========================================================================== */
.lumx-popover--elevation-1 {
  filter: drop-shadow(0 0 1px var(--lumx-color-dark-L4));
}

.lumx-popover--elevation-2 {
  filter: drop-shadow(0 1px 2px var(--lumx-color-dark-L4));
}

.lumx-popover--elevation-3 {
  filter: drop-shadow(0 2px 4px var(--lumx-color-dark-L4));
}

.lumx-popover--elevation-4 {
  filter: drop-shadow(0 4px 8px var(--lumx-color-dark-L4));
}

.lumx-popover--elevation-5 {
  filter: drop-shadow(0 8px 16px var(--lumx-color-dark-L4));
}

/* ==========================================================================
   Post block
   ========================================================================== */
.lumx-post-block--orientation-horizontal {
  display: flex;
}
.lumx-post-block--orientation-horizontal .lumx-post-block__thumbnail {
  flex-shrink: 0;
  width: 33.33%;
  margin-right: 24px;
}
.lumx-post-block--orientation-vertical .lumx-post-block__thumbnail {
  margin-bottom: 24px;
}
.lumx-post-block__wrapper {
  display: flex;
  flex-direction: column;
}
.lumx-post-block--orientation-horizontal .lumx-post-block__wrapper {
  flex: 1 1 auto;
}
.lumx-post-block__author {
  margin-bottom: 8px;
}
.lumx-post-block__title {
  font-size: 20px;
  font-weight: var(--lumx-typography-interface-title-font-weight);
  line-height: 30px;
  display: block;
  margin-bottom: 8px;
}
.lumx-post-block--theme-light .lumx-post-block__title {
  display: inline;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  color: var(--lumx-color-dark-N);
}
:where(.lumx-post-block--theme-light .lumx-post-block__title:not(.lumx-post-block--theme-light .lumx-post-block__title--has-typography)) {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.lumx-post-block--theme-light .lumx-post-block__title:not(:disabled):not([aria-disabled=true])[data-lumx-hover], .lumx-post-block--theme-light .lumx-post-block__title:not(:disabled):not([aria-disabled=true])[data-focus-visible-added] {
  text-decoration: underline;
}
@media (hover: hover) {
.lumx-post-block--theme-light .lumx-post-block__title:not(:disabled):not([aria-disabled=true]):hover {
  text-decoration: underline;
}}
.lumx-post-block--theme-light .lumx-post-block__title[data-focus-visible-added], .lumx-post-block--theme-light .lumx-post-block__title:focus-visible {
  outline: 1px auto currentColor;
  outline-offset: 2px;
}
.lumx-post-block--theme-dark .lumx-post-block__title {
  display: inline;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  color: var(--lumx-color-light-N);
}
:where(.lumx-post-block--theme-dark .lumx-post-block__title:not(.lumx-post-block--theme-dark .lumx-post-block__title--has-typography)) {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.lumx-post-block--theme-dark .lumx-post-block__title:not(:disabled):not([aria-disabled=true])[data-lumx-hover], .lumx-post-block--theme-dark .lumx-post-block__title:not(:disabled):not([aria-disabled=true])[data-focus-visible-added] {
  text-decoration: underline;
}
@media (hover: hover) {
.lumx-post-block--theme-dark .lumx-post-block__title:not(:disabled):not([aria-disabled=true]):hover {
  text-decoration: underline;
}}
.lumx-post-block--theme-dark .lumx-post-block__title[data-focus-visible-added], .lumx-post-block--theme-dark .lumx-post-block__title:focus-visible {
  outline: 1px auto currentColor;
  outline-offset: 2px;
}
.lumx-post-block__meta {
  font-size: 12px;
  font-weight: var(--lumx-typography-interface-caption-font-weight);
  line-height: 16px;
  display: block;
  margin-bottom: 8px;
}
.lumx-post-block--theme-light .lumx-post-block__meta {
  color: var(--lumx-color-dark-L2);
}
.lumx-post-block--theme-dark .lumx-post-block__meta {
  color: var(--lumx-color-light-L2);
}
.lumx-post-block__text {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  margin-bottom: 8px;
}
.lumx-post-block--theme-light .lumx-post-block__text {
  color: var(--lumx-color-dark-N);
}
.lumx-post-block--theme-dark .lumx-post-block__text {
  color: var(--lumx-color-light-N);
}
.lumx-post-block__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.lumx-post-block__attachments {
  margin-top: 8px;
  margin-bottom: 8px;
}
.lumx-post-block__tags {
  flex: 1 1 auto;
  margin-top: 8px;
}
.lumx-post-block__actions {
  flex-shrink: 0;
  margin-top: 8px;
}

/* ==========================================================================
   Progress
   ========================================================================== */
.lumx-progress--variant-circular {
  width: 36px;
  height: 36px;
}

/* Circular
   ========================================================================== */
.lumx-progress-circular {
  position: relative;
  width: 36px;
  height: 36px;
  /* Circular sizes */
}
.lumx-progress-circular--display-inline {
  display: inline-block;
}
.lumx-progress-circular__double-bounce1, .lumx-progress-circular__double-bounce2 {
  position: absolute;
  top: 0;
  left: 0;
  display: var(--lumx-material-progress-bounce);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: lumx-progress-bounce 2s infinite ease-in-out;
}
.lumx-progress-circular--theme-light .lumx-progress-circular__double-bounce1, .lumx-progress-circular--theme-light .lumx-progress-circular__double-bounce2, .lumx-progress--theme-light .lumx-progress-circular__double-bounce1, .lumx-progress--theme-light .lumx-progress-circular__double-bounce2 {
  background-color: var(--lumx-color-primary-L3);
}
.lumx-progress-circular--theme-dark .lumx-progress-circular__double-bounce1, .lumx-progress-circular--theme-dark .lumx-progress-circular__double-bounce2, .lumx-progress--theme-dark .lumx-progress-circular__double-bounce1, .lumx-progress--theme-dark .lumx-progress-circular__double-bounce2 {
  background-color: var(--lumx-color-light-L3);
}
.lumx-progress-circular__double-bounce2 {
  animation-delay: -1s;
}
.lumx-progress-circular__svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: var(--lumx-material-progress-rotate);
  width: 36px;
  height: 36px;
  margin: auto;
  transform-origin: center center;
  animation: lumx-progress-rotate 2s linear infinite;
}
.lumx-progress-circular__path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: butt;
  animation: lumx-progress-dash 1.5s ease-in-out infinite;
}
.lumx-progress-circular--theme-light .lumx-progress-circular__path, .lumx-progress--theme-light .lumx-progress-circular__path {
  stroke: var(--lumx-color-primary-N);
}
.lumx-progress-circular--theme-dark .lumx-progress-circular__path, .lumx-progress--theme-dark .lumx-progress-circular__path {
  stroke: var(--lumx-color-light-N);
}
.lumx-progress-circular--size-xxs, .lumx-progress-circular--size-xxs .lumx-progress-circular__svg {
  width: 14px;
  height: 14px;
}
.lumx-progress-circular--size-xs, .lumx-progress-circular--size-xs .lumx-progress-circular__svg {
  width: 20px;
  height: 20px;
}
.lumx-progress-circular--size-s, .lumx-progress-circular--size-s .lumx-progress-circular__svg {
  width: 24px;
  height: 24px;
}
.lumx-progress-circular--size-m, .lumx-progress-circular--size-m .lumx-progress-circular__svg {
  width: 36px;
  height: 36px;
}

@keyframes lumx-progress-bounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
@keyframes lumx-progress-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes lumx-progress-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
/* Linear
   ========================================================================== */
.lumx-progress-linear {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
}
.lumx-progress-linear__line1, .lumx-progress-linear__line2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.lumx-progress-linear--theme-light .lumx-progress-linear__line1, .lumx-progress-linear--theme-light .lumx-progress-linear__line2, .lumx-progress--theme-light .lumx-progress-linear__line1, .lumx-progress--theme-light .lumx-progress-linear__line2 {
  background-color: var(--lumx-color-primary-L3);
}
.lumx-progress-linear--theme-dark .lumx-progress-linear__line1, .lumx-progress-linear--theme-dark .lumx-progress-linear__line2, .lumx-progress--theme-dark .lumx-progress-linear__line1, .lumx-progress--theme-dark .lumx-progress-linear__line2 {
  background-color: var(--lumx-color-light-L3);
}
.lumx-progress-linear__line2 {
  transform: scaleX(0);
  transform-origin: center left;
  animation: lumx-progress-expand 2s infinite ease-in-out;
}

@keyframes lumx-progress-expand {
  0% {
    transform: scaleX(0);
    transform-origin: center left;
  }
  49% {
    transform: scaleX(1);
    transform-origin: center left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: center right;
  }
  99% {
    transform: scaleX(0);
    transform-origin: center right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: center left;
  }
}
/* ==========================================================================
   Progress tracker
   ========================================================================== */
.lumx-progress-tracker {
  position: relative;
}
.lumx-progress-tracker__steps {
  position: relative;
  z-index: 1;
  display: flex;
}
.lumx-progress-tracker__background-bar, .lumx-progress-tracker__foreground-bar {
  position: absolute;
  top: 19px;
  z-index: 0;
  height: 2px;
}
.lumx-progress-tracker__background-bar {
  background-color: var(--lumx-color-dark-L5);
}
.lumx-progress-tracker__foreground-bar {
  background-color: var(--lumx-color-primary-N);
  transition: transform 400ms;
  transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .lumx-progress-tracker__foreground-bar {
    transition: none;
  }
}

/* Step
   ========================================================================== */
.lumx-progress-tracker-step {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  background: none;
  border: none;
  border-radius: var(--lumx-border-radius);
  outline: none;
}
.lumx-progress-tracker-step--is-clickable {
  transition-duration: 150ms;
  transition-property: background-color, box-shadow, color;
  cursor: pointer;
}
.lumx-progress-tracker-step__state {
  position: relative;
  color: var(--lumx-color-dark-L5);
}
.lumx-progress-tracker-step--is-active .lumx-progress-tracker-step__state, .lumx-progress-tracker-step--is-complete .lumx-progress-tracker-step__state {
  color: var(--lumx-color-primary-N);
}
.lumx-progress-tracker-step--has-error .lumx-progress-tracker-step__state {
  color: var(--lumx-color-red-N);
}
.lumx-progress-tracker-step__state::before {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -1;
  display: block;
  width: 20px;
  height: 20px;
  content: "";
  background-color: var(--lumx-color-light-N);
}
.lumx-progress-tracker-step__label, .lumx-progress-tracker-step__helper {
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.lumx-progress-tracker-step__label {
  margin-top: 8px;
  cursor: unset;
}

/* Step states
   ========================================================================== */
@media (hover: hover) {
.lumx-progress-tracker-step--is-clickable:hover {
  background-color: var(--lumx-color-dark-L5);
}}

.lumx-progress-tracker-step--is-clickable:active {
  background-color: var(--lumx-color-dark-L4);
}

.lumx-progress-tracker-step[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}

/* Step panel
   ========================================================================== */
.lumx-step-panel {
  display: none;
  outline: none;
}
.lumx-step-panel[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-step-panel--is-active {
  display: block;
}

/* ==========================================================================
   Radio button
   ========================================================================== */
.lumx-radio-button {
  display: flex;
}
.lumx-radio-button__input-wrapper {
  position: relative;
  width: var(--lumx-material-radio-button-wrapper-size);
  height: var(--lumx-material-radio-button-wrapper-size);
}
.lumx-radio-button__input-native {
  position: relative;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--lumx-material-radio-button-wrapper-size);
  height: var(--lumx-material-radio-button-wrapper-size);
  padding: 0;
  margin: 0;
  opacity: 0;
}
.lumx-radio-button__input-placeholder {
  position: absolute;
  top: calc((var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2);
  left: calc((var(--lumx-material-radio-button-wrapper-size) - var(--lumx-material-radio-button-control-size)) / 2);
  z-index: 1;
  width: var(--lumx-material-radio-button-control-size);
  height: var(--lumx-material-radio-button-control-size);
  border-radius: 50%;
}
.lumx-radio-button__input-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
}
.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-background {
  color: var(--lumx-color-dark-N);
}
.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-background {
  color: var(--lumx-color-light-N);
}
.lumx-radio-button--theme-light.lumx-radio-button--is-checked .lumx-radio-button__input-background {
  color: var(--lumx-color-primary-N);
}
.lumx-radio-button--theme-dark.lumx-radio-button--is-checked .lumx-radio-button__input-background {
  color: var(--lumx-color-light-N);
}
.lumx-radio-button__input-indicator {
  position: absolute;
  top: calc((var(--lumx-material-radio-button-control-size) - var(--lumx-material-radio-button-indicator-size)) / 2);
  left: calc((var(--lumx-material-radio-button-control-size) - var(--lumx-material-radio-button-indicator-size)) / 2);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lumx-material-radio-button-indicator-size);
  height: var(--lumx-material-radio-button-indicator-size);
  border-radius: 50%;
}
.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-indicator {
  opacity: 0;
  background-color: var(--lumx-color-primary-N);
}
.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-indicator {
  opacity: 0;
  background-color: var(--lumx-color-light-N);
}
.lumx-radio-button--theme-light.lumx-radio-button--is-checked .lumx-radio-button__input-indicator {
  opacity: 1;
  background-color: var(--lumx-color-primary-N);
}
.lumx-radio-button--theme-dark.lumx-radio-button--is-checked .lumx-radio-button__input-indicator {
  opacity: 1;
  background-color: var(--lumx-color-light-N);
}
.lumx-radio-button__label, .lumx-radio-button__helper {
  padding-left: 8px;
}
.lumx-radio-button__helper {
  margin-top: 4px;
}

/* Radio button states
   ========================================================================== */
.lumx-radio-button--is-disabled .lumx-radio-button__input-placeholder {
  opacity: 0.5;
  cursor: default;
}
.lumx-radio-button--is-disabled.lumx-radio-button--theme-light .lumx-radio-button__label,
.lumx-radio-button--is-disabled.lumx-radio-button--theme-light .lumx-radio-button__helper {
  color: var(--lumx-color-dark-L3);
}
.lumx-radio-button--is-disabled.lumx-radio-button--theme-dark .lumx-radio-button__label,
.lumx-radio-button--is-disabled.lumx-radio-button--theme-dark .lumx-radio-button__helper {
  color: var(--lumx-color-light-L3);
}

@media (hover: hover) {

:not(.lumx-radio-button--is-disabled).lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:hover + .lumx-radio-button__input-placeholder .lumx-radio-button__input-background {
  background-color: var(--lumx-color-dark-L5);
}}
@media (hover: hover) {
:not(.lumx-radio-button--is-disabled).lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:hover + .lumx-radio-button__input-placeholder .lumx-radio-button__input-background {
  background-color: var(--lumx-color-light-L5);
}}
:not(.lumx-radio-button--is-disabled).lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:active + .lumx-radio-button__input-placeholder .lumx-radio-button__input-background {
  background-color: var(--lumx-color-dark-L4);
}
:not(.lumx-radio-button--is-disabled).lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:active + .lumx-radio-button__input-placeholder .lumx-radio-button__input-background {
  background-color: var(--lumx-color-light-L4);
}

.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}

.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

.lumx-radio-button--theme-light.lumx-radio-button--is-checked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}

.lumx-radio-button--theme-dark.lumx-radio-button--is-checked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}

/* Radio group
   ========================================================================== */
.lumx-radio-group > .lumx-radio-button {
  margin-bottom: 12px;
}
.lumx-radio-group > .lumx-radio-button:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Select
   ========================================================================== */
.lumx-select {
  --lumx-text-field-wrapper-padding-vertical:
      calc(
          (var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
      );
  padding-top: var(--lumx-material-text-field-padding-top);
  padding-bottom: var(--lumx-material-text-field-padding-bottom);
}
.lumx-select__header {
  margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
}
.lumx-select__label {
  font-size: var(--lumx-material-text-field-header-label-font-size);
  font-weight: var(--lumx-material-text-field-header-label-font-weight);
  line-height: var(--lumx-material-text-field-header-label-line-height);
}
.lumx-select--theme-light .lumx-select__label {
  color: var(--lumx-text-field-state-default-theme-light-header-label-color);
}
.lumx-select--theme-dark .lumx-select__label {
  color: var(--lumx-text-field-state-default-theme-dark-header-label-color);
}
.lumx-select__wrapper {
  cursor: pointer;
}
.lumx-select--theme-light .lumx-select__wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: var(--lumx-text-field-input-min-height);
  padding: 0 var(--lumx-text-field-input-padding-horizontal);
  background-color: var(--lumx-text-field-state-default-theme-light-input-background-color);
  border-radius: var(--lumx-text-field-input-border-radius);
  outline: none;
  transition-duration: 100ms;
  transition-property: background-color, box-shadow;
}
.lumx-select--theme-light .lumx-select__wrapper::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border: 0 solid var(--lumx-text-field-state-default-theme-light-input-border-color);
  border-width: var(--lumx-text-field-state-default-input-border-top-width) var(--lumx-text-field-state-default-input-border-right-width) var(--lumx-text-field-state-default-input-border-bottom-width) var(--lumx-text-field-state-default-input-border-left-width);
  border-radius: var(--lumx-text-field-input-border-radius);
}
.lumx-select--theme-dark .lumx-select__wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: var(--lumx-text-field-input-min-height);
  padding: 0 var(--lumx-text-field-input-padding-horizontal);
  background-color: var(--lumx-text-field-state-default-theme-dark-input-background-color);
  border-radius: var(--lumx-text-field-input-border-radius);
  outline: none;
  transition-duration: 100ms;
  transition-property: background-color, box-shadow;
}
.lumx-select--theme-dark .lumx-select__wrapper::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border: 0 solid var(--lumx-text-field-state-default-theme-dark-input-border-color);
  border-width: var(--lumx-text-field-state-default-input-border-top-width) var(--lumx-text-field-state-default-input-border-right-width) var(--lumx-text-field-state-default-input-border-bottom-width) var(--lumx-text-field-state-default-input-border-left-width);
  border-radius: var(--lumx-text-field-input-border-radius);
}
.lumx-select--theme-light .lumx-select__input-icon {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2);
  margin-right: 8px;
  color: var(--lumx-color-dark-N);
  color: var(--lumx-text-field-state-default-theme-light-input-content-color);
}
.lumx-select--theme-dark .lumx-select__input-icon {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2);
  margin-right: 8px;
  color: var(--lumx-color-light-N);
  color: var(--lumx-text-field-state-default-theme-dark-input-content-color);
}
.lumx-select__chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  margin: calc((var(--lumx-text-field-input-min-height) - var(--lumx-size-s) - 6px) / 2 + 3px) 0;
  gap: 6px;
  min-width: 0;
}
.lumx-select--theme-light .lumx-select__input-native {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--lumx-material-text-field-input-content-font-size);
  line-height: var(--lumx-material-text-field-input-content-line-height);
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--lumx-color-dark-N);
  color: var(--lumx-text-field-state-default-theme-light-input-content-color);
}
.lumx-select--theme-light .lumx-select__input-native[type=number]::-webkit-inner-spin-button, .lumx-select--theme-light .lumx-select__input-native[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.lumx-select--theme-dark .lumx-select__input-native {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--lumx-material-text-field-input-content-font-size);
  line-height: var(--lumx-material-text-field-input-content-line-height);
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--lumx-color-light-N);
  color: var(--lumx-text-field-state-default-theme-dark-input-content-color);
}
.lumx-select--theme-dark .lumx-select__input-native[type=number]::-webkit-inner-spin-button, .lumx-select--theme-dark .lumx-select__input-native[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.lumx-select--theme-light .lumx-select__input-native--placeholder {
  color: var(--lumx-text-field-state-default-theme-light-input-placeholder-color);
}
.lumx-select--theme-dark .lumx-select__input-native--placeholder {
  color: var(--lumx-text-field-state-default-theme-dark-input-placeholder-color);
}
.lumx-select__input-native span {
  display: block;
  margin: var(--lumx-text-field-wrapper-padding-vertical) 0;
  word-break: break-word;
}
.lumx-select__input-clear {
  flex-shrink: 0;
  margin: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-button-height) / 1.5) / 2) 4px;
  margin-right: 0;
}
.lumx-select--theme-light .lumx-select__input-indicator {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-s)) / 2);
  margin-left: 4px;
  color: var(--lumx-color-dark-N);
}
.lumx-select--theme-dark .lumx-select__input-indicator {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-s)) / 2);
  margin-left: 4px;
  color: var(--lumx-color-light-N);
}
.lumx-select__helper {
  margin-top: 8px;
}
.lumx-select__choices-filter {
  border-bottom-color: var(--lumx-color-dark-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
}
.lumx-select__choices-filter i {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2);
  margin-right: 8px;
  color: var(--lumx-color-dark-N);
}
.lumx-select__choices-filter input {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--lumx-material-text-field-input-content-font-size);
  line-height: var(--lumx-material-text-field-input-content-line-height);
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--lumx-color-dark-N);
}
.lumx-select__choices-filter input[type=number]::-webkit-inner-spin-button, .lumx-select__choices-filter input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.lumx-select__choices-filter input::-moz-placeholder {
  color: var(--lumx-color-dark-L2);
}
.lumx-select__choices-filter input::placeholder {
  color: var(--lumx-color-dark-L2);
}
.lumx-select__choices-loader {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
.lumx-select__choices-helper {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  display: flex;
  justify-content: center;
  padding: 16px 0;
  color: var(--lumx-color-dark-L3);
}

/* Select states
   ========================================================================== */
.lumx-select--is-disabled .lumx-select__wrapper {
  opacity: 0.5;
  cursor: default;
}
.lumx-select--is-disabled.lumx-select--theme-light .lumx-select__label {
  color: var(--lumx-color-dark-L3);
}
.lumx-select--is-disabled.lumx-select--theme-dark .lumx-select__label {
  color: var(--lumx-color-light-L3);
}

@media (hover: hover) {

.lumx-select--theme-light .lumx-select__wrapper:hover {
  background-color: var(--lumx-text-field-state-hover-theme-light-input-background-color);
}}
@media (hover: hover) {
.lumx-select--theme-light .lumx-select__wrapper:hover::before {
  border-color: var(--lumx-text-field-state-hover-theme-light-input-border-color);
  border-width: var(--lumx-text-field-state-hover-input-border-top-width) var(--lumx-text-field-state-hover-input-border-right-width) var(--lumx-text-field-state-hover-input-border-bottom-width) var(--lumx-text-field-state-hover-input-border-left-width);
}}
.lumx-select--theme-light .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-hover-theme-light-input-content-color);
}
.lumx-select--theme-light .lumx-text-field__input-native--placeholder {
  color: var(--lumx-text-field-state-hover-theme-light-input-placeholder-color);
}

@media (hover: hover) {

.lumx-select--theme-dark .lumx-select__wrapper:hover {
  background-color: var(--lumx-text-field-state-hover-theme-dark-input-background-color);
}}
@media (hover: hover) {
.lumx-select--theme-dark .lumx-select__wrapper:hover::before {
  border-color: var(--lumx-text-field-state-hover-theme-dark-input-border-color);
  border-width: var(--lumx-text-field-state-hover-input-border-top-width) var(--lumx-text-field-state-hover-input-border-right-width) var(--lumx-text-field-state-hover-input-border-bottom-width) var(--lumx-text-field-state-hover-input-border-left-width);
}}
.lumx-select--theme-dark .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-hover-theme-dark-input-content-color);
}
.lumx-select--theme-dark .lumx-text-field__input-native--placeholder {
  color: var(--lumx-text-field-state-hover-theme-dark-input-placeholder-color);
}

.lumx-select--theme-light.lumx-select--is-open .lumx-select__wrapper,
.lumx-select--theme-light .lumx-select__wrapper:focus {
  background-color: var(--lumx-text-field-state-focus-theme-light-input-background-color);
}
.lumx-select--theme-light.lumx-select--is-open .lumx-select__wrapper::before,
.lumx-select--theme-light .lumx-select__wrapper:focus::before {
  border-color: var(--lumx-text-field-state-focus-theme-light-input-border-color);
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
}
.lumx-select--theme-light.lumx-select--is-open .lumx-select__wrapper .lumx-text-field__input-native,
.lumx-select--theme-light .lumx-select__wrapper:focus .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-focus-theme-light-input-content-color);
}
.lumx-select--theme-light.lumx-select--is-open .lumx-select__wrapper .lumx-text-field__input-native--placeholder,
.lumx-select--theme-light .lumx-select__wrapper:focus .lumx-text-field__input-native--placeholder {
  color: var(--lumx-text-field-state-focus-theme-light-input-placeholder-color);
}

.lumx-select--theme-dark.lumx-select--is-open .lumx-select__wrapper,
.lumx-select--theme-dark .lumx-select__wrapper:focus {
  background-color: var(--lumx-text-field-state-focus-theme-dark-input-background-color);
}
.lumx-select--theme-dark.lumx-select--is-open .lumx-select__wrapper::before,
.lumx-select--theme-dark .lumx-select__wrapper:focus::before {
  border-color: var(--lumx-text-field-state-focus-theme-dark-input-border-color);
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
}
.lumx-select--theme-dark.lumx-select--is-open .lumx-select__wrapper .lumx-text-field__input-native,
.lumx-select--theme-dark .lumx-select__wrapper:focus .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-focus-theme-dark-input-content-color);
}
.lumx-select--theme-dark.lumx-select--is-open .lumx-select__wrapper .lumx-text-field__input-native--placeholder,
.lumx-select--theme-dark .lumx-select__wrapper:focus .lumx-text-field__input-native--placeholder {
  color: var(--lumx-text-field-state-focus-theme-dark-input-placeholder-color);
}

/* Select validity
   ========================================================================== */
.lumx-select--theme-light.lumx-select--is-valid .lumx-select__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-green-N);
}
.lumx-select--theme-light.lumx-select--is-valid .lumx-select__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-green-N);
}

.lumx-select--theme-light.lumx-select--has-error .lumx-select__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-red-N);
}
.lumx-select--theme-light.lumx-select--has-error .lumx-select__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-red-N);
}

.lumx-select--theme-dark.lumx-select--is-valid .lumx-select__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-light-N);
}
.lumx-select--theme-dark.lumx-select--is-valid .lumx-select__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-light-N);
}

.lumx-select--theme-dark.lumx-select--has-error .lumx-select__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-light-N);
}
.lumx-select--theme-dark.lumx-select--has-error .lumx-select__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-light-N);
}

/* ==========================================================================
   Side navigation
   ========================================================================== */
.lumx-side-navigation {
  padding: 8px 0;
  margin: 0;
  list-style: none;
  outline: none;
}

/* Item
   ========================================================================== */
.lumx-side-navigation-item {
  display: flex; /* [1] */
  flex-direction: column; /* [1] */
}
.lumx-side-navigation-item__wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lumx-side-navigation-item__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  min-height: 36px;
  padding: 0 8px;
  text-align: start;
  text-decoration: none;
  border: none;
  border-radius: var(--lumx-border-radius);
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.lumx-side-navigation-item__link > i:first-child {
  flex-shrink: 0;
  margin-right: 16px;
}
.lumx-side-navigation-item__link > i:last-child {
  flex-shrink: 0;
  margin-left: 16px;
}
.lumx-side-navigation-item--emphasis-high .lumx-side-navigation-item__link > span {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: var(--lumx-typography-interface-title-font-weight);
  line-height: 30px;
}
.lumx-side-navigation-item--emphasis-medium .lumx-side-navigation-item__link > span {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
}
.lumx-side-navigation-item--emphasis-low .lumx-side-navigation-item__link > span {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-side-navigation-item__toggle {
  flex-shrink: 0;
  margin-left: 8px;
}
.lumx-side-navigation-item__children {
  padding: 8px 0;
  margin: 0;
  list-style: none;
  outline: none;
  margin-left: 36px;
}
.lumx-side-navigation-item:not(.lumx-side-navigation-item--is-open) .lumx-side-navigation-item__children {
  display: none;
}

/* Item link states
   ========================================================================== */
.lumx-side-navigation-item__link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: var(--lumx-color-dark-N);
  background-color: transparent;
}
.lumx-side-navigation-item__link[data-focus-visible-added], .lumx-side-navigation-item__link:has([data-focus-visible-added]) {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: -2px;
}
.lumx-side-navigation-item__link:not([aria-disabled=true])[data-lumx-hover], .lumx-side-navigation-item__link:not([aria-disabled=true])[data-focus-visible-added] {
  background-color: var(--lumx-color-dark-L5);
}
@media (hover: hover) {
.lumx-side-navigation-item__link:not([aria-disabled=true]):hover {
  background-color: var(--lumx-color-dark-L5);
}}
.lumx-side-navigation-item__link:not([aria-disabled=true]):active, .lumx-side-navigation-item__link:not([aria-disabled=true])[data-lumx-active] {
  background-color: var(--lumx-color-dark-L4);
}

.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link,
.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link {
  color: var(--lumx-color-primary-D2);
  background-color: var(--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-side-navigation-item-emphasis-selected-state-default-border-width) var(--lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color);
}
.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link[data-lumx-hover], .lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link[data-focus-visible-added], .lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link[data-lumx-hover], .lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link[data-focus-visible-added] {
  background-color: var(--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-side-navigation-item-emphasis-selected-state-hover-border-width) var(--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color);
}
@media (hover: hover) {
.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link:hover, .lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link:hover {
  background-color: var(--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-side-navigation-item-emphasis-selected-state-hover-border-width) var(--lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color);
}}
.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link:active, .lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link[data-lumx-active],
.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link:active,
.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link[data-lumx-active] {
  background-color: var(--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color);
  box-shadow: inset 0 0 0 var(--lumx-side-navigation-item-emphasis-selected-state-active-border-width) var(--lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color);
}

/* ==========================================================================
   Skeleton
   ========================================================================== */
@keyframes skeleton-loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* Circle
   ========================================================================== */
.lumx-skeleton-circle {
  border-radius: 50%;
}
.lumx-skeleton-circle--theme-light {
  animation: skeleton-loading 1s ease-in-out 0s infinite;
  background-color: var(--lumx-color-dark-L5);
}
.lumx-skeleton-circle--theme-dark {
  animation: skeleton-loading 1s ease-in-out 0s infinite;
  background-color: var(--lumx-color-light-L5);
}

.lumx-skeleton-circle--size-xxs {
  width: 14px;
  height: 14px;
}

.lumx-skeleton-circle--size-xs {
  width: 20px;
  height: 20px;
}

.lumx-skeleton-circle--size-s {
  width: 24px;
  height: 24px;
}

.lumx-skeleton-circle--size-m {
  width: 36px;
  height: 36px;
}

.lumx-skeleton-circle--size-l {
  width: 64px;
  height: 64px;
}

.lumx-skeleton-circle--size-xl {
  width: 128px;
  height: 128px;
}

.lumx-skeleton-circle--size-xxl {
  width: 256px;
  height: 256px;
}

.lumx-skeleton-circle--color-dark {
  background-color: var(--lumx-color-dark-L5);
}

.lumx-skeleton-circle--color-light {
  background-color: var(--lumx-color-light-L5);
}

.lumx-skeleton-circle--color-blue {
  background-color: var(--lumx-color-blue-L5);
}

.lumx-skeleton-circle--color-green {
  background-color: var(--lumx-color-green-L5);
}

.lumx-skeleton-circle--color-yellow {
  background-color: var(--lumx-color-yellow-L5);
}

.lumx-skeleton-circle--color-red {
  background-color: var(--lumx-color-red-L5);
}

.lumx-skeleton-circle--color-grey {
  background-color: var(--lumx-color-grey-L5);
}

.lumx-skeleton-circle--color-primary {
  background-color: var(--lumx-color-primary-L5);
}

.lumx-skeleton-circle--color-secondary {
  background-color: var(--lumx-color-secondary-L5);
}

.lumx-skeleton-circle--color-accent {
  background-color: var(--lumx-color-accent-L5);
}

.lumx-skeleton-circle--color-black {
  background-color: var(--lumx-color-black-L5);
}

.lumx-skeleton-circle--color-white {
  background-color: var(--lumx-color-white-L5);
}

.lumx-skeleton-circle--color-orange {
  background-color: var(--lumx-color-orange-L5);
}

/* Rectangle
   ========================================================================== */
.lumx-skeleton-rectangle--variant-rounded {
  border-radius: var(--lumx-border-radius);
}
.lumx-skeleton-rectangle--theme-light {
  animation: skeleton-loading 1s ease-in-out 0s infinite;
  background-color: var(--lumx-color-dark-L5);
}
.lumx-skeleton-rectangle--theme-dark {
  animation: skeleton-loading 1s ease-in-out 0s infinite;
  background-color: var(--lumx-color-light-L5);
}

.lumx-skeleton-rectangle--width-xxs {
  width: 14px;
}

.lumx-skeleton-rectangle--height-xxs {
  height: 14px;
}

.lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-xxs {
  border-radius: 7px;
}

.lumx-skeleton-rectangle--width-xs {
  width: 20px;
}

.lumx-skeleton-rectangle--height-xs {
  height: 20px;
}

.lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-xs {
  border-radius: 10px;
}

.lumx-skeleton-rectangle--width-s {
  width: 24px;
}

.lumx-skeleton-rectangle--height-s {
  height: 24px;
}

.lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-s {
  border-radius: 12px;
}

.lumx-skeleton-rectangle--width-m {
  width: 36px;
}

.lumx-skeleton-rectangle--height-m {
  height: 36px;
}

.lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-m {
  border-radius: 18px;
}

.lumx-skeleton-rectangle--width-l {
  width: 64px;
}

.lumx-skeleton-rectangle--height-l {
  height: 64px;
}

.lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-l {
  border-radius: 32px;
}

.lumx-skeleton-rectangle--width-xl {
  width: 128px;
}

.lumx-skeleton-rectangle--height-xl {
  height: 128px;
}

.lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-xl {
  border-radius: 64px;
}

.lumx-skeleton-rectangle--width-xxl {
  width: 256px;
}

.lumx-skeleton-rectangle--height-xxl {
  height: 256px;
}

.lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-xxl {
  border-radius: 128px;
}

.lumx-skeleton-rectangle--aspect-ratio-horizontal .lumx-skeleton-rectangle__inner {
  padding-top: 66.66%;
}

.lumx-skeleton-rectangle--aspect-ratio-wide .lumx-skeleton-rectangle__inner {
  padding-top: 56.25%;
}

.lumx-skeleton-rectangle--aspect-ratio-panoramic .lumx-skeleton-rectangle__inner {
  padding-top: 33.33%;
}

.lumx-skeleton-rectangle--aspect-ratio-square .lumx-skeleton-rectangle__inner {
  padding-top: 100%;
}

.lumx-skeleton-rectangle--aspect-ratio-vertical .lumx-skeleton-rectangle__inner {
  padding-top: 150%;
}

.lumx-skeleton-rectangle--color-dark {
  background-color: var(--lumx-color-dark-L5);
}

.lumx-skeleton-rectangle--color-light {
  background-color: var(--lumx-color-light-L5);
}

.lumx-skeleton-rectangle--color-blue {
  background-color: var(--lumx-color-blue-L5);
}

.lumx-skeleton-rectangle--color-green {
  background-color: var(--lumx-color-green-L5);
}

.lumx-skeleton-rectangle--color-yellow {
  background-color: var(--lumx-color-yellow-L5);
}

.lumx-skeleton-rectangle--color-red {
  background-color: var(--lumx-color-red-L5);
}

.lumx-skeleton-rectangle--color-grey {
  background-color: var(--lumx-color-grey-L5);
}

.lumx-skeleton-rectangle--color-primary {
  background-color: var(--lumx-color-primary-L5);
}

.lumx-skeleton-rectangle--color-secondary {
  background-color: var(--lumx-color-secondary-L5);
}

.lumx-skeleton-rectangle--color-accent {
  background-color: var(--lumx-color-accent-L5);
}

.lumx-skeleton-rectangle--color-black {
  background-color: var(--lumx-color-black-L5);
}

.lumx-skeleton-rectangle--color-white {
  background-color: var(--lumx-color-white-L5);
}

.lumx-skeleton-rectangle--color-orange {
  background-color: var(--lumx-color-orange-L5);
}

/* Typography
   ========================================================================== */
.lumx-skeleton-typography {
  display: flex;
  align-items: center;
}
.lumx-skeleton-typography__inner {
  width: 100%;
  border-radius: var(--lumx-border-radius);
  animation: skeleton-loading 1s ease-in-out 0s infinite;
}
.lumx-skeleton-typography--theme-light .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-dark-L5);
}
.lumx-skeleton-typography--theme-dark .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-light-L5);
}

.lumx-skeleton-typography--typography-display1 {
  height: 40px;
}

.lumx-skeleton-typography--typography-display1 .lumx-skeleton-typography__inner {
  height: 24px;
}

.lumx-skeleton-typography--typography-headline {
  height: 32px;
}

.lumx-skeleton-typography--typography-headline .lumx-skeleton-typography__inner {
  height: 20px;
}

.lumx-skeleton-typography--typography-title {
  height: 30px;
}

.lumx-skeleton-typography--typography-title .lumx-skeleton-typography__inner {
  height: 14px;
}

.lumx-skeleton-typography--typography-subtitle2 {
  height: 24px;
}

.lumx-skeleton-typography--typography-subtitle2 .lumx-skeleton-typography__inner {
  height: 12px;
}

.lumx-skeleton-typography--typography-subtitle1 {
  height: 20px;
}

.lumx-skeleton-typography--typography-subtitle1 .lumx-skeleton-typography__inner {
  height: 10px;
}

.lumx-skeleton-typography--typography-body2 {
  height: 24px;
}

.lumx-skeleton-typography--typography-body2 .lumx-skeleton-typography__inner {
  height: 12px;
}

.lumx-skeleton-typography--typography-body1 {
  height: 20px;
}

.lumx-skeleton-typography--typography-body1 .lumx-skeleton-typography__inner {
  height: 10px;
}

.lumx-skeleton-typography--typography-caption {
  height: 16px;
}

.lumx-skeleton-typography--typography-caption .lumx-skeleton-typography__inner {
  height: 8px;
}

.lumx-skeleton-typography--typography-overline {
  height: 12px;
}

.lumx-skeleton-typography--typography-overline .lumx-skeleton-typography__inner {
  height: 8px;
}

.lumx-skeleton-typography--color-dark .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-dark-L5);
}

.lumx-skeleton-typography--color-light .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-light-L5);
}

.lumx-skeleton-typography--color-blue .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-blue-L5);
}

.lumx-skeleton-typography--color-green .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-green-L5);
}

.lumx-skeleton-typography--color-yellow .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-yellow-L5);
}

.lumx-skeleton-typography--color-red .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-red-L5);
}

.lumx-skeleton-typography--color-grey .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-grey-L5);
}

.lumx-skeleton-typography--color-primary .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-primary-L5);
}

.lumx-skeleton-typography--color-secondary .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-secondary-L5);
}

.lumx-skeleton-typography--color-accent .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-accent-L5);
}

.lumx-skeleton-typography--color-black .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-black-L5);
}

.lumx-skeleton-typography--color-white .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-white-L5);
}

.lumx-skeleton-typography--color-orange .lumx-skeleton-typography__inner {
  background-color: var(--lumx-color-orange-L5);
}

/* ==========================================================================
   Slideshow
   ========================================================================== */
.lumx-slideshow {
  outline: none;
}
.lumx-slideshow--fill-height {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.lumx-slideshow__slides {
  overflow: hidden;
}
.lumx-slideshow--fill-height .lumx-slideshow__slides {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.lumx-slideshow__wrapper {
  display: flex;
  transition: transform 500ms;
}
@media (prefers-reduced-motion: reduce) {
  .lumx-slideshow__wrapper {
    transition: none;
  }
}
.lumx-slideshow--fill-height .lumx-slideshow__wrapper {
  flex: 1 1 auto;
  min-height: 0;
}
.lumx-slideshow__wrapper--scroll-snap {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lumx-slideshow__wrapper--scroll-snap {
    scroll-behavior: smooth;
  }
}
.lumx-slideshow__wrapper--scroll-snap::-webkit-scrollbar {
  display: none;
}
.lumx-slideshow__controls {
  margin-top: 16px;
}
.lumx-slideshow--fill-height .lumx-slideshow__controls {
  flex-shrink: 0;
}

/* Slideshow item group
   ========================================================================== */
.lumx-slideshow-item-group {
  display: flex;
  overflow: hidden;
  max-width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Slideshow item
   ========================================================================== */
.lumx-slideshow--fill-height .lumx-slideshow-item {
  display: flex;
}

.lumx-slideshow--group-by-1 .lumx-slideshow-item {
  flex: 0 0 100%;
  max-width: 100%;
  overflow: hidden;
}

.lumx-slideshow--group-by-2 .lumx-slideshow-item {
  flex: 0 0 50%;
  max-width: 50%;
  overflow: hidden;
}

.lumx-slideshow--group-by-3 .lumx-slideshow-item {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
  overflow: hidden;
}

.lumx-slideshow--group-by-4 .lumx-slideshow-item {
  flex: 0 0 25%;
  max-width: 25%;
  overflow: hidden;
}

.lumx-slideshow--group-by-5 .lumx-slideshow-item {
  flex: 0 0 20%;
  max-width: 20%;
  overflow: hidden;
}

.lumx-slideshow--group-by-6 .lumx-slideshow-item {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
  overflow: hidden;
}

.lumx-slideshow--group-by-7 .lumx-slideshow-item {
  flex: 0 0 14.2857142857%;
  max-width: 14.2857142857%;
  overflow: hidden;
}

.lumx-slideshow--group-by-8 .lumx-slideshow-item {
  flex: 0 0 12.5%;
  max-width: 12.5%;
  overflow: hidden;
}

.lumx-slideshow--group-by-9 .lumx-slideshow-item {
  flex: 0 0 11.1111111111%;
  max-width: 11.1111111111%;
  overflow: hidden;
}

.lumx-slideshow--group-by-10 .lumx-slideshow-item {
  flex: 0 0 10%;
  max-width: 10%;
  overflow: hidden;
}

.lumx-slideshow--group-by-11 .lumx-slideshow-item {
  flex: 0 0 9.0909090909%;
  max-width: 9.0909090909%;
  overflow: hidden;
}

.lumx-slideshow--group-by-12 .lumx-slideshow-item {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
  overflow: hidden;
}

/* Slideshow controls
   ========================================================================== */
.lumx-slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lumx-slideshow-controls__pagination {
  align-items: center;
  max-width: 76px;
  overflow: hidden;
}
.lumx-slideshow-controls__pagination-items {
  display: flex;
  align-items: center;
  padding: 4px;
  transition: transform 500ms;
}
@media (prefers-reduced-motion: reduce) {
  .lumx-slideshow-controls__pagination-items {
    transition: none;
  }
}
.lumx-slideshow-controls__pagination-item {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0 2px;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: none;
  border-style: solid;
  border-radius: 50%;
  outline: none;
  transition: transform 500ms;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .lumx-slideshow-controls__pagination-item {
    transition: none;
  }
}
.lumx-slideshow-controls--theme-light .lumx-slideshow-controls__pagination-item {
  border-color: var(--lumx-color-dark-L2);
  border-width: 2px;
}
.lumx-slideshow-controls--theme-light .lumx-slideshow-controls__pagination-item[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
@media (hover: hover) {
.lumx-slideshow-controls--theme-light .lumx-slideshow-controls__pagination-item:hover {
  background-color: var(--lumx-color-primary-N);
  border-width: 0;
}}
.lumx-slideshow-controls--theme-light .lumx-slideshow-controls__pagination-item--is-active {
  background-color: var(--lumx-color-primary-N);
  width: 16px;
  border-radius: 4px;
  border-width: 0;
}
.lumx-slideshow-controls--theme-light .lumx-slideshow-controls__pagination-item--is-active[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-primary-N);
  outline-offset: 2px;
}
.lumx-slideshow-controls--theme-dark .lumx-slideshow-controls__pagination-item {
  border-color: var(--lumx-color-light-L2);
}
.lumx-slideshow-controls--theme-dark .lumx-slideshow-controls__pagination-item[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
@media (hover: hover) {
.lumx-slideshow-controls--theme-dark .lumx-slideshow-controls__pagination-item:hover {
  background-color: var(--lumx-color-light-N);
}}
.lumx-slideshow-controls--theme-dark .lumx-slideshow-controls__pagination-item--is-active {
  background-color: var(--lumx-color-light-N);
  width: 16px;
  border-radius: 4px;
}
.lumx-slideshow-controls--theme-dark .lumx-slideshow-controls__pagination-item--is-active[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-slideshow-controls--has-infinite-pagination .lumx-slideshow-controls__pagination-item--is-on-edge {
  transform: scale(0.5);
}
.lumx-slideshow-controls--has-infinite-pagination .lumx-slideshow-controls__pagination-item--is-out-range {
  transform: scale(0);
}

/* ==========================================================================
   Slider
   ========================================================================== */
.lumx-slider {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.lumx-slider__helper {
  margin-top: 4px;
}
.lumx-slider__value-label {
  font-size: 10px;
}
.lumx-slider--theme-light .lumx-slider__value-label {
  color: var(--lumx-color-dark-L2);
}
.lumx-slider--theme-dark .lumx-slider__value-label {
  color: var(--lumx-color-light-L2);
}
.lumx-slider__value-label--min {
  padding-right: 16px;
}
.lumx-slider__value-label--max {
  padding-left: 16px;
}
.lumx-slider__ui-wrapper {
  display: flex;
  align-items: center;
}
.lumx-slider--has-label .lumx-slider__ui-wrapper {
  margin-top: 8px;
}
.lumx-slider__wrapper {
  position: relative;
  flex: 1 1 auto;
  height: 24px;
  cursor: pointer;
}
.lumx-slider__track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  transform: translateY(-50%);
}
.lumx-slider--theme-light .lumx-slider__track--background {
  background-color: var(--lumx-color-dark-L5);
}
.lumx-slider--theme-dark .lumx-slider__track--background {
  background-color: var(--lumx-color-light-L5);
}
.lumx-slider--theme-light .lumx-slider__track--active {
  background-color: var(--lumx-color-primary-N);
}
.lumx-slider--theme-dark .lumx-slider__track--active {
  background-color: var(--lumx-color-light-N);
}
.lumx-slider__handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: none;
  border-radius: 50%;
  outline: none;
  transform: translateX(-50%) translateY(-50%);
}
.lumx-slider--theme-light .lumx-slider__handle {
  background-color: var(--lumx-color-primary-N);
  color: var(--lumx-color-light-N);
}
.lumx-slider--theme-dark .lumx-slider__handle {
  color: var(--lumx-color-primary-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-slider__ticks {
  position: absolute;
  top: 14px;
  right: 0;
  left: 0;
}
.lumx-slider__tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 4px;
  transform: translateX(-50%);
}
.lumx-slider__tick:first-child, .lumx-slider__tick:last-child {
  display: none;
}
.lumx-slider--theme-light .lumx-slider__tick {
  background-color: var(--lumx-color-dark-L5);
}
.lumx-slider--theme-dark .lumx-slider__tick {
  background-color: var(--lumx-color-light-L5);
}

/* Handle states
   ========================================================================== */
@media (hover: hover) {
.lumx-slider--theme-light .lumx-slider__handle:hover {
  background-color: var(--lumx-color-primary-D1);
}}
@media (hover: hover) {
.lumx-slider--theme-dark .lumx-slider__handle:hover {
  background-color: var(--lumx-color-light-L1);
}}

.lumx-slider--theme-light .lumx-slider__handle:active {
  background-color: var(--lumx-color-primary-D2);
}
.lumx-slider--theme-dark .lumx-slider__handle:active {
  background-color: var(--lumx-color-light-L2);
}

.lumx-slider--theme-light .lumx-slider__handle[data-focus-visible-added] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}
.lumx-slider--theme-dark .lumx-slider__handle[data-focus-visible-added] {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}

/* ==========================================================================
   Switch
   ========================================================================== */
.lumx-switch {
  display: flex;
}
.lumx-switch--position-right {
  flex-direction: row-reverse;
}
.lumx-switch__input-wrapper {
  position: relative;
  width: var(--lumx-material-switch-wrapper-width);
  height: var(--lumx-material-switch-wrapper-height);
  flex-shrink: 0;
}
.lumx-switch__input-native {
  position: relative;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--lumx-material-switch-wrapper-width);
  height: var(--lumx-material-switch-wrapper-height);
  padding: 0;
  margin: 0;
  opacity: 0;
}
.lumx-switch__input-placeholder {
  position: absolute;
  top: calc((var(--lumx-material-switch-wrapper-height) - var(--lumx-material-switch-control-height)) / 2);
  left: 0;
  z-index: 1;
  width: var(--lumx-material-switch-control-width);
  height: var(--lumx-material-switch-control-height);
  border-radius: calc(var(--lumx-material-switch-control-height) / 2);
}
.lumx-switch--is-unchecked .lumx-switch__input-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: calc(var(--lumx-material-switch-control-height) / 2);
  border-style: solid;
  border-width: 2px;
}
.lumx-switch--is-checked .lumx-switch__input-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: calc(var(--lumx-material-switch-control-height) / 2);
}
.lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-background {
  color: var(--lumx-color-dark-N);
  background-color: transparent;
}
.lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-background {
  color: var(--lumx-color-light-N);
  background-color: transparent;
}
.lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-background {
  background-color: var(--lumx-color-primary-N);
  color: var(--lumx-color-light-N);
}
.lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-background {
  color: var(--lumx-color-primary-N);
  background-color: var(--lumx-color-light-N);
}
.lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-indicator {
  position: absolute;
  top: calc((var(--lumx-material-switch-control-height) - var(--lumx-material-switch-indicator-size)) / 2);
  z-index: 3;
  width: var(--lumx-material-switch-indicator-size);
  height: var(--lumx-material-switch-indicator-size);
  border-radius: calc(var(--lumx-material-switch-indicator-size) / 2);
  left: var(--lumx-material-switch-indicator-offset);
  background-color: var(--lumx-color-dark-N);
}
.lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-indicator {
  position: absolute;
  top: calc((var(--lumx-material-switch-control-height) - var(--lumx-material-switch-indicator-size)) / 2);
  z-index: 3;
  width: var(--lumx-material-switch-indicator-size);
  height: var(--lumx-material-switch-indicator-size);
  border-radius: calc(var(--lumx-material-switch-indicator-size) / 2);
  left: var(--lumx-material-switch-indicator-offset);
  background-color: var(--lumx-color-light-N);
}
.lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-indicator {
  position: absolute;
  top: calc((var(--lumx-material-switch-control-height) - var(--lumx-material-switch-indicator-size)) / 2);
  z-index: 3;
  width: var(--lumx-material-switch-indicator-size);
  height: var(--lumx-material-switch-indicator-size);
  border-radius: calc(var(--lumx-material-switch-indicator-size) / 2);
  right: var(--lumx-material-switch-indicator-offset);
  background-color: var(--lumx-color-light-N);
}
.lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-indicator {
  position: absolute;
  top: calc((var(--lumx-material-switch-control-height) - var(--lumx-material-switch-indicator-size)) / 2);
  z-index: 3;
  width: var(--lumx-material-switch-indicator-size);
  height: var(--lumx-material-switch-indicator-size);
  border-radius: calc(var(--lumx-material-switch-indicator-size) / 2);
  right: var(--lumx-material-switch-indicator-offset);
  background-color: var(--lumx-color-primary-N);
}
.lumx-switch--position-left .lumx-switch__content {
  flex: 0 1 auto;
}
.lumx-switch--position-right .lumx-switch__content {
  flex: 1 1 auto;
}
.lumx-switch--position-left .lumx-switch__label, .lumx-switch--position-left .lumx-switch__helper {
  padding-left: 8px;
}
.lumx-switch--position-right .lumx-switch__label, .lumx-switch--position-right .lumx-switch__helper {
  padding-right: 8px;
}
.lumx-switch__helper {
  margin-top: 4px;
}

/* Switch states
   ========================================================================== */
.lumx-switch--is-disabled .lumx-switch__input-placeholder {
  opacity: 0.5;
  cursor: default;
}
.lumx-switch--is-disabled.lumx-switch--theme-light .lumx-switch__label,
.lumx-switch--is-disabled.lumx-switch--theme-light .lumx-switch__helper {
  color: var(--lumx-color-dark-L3);
}
.lumx-switch--is-disabled.lumx-switch--theme-dark .lumx-switch__label,
.lumx-switch--is-disabled.lumx-switch--theme-dark .lumx-switch__helper {
  color: var(--lumx-color-light-L3);
}

@media (hover: hover) {

:not(.lumx-switch--is-disabled).lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-dark-L5);
}}
@media (hover: hover) {
:not(.lumx-switch--is-disabled).lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-light-L5);
}}
@media (hover: hover) {
:not(.lumx-switch--is-disabled).lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-primary-D1);
}}
@media (hover: hover) {
:not(.lumx-switch--is-disabled).lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-light-L1);
}}
:not(.lumx-switch--is-disabled).lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-native:active + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-dark-L4);
}
:not(.lumx-switch--is-disabled).lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-native:active + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-light-L4);
}
:not(.lumx-switch--is-disabled).lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-native:active + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-primary-D2);
}
:not(.lumx-switch--is-disabled).lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-native:active + .lumx-switch__input-placeholder .lumx-switch__input-background {
  background-color: var(--lumx-color-light-L2);
}

.lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}

.lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

.lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-dark-N);
}

.lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder {
  outline-offset: 2px;
  outline: 2px solid var(--lumx-color-light-N);
}

/* ==========================================================================
   Data table
   ========================================================================== */
.lumx-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
}
.lumx-table__row {
  outline: none;
}
.lumx-table--theme-light.lumx-table--has-dividers .lumx-table__row {
  border-bottom-color: var(--lumx-color-dark-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.lumx-table--theme-dark.lumx-table--has-dividers .lumx-table__row {
  border-bottom-color: var(--lumx-color-light-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.lumx-table--has-dividers .lumx-table__row:last-child {
  border-bottom: none;
}
.lumx-table--theme-light .lumx-table__row--is-selected {
  background-color: var(--lumx-color-primary-L5);
}
.lumx-table--theme-dark .lumx-table__row--is-selected {
  background-color: var(--lumx-color-light-L5);
}
.lumx-table--theme-light .lumx-table__cell--head {
  height: 56px;
  padding: 8px 24px 8px 0;
  text-align: left;
  outline: none;
  border-bottom-color: var(--lumx-color-dark-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: var(--lumx-color-dark-L2);
}
.lumx-table--theme-dark .lumx-table__cell--head {
  height: 56px;
  padding: 8px 24px 8px 0;
  text-align: left;
  outline: none;
  border-bottom-color: var(--lumx-color-light-L5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: var(--lumx-color-light-L2);
}
.lumx-table--theme-light .lumx-table__cell--body {
  height: 56px;
  padding: 8px 24px 8px 0;
  text-align: left;
  outline: none;
  color: var(--lumx-color-dark-N);
}
.lumx-table--theme-dark .lumx-table__cell--body {
  height: 56px;
  padding: 8px 24px 8px 0;
  text-align: left;
  outline: none;
  color: var(--lumx-color-light-N);
}
.lumx-table__cell:first-child {
  padding-left: 24px;
}
.lumx-table--has-before .lumx-table__cell:first-child {
  width: 68px;
  padding: 0;
}
.lumx-table__cell--is-sortable .lumx-table__cell-wrapper {
  cursor: pointer;
}
.lumx-table--theme-light .lumx-table__cell--is-sorted .lumx-table__cell-wrapper {
  color: var(--lumx-color-dark-N);
}
.lumx-table--theme-dark .lumx-table__cell--is-sorted .lumx-table__cell-wrapper {
  color: var(--lumx-color-light-N);
}
.lumx-table__row--is-disabled .lumx-table__cell {
  pointer-events: none;
  opacity: 0.5;
}
.lumx-table__cell-wrapper {
  display: flex;
  align-items: flex-start;
  padding: 0;
  color: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.lumx-table--has-before .lumx-table__cell--head:first-child .lumx-table__cell-wrapper {
  display: flex;
  justify-content: center;
}
.lumx-table__cell-icon {
  margin-top: 1px;
  margin-right: 4px;
}
.lumx-table__cell--head .lumx-table__cell-content {
  hyphens: auto;
  word-break: break-word;
  font-size: 12px;
  font-weight: var(--lumx-typography-interface-caption-font-weight);
  line-height: 16px;
}
.lumx-table__cell--body .lumx-table__cell-content {
  hyphens: auto;
  word-break: break-word;
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-table--has-before .lumx-table__cell--body:first-child .lumx-table__cell-content {
  display: flex;
  justify-content: center;
}
.lumx-table__cell--is-sortable .lumx-table__cell-wrapper[data-focus-visible-added] .lumx-table__cell-content {
  text-decoration: underline;
}
@media (hover: hover) {
.lumx-table__cell--is-sortable .lumx-table__cell-wrapper:hover .lumx-table__cell-content {
  text-decoration: underline;
}}

/* Clickable row
   ========================================================================== */
@media (hover: hover) {
.lumx-table--theme-light .lumx-table__row--is-clickable:not(.lumx-table__row--is-selected):hover {
  background-color: var(--lumx-color-dark-L6);
}}
.lumx-table--theme-light .lumx-table__row--is-clickable:not(.lumx-table__row--is-selected)[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
@media (hover: hover) {
.lumx-table--theme-dark .lumx-table__row--is-clickable:not(.lumx-table__row--is-selected):hover {
  background-color: var(--lumx-color-light-L6);
}}
.lumx-table--theme-dark .lumx-table__row--is-clickable:not(.lumx-table__row--is-selected)[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

@media (hover: hover) {

.lumx-table--theme-light .lumx-table__row--is-clickable.lumx-table__row--is-selected:hover {
  background-color: var(--lumx-color-primary-L4);
}}
.lumx-table--theme-light .lumx-table__row--is-clickable.lumx-table__row--is-selected[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
@media (hover: hover) {
.lumx-table--theme-dark .lumx-table__row--is-clickable.lumx-table__row--is-selected:hover {
  background-color: var(--lumx-color-light-L4);
}}
.lumx-table--theme-dark .lumx-table__row--is-clickable.lumx-table__row--is-selected[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.lumx-tabs--theme-light .lumx-tabs__links {
  position: relative;
  display: flex;
}
.lumx-tabs--theme-dark .lumx-tabs__links {
  position: relative;
  display: flex;
}
.lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--lumx-tabs-link-height);
  padding: 0 24px;
  cursor: pointer;
  border: none;
  border-radius: var(--lumx-tabs-link-border-radius);
  outline: none;
  transition-duration: 150ms;
  transition-property: border-radius, background-color, color;
}
.lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled)::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-tabs-link-emphasis-low-state-default-border-top-width) var(--lumx-tabs-link-emphasis-low-state-default-border-right-width) var(--lumx-tabs-link-emphasis-low-state-default-border-bottom-width) var(--lumx-tabs-link-emphasis-low-state-default-border-left-width);
  border-radius: var(--lumx-tabs-link-border-radius);
  transition-duration: 150ms;
  transition-property: border-radius, border-width, border-color;
}
@media (hover: hover) {
.lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):hover::after {
  border-width: var(--lumx-tabs-link-emphasis-low-state-hover-border-top-width) var(--lumx-tabs-link-emphasis-low-state-hover-border-right-width) var(--lumx-tabs-link-emphasis-low-state-hover-border-bottom-width) var(--lumx-tabs-link-emphasis-low-state-hover-border-left-width);
}}
.lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):active::after {
  border-width: var(--lumx-tabs-link-emphasis-low-state-active-border-top-width) var(--lumx-tabs-link-emphasis-low-state-active-border-right-width) var(--lumx-tabs-link-emphasis-low-state-active-border-bottom-width) var(--lumx-tabs-link-emphasis-low-state-active-border-left-width);
}
.lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled) i {
  margin-right: 8px;
}
.lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled) span {
  font-family: var(--lumx-typography-custom-button-size-m-font-family);
  font-size: var(--lumx-typography-custom-button-size-m-font-size);
  font-weight: var(--lumx-typography-custom-button-size-m-font-weight);
  text-transform: var(--lumx-material-button-text-transform);
}
.lumx-tabs--theme-light .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled) {
  color: var(--lumx-tabs-link-emphasis-low-state-default-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-light-background-color);
}
.lumx-tabs--theme-light .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled)::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-light-border-color);
}
@media (hover: hover) {
.lumx-tabs--theme-light .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):hover {
  color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color);
}}
@media (hover: hover) {
.lumx-tabs--theme-light .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):hover::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color);
}}
.lumx-tabs--theme-light .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):active {
  color: var(--lumx-tabs-link-emphasis-low-state-active-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-light-background-color);
}
.lumx-tabs--theme-light .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):active::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-light-border-color);
}
.lumx-tabs--theme-light .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled)[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-tabs--theme-dark .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled) {
  color: var(--lumx-tabs-link-emphasis-low-state-default-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled)::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-tabs--theme-dark .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):hover {
  color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color);
}}
@media (hover: hover) {
.lumx-tabs--theme-dark .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):hover::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color);
}}
.lumx-tabs--theme-dark .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):active {
  color: var(--lumx-tabs-link-emphasis-low-state-active-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled):active::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link:not(.lumx-tabs__link--is-active):not(.lumx-tabs__link--is-disabled)[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-tabs__link--is-active {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--lumx-tabs-link-height);
  padding: 0 24px;
  cursor: pointer;
  border: none;
  border-radius: var(--lumx-tabs-link-border-radius);
  outline: none;
  transition-duration: 150ms;
  transition-property: border-radius, background-color, color;
}
.lumx-tabs__link--is-active::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-tabs-link-emphasis-selected-state-default-border-top-width) var(--lumx-tabs-link-emphasis-selected-state-default-border-right-width) var(--lumx-tabs-link-emphasis-selected-state-default-border-bottom-width) var(--lumx-tabs-link-emphasis-selected-state-default-border-left-width);
  border-radius: var(--lumx-tabs-link-border-radius);
  transition-duration: 150ms;
  transition-property: border-radius, border-width, border-color;
}
@media (hover: hover) {
.lumx-tabs__link--is-active:hover::after {
  border-width: var(--lumx-tabs-link-emphasis-selected-state-hover-border-top-width) var(--lumx-tabs-link-emphasis-selected-state-hover-border-right-width) var(--lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width) var(--lumx-tabs-link-emphasis-selected-state-hover-border-left-width);
}}
.lumx-tabs__link--is-active:active::after {
  border-width: var(--lumx-tabs-link-emphasis-selected-state-active-border-top-width) var(--lumx-tabs-link-emphasis-selected-state-active-border-right-width) var(--lumx-tabs-link-emphasis-selected-state-active-border-bottom-width) var(--lumx-tabs-link-emphasis-selected-state-active-border-left-width);
}
.lumx-tabs__link--is-active i {
  margin-right: 8px;
}
.lumx-tabs__link--is-active span {
  font-family: var(--lumx-typography-custom-button-size-m-font-family);
  font-size: var(--lumx-typography-custom-button-size-m-font-size);
  font-weight: var(--lumx-typography-custom-button-size-m-font-weight);
  text-transform: var(--lumx-material-button-text-transform);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-active {
  color: var(--lumx-tabs-link-emphasis-selected-state-default-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-active::after {
  border-color: var(--lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color);
}
@media (hover: hover) {
.lumx-tabs--theme-light .lumx-tabs__link--is-active:hover {
  color: var(--lumx-tabs-link-emphasis-selected-state-hover-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color);
}}
@media (hover: hover) {
.lumx-tabs--theme-light .lumx-tabs__link--is-active:hover::after {
  border-color: var(--lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color);
}}
.lumx-tabs--theme-light .lumx-tabs__link--is-active:active {
  color: var(--lumx-tabs-link-emphasis-selected-state-active-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-active:active::after {
  border-color: var(--lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-active[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-active {
  color: var(--lumx-tabs-link-emphasis-selected-state-default-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-active::after {
  border-color: var(--lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-tabs--theme-dark .lumx-tabs__link--is-active:hover {
  color: var(--lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color);
}}
@media (hover: hover) {
.lumx-tabs--theme-dark .lumx-tabs__link--is-active:hover::after {
  border-color: var(--lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color);
}}
.lumx-tabs--theme-dark .lumx-tabs__link--is-active:active {
  color: var(--lumx-tabs-link-emphasis-selected-state-active-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-active:active::after {
  border-color: var(--lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-active[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

/* Tabs layout
   ========================================================================== */
.lumx-tabs--layout-fixed .lumx-tabs__link {
  flex: 1 1 auto;
}

/* Tabs position
   ========================================================================== */
.lumx-tabs--layout-clustered.lumx-tabs--position-left .lumx-tabs__links {
  justify-content: flex-start;
}

.lumx-tabs--layout-clustered.lumx-tabs--position-center .lumx-tabs__links {
  justify-content: center;
}

.lumx-tabs--layout-clustered.lumx-tabs--position-right .lumx-tabs__links {
  justify-content: flex-end;
}

/* Tabs link states
   ========================================================================== */
.lumx-tabs__link--is-disabled {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--lumx-tabs-link-height);
  padding: 0 24px;
  cursor: pointer;
  border: none;
  border-radius: var(--lumx-tabs-link-border-radius);
  outline: none;
  transition-duration: 150ms;
  transition-property: border-radius, background-color, color;
}
.lumx-tabs__link--is-disabled::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border-style: solid;
  border-width: var(--lumx-tabs-link-emphasis-low-state-default-border-top-width) var(--lumx-tabs-link-emphasis-low-state-default-border-right-width) var(--lumx-tabs-link-emphasis-low-state-default-border-bottom-width) var(--lumx-tabs-link-emphasis-low-state-default-border-left-width);
  border-radius: var(--lumx-tabs-link-border-radius);
  transition-duration: 150ms;
  transition-property: border-radius, border-width, border-color;
}
@media (hover: hover) {
.lumx-tabs__link--is-disabled:hover::after {
  border-width: var(--lumx-tabs-link-emphasis-low-state-hover-border-top-width) var(--lumx-tabs-link-emphasis-low-state-hover-border-right-width) var(--lumx-tabs-link-emphasis-low-state-hover-border-bottom-width) var(--lumx-tabs-link-emphasis-low-state-hover-border-left-width);
}}
.lumx-tabs__link--is-disabled:active::after {
  border-width: var(--lumx-tabs-link-emphasis-low-state-active-border-top-width) var(--lumx-tabs-link-emphasis-low-state-active-border-right-width) var(--lumx-tabs-link-emphasis-low-state-active-border-bottom-width) var(--lumx-tabs-link-emphasis-low-state-active-border-left-width);
}
.lumx-tabs__link--is-disabled i {
  margin-right: 8px;
}
.lumx-tabs__link--is-disabled span {
  font-family: var(--lumx-typography-custom-button-size-m-font-family);
  font-size: var(--lumx-typography-custom-button-size-m-font-size);
  font-weight: var(--lumx-typography-custom-button-size-m-font-weight);
  text-transform: var(--lumx-material-button-text-transform);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-disabled {
  color: var(--lumx-tabs-link-emphasis-low-state-default-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-light-background-color);
  color: var(--lumx-color-dark-L3);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-disabled::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-light-border-color);
}
@media (hover: hover) {
.lumx-tabs--theme-light .lumx-tabs__link--is-disabled:hover {
  color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color);
}}
@media (hover: hover) {
.lumx-tabs--theme-light .lumx-tabs__link--is-disabled:hover::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color);
}}
.lumx-tabs--theme-light .lumx-tabs__link--is-disabled:active {
  color: var(--lumx-tabs-link-emphasis-low-state-active-theme-light-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-light-background-color);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-disabled:active::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-light-border-color);
}
.lumx-tabs--theme-light .lumx-tabs__link--is-disabled[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-disabled {
  color: var(--lumx-tabs-link-emphasis-low-state-default-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color);
  color: var(--lumx-color-light-L3);
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-disabled::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color);
}
@media (hover: hover) {
.lumx-tabs--theme-dark .lumx-tabs__link--is-disabled:hover {
  color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color);
}}
@media (hover: hover) {
.lumx-tabs--theme-dark .lumx-tabs__link--is-disabled:hover::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color);
}}
.lumx-tabs--theme-dark .lumx-tabs__link--is-disabled:active {
  color: var(--lumx-tabs-link-emphasis-low-state-active-theme-dark-color);
  background-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-disabled:active::after {
  border-color: var(--lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color);
}
.lumx-tabs--theme-dark .lumx-tabs__link--is-disabled[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

/* Tab panel
   ========================================================================== */
.lumx-tab-panel {
  display: none;
  outline: none;
}
.lumx-tab-panel[data-focus-visible-added] {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-tab-panel--is-active {
  display: block;
}

/* ==========================================================================
   Text
   ========================================================================== */
.lumx-text {
  white-space: var(--lumx-text-white-space);
}
.lumx-text--is-truncated {
  --lumx-text-white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lumx-text--is-truncated-multiline {
  /* autoprefixer: off */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lumx-text-truncate-lines);
}
.lumx-text--no-wrap {
  --lumx-text-white-space: nowrap;
}
.lumx-text .lumx-icon, .lumx-text .lumx-icon > svg {
  display: inline;
}

/* ==========================================================================
   Text field
   ========================================================================== */
.lumx-text-field {
  --lumx-text-field-wrapper-padding-vertical:
      calc(
          (var(--lumx-text-field-input-min-height) - var(--lumx-material-text-field-input-content-line-height)) / 2
      );
  padding-top: var(--lumx-material-text-field-padding-top);
  padding-bottom: var(--lumx-material-text-field-padding-bottom);
}
.lumx-text-field__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
}
.lumx-text-field__label {
  font-size: var(--lumx-material-text-field-header-label-font-size);
  font-weight: var(--lumx-material-text-field-header-label-font-weight);
  line-height: var(--lumx-material-text-field-header-label-line-height);
  flex: 1 1 auto;
}
.lumx-text-field--theme-light .lumx-text-field__label {
  color: var(--lumx-text-field-state-default-theme-light-header-label-color);
}
.lumx-text-field--theme-dark .lumx-text-field__label {
  color: var(--lumx-text-field-state-default-theme-dark-header-label-color);
}
.lumx-text-field__char-counter {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}
.lumx-text-field__char-counter span {
  font-size: var(--lumx-material-text-field-header-label-font-size);
  font-weight: var(--lumx-material-text-field-header-label-font-weight);
  line-height: var(--lumx-material-text-field-header-label-line-height);
}
.lumx-text-field--theme-light .lumx-text-field__char-counter span {
  color: var(--lumx-color-dark-L2);
}
.lumx-text-field--theme-dark .lumx-text-field__char-counter span {
  color: var(--lumx-color-light-L2);
}
.lumx-text-field__char-counter i {
  margin-left: 4px;
}
.lumx-text-field--theme-light .lumx-text-field__char-counter i {
  color: var(--lumx-color-red-N);
}
.lumx-text-field--theme-dark .lumx-text-field__char-counter i {
  color: var(--lumx-color-light-N);
}
.lumx-text-field--theme-light .lumx-text-field__wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: var(--lumx-text-field-input-min-height);
  padding: 0 var(--lumx-text-field-input-padding-horizontal);
  background-color: var(--lumx-text-field-state-default-theme-light-input-background-color);
  border-radius: var(--lumx-text-field-input-border-radius);
  outline: none;
  transition-duration: 100ms;
  transition-property: background-color, box-shadow;
}
.lumx-text-field--theme-light .lumx-text-field__wrapper::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border: 0 solid var(--lumx-text-field-state-default-theme-light-input-border-color);
  border-width: var(--lumx-text-field-state-default-input-border-top-width) var(--lumx-text-field-state-default-input-border-right-width) var(--lumx-text-field-state-default-input-border-bottom-width) var(--lumx-text-field-state-default-input-border-left-width);
  border-radius: var(--lumx-text-field-input-border-radius);
}
.lumx-text-field--theme-dark .lumx-text-field__wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: var(--lumx-text-field-input-min-height);
  padding: 0 var(--lumx-text-field-input-padding-horizontal);
  background-color: var(--lumx-text-field-state-default-theme-dark-input-background-color);
  border-radius: var(--lumx-text-field-input-border-radius);
  outline: none;
  transition-duration: 100ms;
  transition-property: background-color, box-shadow;
}
.lumx-text-field--theme-dark .lumx-text-field__wrapper::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
  border: 0 solid var(--lumx-text-field-state-default-theme-dark-input-border-color);
  border-width: var(--lumx-text-field-state-default-input-border-top-width) var(--lumx-text-field-state-default-input-border-right-width) var(--lumx-text-field-state-default-input-border-bottom-width) var(--lumx-text-field-state-default-input-border-left-width);
  border-radius: var(--lumx-text-field-input-border-radius);
}
.lumx-text-field--theme-light .lumx-text-field__input-icon {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2);
  margin-right: 8px;
  color: var(--lumx-color-dark-N);
  color: var(--lumx-text-field-state-default-theme-light-input-content-color);
}
.lumx-text-field--theme-dark .lumx-text-field__input-icon {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2);
  margin-right: 8px;
  color: var(--lumx-color-light-N);
  color: var(--lumx-text-field-state-default-theme-dark-input-content-color);
}
.lumx-text-field__input-wrapper {
  flex: 1 1 auto;
  padding: var(--lumx-text-field-wrapper-padding-vertical) 0;
}
.lumx-text-field__input-native {
  resize: none;
}
.lumx-text-field--theme-light .lumx-text-field__input-native, .lumx-text-field__input-native--theme-light {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--lumx-material-text-field-input-content-font-size);
  line-height: var(--lumx-material-text-field-input-content-line-height);
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--lumx-color-dark-N);
  color: var(--lumx-text-field-state-default-theme-light-input-content-color);
}
.lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-light .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button, .lumx-text-field__input-native--theme-light[type=number]::-webkit-inner-spin-button, .lumx-text-field__input-native--theme-light[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.lumx-text-field--theme-light .lumx-text-field__input-native::-moz-placeholder, .lumx-text-field__input-native--theme-light::-moz-placeholder {
  color: var(--lumx-text-field-state-default-theme-light-input-placeholder-color);
}
.lumx-text-field--theme-light .lumx-text-field__input-native::placeholder, .lumx-text-field__input-native--theme-light::placeholder {
  color: var(--lumx-text-field-state-default-theme-light-input-placeholder-color);
}
.lumx-text-field--theme-dark .lumx-text-field__input-native, .lumx-text-field__input-native--theme-dark {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--lumx-material-text-field-input-content-font-size);
  line-height: var(--lumx-material-text-field-input-content-line-height);
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--lumx-color-light-N);
  color: var(--lumx-text-field-state-default-theme-dark-input-content-color);
}
.lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-inner-spin-button, .lumx-text-field--theme-dark .lumx-text-field__input-native[type=number]::-webkit-outer-spin-button, .lumx-text-field__input-native--theme-dark[type=number]::-webkit-inner-spin-button, .lumx-text-field__input-native--theme-dark[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.lumx-text-field--theme-dark .lumx-text-field__input-native::-moz-placeholder, .lumx-text-field__input-native--theme-dark::-moz-placeholder {
  color: var(--lumx-text-field-state-default-theme-dark-input-placeholder-color);
}
.lumx-text-field--theme-dark .lumx-text-field__input-native::placeholder, .lumx-text-field__input-native--theme-dark::placeholder {
  color: var(--lumx-text-field-state-default-theme-dark-input-placeholder-color);
}
.lumx-text-field--has-chips .lumx-text-field__input-native {
  flex: 1 1 auto;
  width: auto;
  min-width: 100px;
  line-height: var(--lumx-material-chip-size-s-height);
}
.lumx-text-field__input-clear, .lumx-text-field__after-element {
  flex-shrink: 0;
  margin: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-button-height) / 1.5) / 2) 4px;
  margin-right: 0;
}
.lumx-text-field__chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  margin: calc((var(--lumx-text-field-input-min-height) - var(--lumx-size-s) - 6px) / 2 + 3px) 0;
  gap: 6px;
  min-width: 0;
}
.lumx-text-field__helper {
  margin-top: 8px;
}

/* Text field states
   ========================================================================== */
.lumx-text-field--is-disabled .lumx-text-field__wrapper {
  opacity: 0.5;
  cursor: default;
}
.lumx-text-field--is-disabled.lumx-text-field--theme-light .lumx-text-field__label,
.lumx-text-field--is-disabled.lumx-text-field--theme-light .lumx-text-field__helper {
  color: var(--lumx-color-dark-L3);
}
.lumx-text-field--is-disabled.lumx-text-field--theme-dark .lumx-text-field__label,
.lumx-text-field--is-disabled.lumx-text-field--theme-dark .lumx-text-field__helper {
  color: var(--lumx-color-light-L3);
}

@media (hover: hover) {

.lumx-text-field--theme-light:not(.lumx-text-field--is-disabled) .lumx-text-field__wrapper:hover {
  background-color: var(--lumx-text-field-state-hover-theme-light-input-background-color);
}}
@media (hover: hover) {
.lumx-text-field--theme-light:not(.lumx-text-field--is-disabled) .lumx-text-field__wrapper:hover::before {
  border-color: var(--lumx-text-field-state-hover-theme-light-input-border-color);
  border-width: var(--lumx-text-field-state-hover-input-border-top-width) var(--lumx-text-field-state-hover-input-border-right-width) var(--lumx-text-field-state-hover-input-border-bottom-width) var(--lumx-text-field-state-hover-input-border-left-width);
}}
.lumx-text-field--theme-light .lumx-text-field__input-icon,
.lumx-text-field--theme-light .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-hover-theme-light-input-content-color);
}
.lumx-text-field--theme-light .lumx-text-field__input-native::-moz-placeholder {
  color: var(--lumx-text-field-state-hover-theme-light-input-placeholder-color);
}
.lumx-text-field--theme-light .lumx-text-field__input-native::placeholder {
  color: var(--lumx-text-field-state-hover-theme-light-input-placeholder-color);
}

@media (hover: hover) {

.lumx-text-field--theme-dark:not(.lumx-text-field--is-disabled) .lumx-text-field__wrapper:hover {
  background-color: var(--lumx-text-field-state-hover-theme-dark-input-background-color);
}}
@media (hover: hover) {
.lumx-text-field--theme-dark:not(.lumx-text-field--is-disabled) .lumx-text-field__wrapper:hover::before {
  border-color: var(--lumx-text-field-state-hover-theme-dark-input-border-color);
  border-width: var(--lumx-text-field-state-hover-input-border-top-width) var(--lumx-text-field-state-hover-input-border-right-width) var(--lumx-text-field-state-hover-input-border-bottom-width) var(--lumx-text-field-state-hover-input-border-left-width);
}}
.lumx-text-field--theme-dark .lumx-text-field__input-icon,
.lumx-text-field--theme-dark .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-hover-theme-dark-input-content-color);
}
.lumx-text-field--theme-dark .lumx-text-field__input-native::-moz-placeholder {
  color: var(--lumx-text-field-state-hover-theme-dark-input-placeholder-color);
}
.lumx-text-field--theme-dark .lumx-text-field__input-native::placeholder {
  color: var(--lumx-text-field-state-hover-theme-dark-input-placeholder-color);
}

.lumx-text-field--theme-light.lumx-text-field--is-focus:not(.lumx-text-field--is-disabled) .lumx-text-field__label {
  color: var(--lumx-text-field-state-focus-theme-light-header-label-color);
}
.lumx-text-field--theme-light.lumx-text-field--is-focus .lumx-text-field__wrapper {
  background-color: var(--lumx-text-field-state-focus-theme-light-input-background-color);
}
.lumx-text-field--theme-light.lumx-text-field--is-focus .lumx-text-field__wrapper::before {
  border-color: var(--lumx-text-field-state-focus-theme-light-input-border-color);
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
}
.lumx-text-field--theme-light.lumx-text-field--is-focus .lumx-text-field__input-icon,
.lumx-text-field--theme-light.lumx-text-field--is-focus .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-focus-theme-light-input-content-color);
}
.lumx-text-field--theme-light.lumx-text-field--is-focus .lumx-text-field__input-native::-moz-placeholder {
  color: var(--lumx-text-field-state-focus-theme-light-input-placeholder-color);
}
.lumx-text-field--theme-light.lumx-text-field--is-focus .lumx-text-field__input-native::placeholder {
  color: var(--lumx-text-field-state-focus-theme-light-input-placeholder-color);
}

.lumx-text-field--theme-dark.lumx-text-field--is-focus:not(.lumx-text-field--is-disabled) .lumx-text-field__label {
  color: var(--lumx-text-field-state-focus-theme-dark-header-label-color);
}
.lumx-text-field--theme-dark.lumx-text-field--is-focus .lumx-text-field__wrapper {
  background-color: var(--lumx-text-field-state-focus-theme-dark-input-background-color);
}
.lumx-text-field--theme-dark.lumx-text-field--is-focus .lumx-text-field__wrapper::before {
  border-color: var(--lumx-text-field-state-focus-theme-dark-input-border-color);
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
}
.lumx-text-field--theme-dark.lumx-text-field--is-focus .lumx-text-field__input-icon,
.lumx-text-field--theme-dark.lumx-text-field--is-focus .lumx-text-field__input-native {
  color: var(--lumx-text-field-state-focus-theme-dark-input-content-color);
}
.lumx-text-field--theme-dark.lumx-text-field--is-focus .lumx-text-field__input-native::-moz-placeholder {
  color: var(--lumx-text-field-state-focus-theme-dark-input-placeholder-color);
}
.lumx-text-field--theme-dark.lumx-text-field--is-focus .lumx-text-field__input-native::placeholder {
  color: var(--lumx-text-field-state-focus-theme-dark-input-placeholder-color);
}

/* Text field validity
   ========================================================================== */
.lumx-text-field--theme-light.lumx-text-field--is-valid .lumx-text-field__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-green-N);
}
.lumx-text-field--theme-light.lumx-text-field--is-valid .lumx-text-field__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-green-N);
}

.lumx-text-field--theme-light.lumx-text-field--has-error .lumx-text-field__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-red-N);
}
.lumx-text-field--theme-light.lumx-text-field--has-error .lumx-text-field__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-red-N);
}

.lumx-text-field--theme-dark.lumx-text-field--is-valid .lumx-text-field__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-light-N);
}
.lumx-text-field--theme-dark.lumx-text-field--is-valid .lumx-text-field__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-light-N);
}

.lumx-text-field--theme-dark.lumx-text-field--has-error .lumx-text-field__wrapper::before {
  border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width);
  border-color: var(--lumx-color-light-N);
}
.lumx-text-field--theme-dark.lumx-text-field--has-error .lumx-text-field__input-validity {
  flex-shrink: 0;
  margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + (var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2);
  margin-left: 8px;
  color: var(--lumx-color-light-N);
}

/* ==========================================================================
   Thumbnail
   ========================================================================== */
.lumx-thumbnail {
  position: relative;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  outline: none;
}
.lumx-thumbnail--fill-height,
.lumx-thumbnail--fill-height .lumx-thumbnail__background {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 100%;
}
.lumx-thumbnail--fill-height .lumx-thumbnail__image {
  width: unset;
}
.lumx-thumbnail--fill-height:not(.lumx-thumbnail--aspect-ratio-original) .lumx-thumbnail__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.lumx-thumbnail__background {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.lumx-thumbnail--variant-rounded .lumx-thumbnail__background {
  border-radius: var(--lumx-border-radius);
}
.lumx-thumbnail__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--lumx-thumbnail-image-object-fit, cover);
}
.lumx-thumbnail__image--has-defined-size {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.lumx-thumbnail--align-left .lumx-thumbnail__background, .lumx-thumbnail--align-left .lumx-thumbnail__image {
  margin-right: auto;
}
.lumx-thumbnail--align-center .lumx-thumbnail__background, .lumx-thumbnail--align-center .lumx-thumbnail__image {
  margin: 0 auto;
}
.lumx-thumbnail--align-right .lumx-thumbnail__background, .lumx-thumbnail--align-right .lumx-thumbnail__image {
  margin-left: auto;
}
.lumx-thumbnail__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
}
.lumx-thumbnail__fallback {
  display: block;
}

/* Thumbnail sizes
   ========================================================================== */
.lumx-thumbnail--size-xxs {
  width: 14px;
}

.lumx-thumbnail--size-xs {
  width: 20px;
}

.lumx-thumbnail--size-s {
  width: 24px;
}

.lumx-thumbnail--size-m {
  width: 36px;
}

.lumx-thumbnail--size-l {
  width: 64px;
}

.lumx-thumbnail--size-xl {
  width: 128px;
}

.lumx-thumbnail--size-xxl {
  width: 256px;
}

/* Thumbnail aspect ratio
   ========================================================================== */
.lumx-thumbnail:not(.lumx-thumbnail--aspect-ratio-original) .lumx-thumbnail__image {
  -o-object-fit: var(--lumx-thumbnail-image-object-fit, cover);
     object-fit: var(--lumx-thumbnail-image-object-fit, cover);
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
@supports not (aspect-ratio: 1/1) {
  .lumx-thumbnail:not(.lumx-thumbnail--aspect-ratio-original) .lumx-thumbnail__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

@supports (aspect-ratio: 1/1) {
  .lumx-thumbnail--aspect-ratio-horizontal:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__image {
    aspect-ratio: var(--lumx-thumbnail-aspect-ratio, 3 / 2);
  }
  .lumx-thumbnail--aspect-ratio-wide:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__image {
    aspect-ratio: var(--lumx-thumbnail-aspect-ratio, 16 / 9);
  }
  .lumx-thumbnail--aspect-ratio-panoramic:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__image {
    aspect-ratio: var(--lumx-thumbnail-aspect-ratio, 3 / 1);
  }
  .lumx-thumbnail--aspect-ratio-square:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__image {
    aspect-ratio: var(--lumx-thumbnail-aspect-ratio, 1 / 1);
  }
  .lumx-thumbnail--aspect-ratio-vertical:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__image {
    aspect-ratio: var(--lumx-thumbnail-aspect-ratio, 2 / 3);
  }
}
@supports not (aspect-ratio: 1/1) {
  .lumx-thumbnail--aspect-ratio-horizontal:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__background {
    padding-top: 66.66%;
  }
  .lumx-thumbnail--aspect-ratio-wide:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__background {
    padding-top: 56.25%;
  }
  .lumx-thumbnail--aspect-ratio-panoramic:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__background {
    padding-top: 33.33%;
  }
  .lumx-thumbnail--aspect-ratio-square:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__background {
    padding-top: 100%;
  }
  .lumx-thumbnail--aspect-ratio-vertical:not(.lumx-thumbnail--fill-height) .lumx-thumbnail__background {
    padding-top: 150%;
  }
}
/* Thumbnail object fit
   ========================================================================== */
.lumx-thumbnail--object-fit-cover {
  --lumx-thumbnail-image-object-fit: cover;
}

.lumx-thumbnail--object-fit-contain {
  --lumx-thumbnail-image-object-fit: contain;
}

/* Thumbnail states
   ========================================================================== */
.lumx-thumbnail--is-clickable {
  position: relative;
  cursor: pointer;
  /* Hover */
  /* Active */
}
.lumx-thumbnail--is-clickable:not(.lumx-thumbnail--fill-height) {
  display: block;
}
.lumx-thumbnail--is-clickable::after {
  transition-duration: 150ms;
  transition-property: background-color, box-shadow, color;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: "";
}
.lumx-thumbnail--is-clickable:focus::after {
  background-color: var(--lumx-color-dark-L5);
}
@media (hover: hover) {
.lumx-thumbnail--is-clickable:hover::after {
  background-color: var(--lumx-color-dark-L5);
}}
.lumx-thumbnail--is-clickable:active::after {
  background-color: var(--lumx-color-dark-L4);
}

/* Focused (variant rounded) */
.lumx-thumbnail--variant-rounded.lumx-thumbnail--is-clickable[data-focus-visible-added]::after {
  border-radius: var(--lumx-border-radius);
}

/* Focused (light theme) */
.lumx-thumbnail--theme-light.lumx-thumbnail--is-clickable[data-focus-visible-added]::after {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}

/* Focused (dark theme) */
.lumx-thumbnail--theme-dark.lumx-thumbnail--is-clickable[data-focus-visible-added]::after {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}

/* Loading state */
.lumx-thumbnail--is-loading.lumx-thumbnail--theme-light .lumx-thumbnail__background {
  animation: skeleton-loading 1s ease-in-out 0s infinite;
  background-color: var(--lumx-color-dark-L5);
}
.lumx-thumbnail--is-loading.lumx-thumbnail--theme-dark .lumx-thumbnail__background {
  animation: skeleton-loading 1s ease-in-out 0s infinite;
  background-color: var(--lumx-color-light-L5);
}

/* Error state */
.lumx-thumbnail--has-error {
  /** Icon fallback */
  /* Custom fallback */
}
.lumx-thumbnail--has-error.lumx-thumbnail--has-icon-error-fallback .lumx-thumbnail__fallback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lumx-thumbnail--has-error.lumx-thumbnail--has-icon-error-fallback.lumx-thumbnail--theme-light .lumx-thumbnail__fallback {
  background-color: var(--lumx-color-dark-L6);
}
.lumx-thumbnail--has-error.lumx-thumbnail--has-icon-error-fallback.lumx-thumbnail--theme-dark .lumx-thumbnail__fallback {
  background-color: var(--lumx-color-light-L6);
}
.lumx-thumbnail--has-error.lumx-thumbnail--has-custom-error-fallback {
  /* Disable aspect ratio */
}
.lumx-thumbnail--has-error.lumx-thumbnail--has-custom-error-fallback .lumx-thumbnail__background {
  padding-top: 0;
}

/* Thumbnail badge mask
   ========================================================================== */
.lumx-thumbnail--has-badge .lumx-thumbnail__background,
.lumx-thumbnail--has-badge .lumx-thumbnail__fallback {
  -webkit-mask-image: radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), transparent 12px, black 13px);
          mask-image: radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), transparent 12px, black 13px);
}

/* ==========================================================================
   Toolbar
   ========================================================================== */
.lumx-toolbar {
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 24px;
}
.lumx-toolbar--has-before {
  padding-left: 16px;
}
.lumx-toolbar--has-after {
  padding-right: 16px;
}
.lumx-toolbar__before {
  flex-shrink: 0;
  margin-right: 16px;
}
.lumx-toolbar__label {
  flex: 1 1 auto;
}
.lumx-toolbar__after {
  flex-shrink: 0;
  margin-left: auto;
}
.lumx-toolbar--has-label .lumx-toolbar__after {
  margin-left: 16px;
}

/* ==========================================================================
   Tooltip
   ========================================================================== */
.lumx-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 4px;
  background-color: var(--lumx-color-dark-N);
  border-radius: var(--lumx-border-radius);
  will-change: transform;
}
.lumx-tooltip--is-initializing {
  opacity: 0;
}
.lumx-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  margin: 5px;
  border-color: var(--lumx-color-dark-N);
  border-style: solid;
}
.lumx-tooltip--position-top .lumx-tooltip__arrow {
  bottom: -5px;
  left: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -5px;
  border-width: 5px 5px 0 5px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.lumx-tooltip--position-bottom .lumx-tooltip__arrow {
  top: -5px;
  left: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -5px;
  border-width: 0 5px 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}
.lumx-tooltip--position-left .lumx-tooltip__arrow {
  top: 50%;
  right: -5px;
  margin-top: -5px;
  margin-right: 0;
  margin-left: 0;
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.lumx-tooltip--position-right .lumx-tooltip__arrow {
  top: 50%;
  left: -5px;
  margin-top: -5px;
  margin-right: 0;
  margin-left: 0;
  border-width: 5px 5px 5px 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.lumx-tooltip__inner {
  display: block;
  font-size: 11px;
  line-height: 12px;
  color: #fff;
}

.lumx-tooltip-anchor-wrapper {
  width: -moz-fit-content;
  width: fit-content;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ==========================================================================
   Uploader
   ========================================================================== */
.lumx-uploader {
  transition-duration: 150ms;
  transition-property: background-color, box-shadow, color;
  display: grid;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0;
}
.lumx-uploader--theme-light {
  background-color: var(--lumx-color-dark-L5);
  color: var(--lumx-color-dark-N);
}
@media (hover: hover) {
.lumx-uploader--theme-light:not(.lumx-uploader--is-disabled):hover {
  background-color: var(--lumx-color-dark-L4);
}}
.lumx-uploader--theme-light:not(.lumx-uploader--is-disabled):active {
  background-color: var(--lumx-color-dark-L3);
}
.lumx-uploader--theme-light[data-focus-visible-added], .lumx-uploader--theme-light:focus-within {
  outline: 2px solid var(--lumx-color-dark-N);
  outline-offset: 2px;
}
.lumx-uploader--theme-dark {
  background-color: var(--lumx-color-light-L5);
  color: var(--lumx-color-light-N);
}
@media (hover: hover) {
.lumx-uploader--theme-dark:not(.lumx-uploader--is-disabled):hover {
  background-color: var(--lumx-color-light-L4);
}}
.lumx-uploader--theme-dark:not(.lumx-uploader--is-disabled):active {
  background-color: var(--lumx-color-light-L3);
}
.lumx-uploader--theme-dark[data-focus-visible-added], .lumx-uploader--theme-dark:focus-within {
  outline: 2px solid var(--lumx-color-light-N);
  outline-offset: 2px;
}
.lumx-uploader--is-disabled {
  opacity: 0.5;
  cursor: default;
}
.lumx-uploader--variant-rounded, .lumx-uploader--variant-rounded .lumx-uploader__wrapper {
  border-radius: var(--lumx-border-radius);
}
.lumx-uploader--variant-circle, .lumx-uploader--variant-circle .lumx-uploader__wrapper {
  border-radius: 50%;
}
.lumx-uploader__background, .lumx-uploader__wrapper {
  grid-area: 1/1;
}
.lumx-uploader__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.lumx-uploader--is-drag-hovering .lumx-uploader__wrapper {
  outline: 2px dashed rgba(0, 0, 0, 0.6);
  outline-offset: -8px;
}
.lumx-uploader__icon {
  margin-bottom: 8px;
}
.lumx-uploader--theme-light .lumx-uploader__icon {
  color: var(--lumx-color-dark-L1);
}
.lumx-uploader--theme-dark .lumx-uploader__icon {
  color: var(--lumx-color-light-N);
}
.lumx-uploader__label {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
  text-align: center;
}
.lumx-uploader--theme-light .lumx-uploader__label {
  color: var(--lumx-color-dark-L1);
}
.lumx-uploader--theme-dark .lumx-uploader__label {
  color: var(--lumx-color-light-N);
}

/* Uploader sizes
   ========================================================================== */
.lumx-uploader--size-xxs {
  width: 14px;
}

.lumx-uploader--size-xs {
  width: 20px;
}

.lumx-uploader--size-s {
  width: 24px;
}

.lumx-uploader--size-m {
  width: 36px;
}

.lumx-uploader--size-l {
  width: 64px;
}

.lumx-uploader--size-xl {
  width: 128px;
}

.lumx-uploader--size-xxl {
  width: 256px;
}

/* Uploader aspect ratio
   ========================================================================== */
.lumx-uploader--aspect-ratio-horizontal .lumx-uploader__background {
  padding-top: 66.66%;
}

.lumx-uploader--aspect-ratio-wide .lumx-uploader__background {
  padding-top: 56.25%;
}

.lumx-uploader--aspect-ratio-panoramic .lumx-uploader__background {
  padding-top: 33.33%;
}

.lumx-uploader--aspect-ratio-square .lumx-uploader__background {
  padding-top: 100%;
}

.lumx-uploader--aspect-ratio-vertical .lumx-uploader__background {
  padding-top: 150%;
}

/* ==========================================================================
   User block
   ========================================================================== */
.lumx-user-block {
  display: flex;
  align-items: center;
  min-width: 0;
}
.lumx-user-block--orientation-vertical {
  flex-direction: column;
}
.lumx-user-block--orientation-horizontal .lumx-user-block__after {
  margin: 0 0 0 16px;
}
.lumx-user-block--orientation-horizontal.lumx-user-block--size-xs .lumx-user-block__avatar {
  margin-right: 8px;
}
.lumx-user-block--orientation-horizontal.lumx-user-block--size-s .lumx-user-block__avatar {
  margin-right: 8px;
}
.lumx-user-block--orientation-horizontal.lumx-user-block--size-m .lumx-user-block__avatar, .lumx-user-block--orientation-horizontal.lumx-user-block--size-l .lumx-user-block__avatar {
  margin-right: 16px;
}
.lumx-user-block--orientation-vertical .lumx-user-block__avatar {
  margin-bottom: 12px;
}
.lumx-user-block__wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lumx-user-block--orientation-vertical .lumx-user-block__wrapper {
  align-items: center;
}
.lumx-user-block__name {
  outline: none;
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
  line-height: 20px;
}
.lumx-user-block--size-xs .lumx-user-block__name {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
}
.lumx-user-block--orientation-vertical .lumx-user-block__name {
  text-align: center;
}
.lumx-user-block--theme-dark .lumx-user-block__name {
  color: var(--lumx-color-light-N);
}
.lumx-user-block--size-s .lumx-user-block__fields {
  display: none;
}
.lumx-user-block--size-l .lumx-user-block__fields, .lumx-user-block--orientation-vertical .lumx-user-block__fields {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lumx-user-block__field {
  font-size: 14px;
  font-weight: var(--lumx-typography-interface-body1-font-weight);
  line-height: 20px;
  overflow-wrap: break-word;
}
.lumx-user-block--size-m .lumx-user-block__field::after {
  margin: 0 4px;
  content: "•";
  word-break: break-all;
}
.lumx-user-block--size-m .lumx-user-block__field:last-child::after {
  display: none;
}
.lumx-user-block--orientation-vertical .lumx-user-block__field {
  text-align: center;
}
.lumx-user-block--theme-light .lumx-user-block__field {
  color: var(--lumx-color-dark-L2);
}
.lumx-user-block--theme-dark .lumx-user-block__field {
  color: var(--lumx-color-light-L2);
}
.lumx-user-block__action, .lumx-user-block__actions, .lumx-user-block__after {
  margin-top: 16px;
}* {
  box-sizing: border-box;
}

html,
body,
#app {
  margin: 0;
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a1a1a;
  background: #fff;
}

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ---------------- Sidebar ---------------- */
.sidebar {
  width: 268px;
  flex: 0 0 268px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.sidebar__logo-text {
  font-weight: 700;
  font-size: 16px;
  color: #1a1a1a;
  flex: 1;
}
.sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #c7a97a center/cover no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
  flex: 0 0 auto;
  cursor: pointer;
}
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 12px;
}
.nav-group-label {
  padding: 16px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9e9e9e;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 1px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  border-radius: 8px;
}
.nav-item:hover {
  background: #e8e8e8;
}
.nav-item--active {
  color: #1a1a1a;
}
.nav-item--active .nav-icon {
  color: #3c3c3c;
}
.nav-item .nav-icon {
  color: #3c3c3c;
  flex: 0 0 auto;
  display: inline-flex;
}
.nav-item .nav-caret {
  margin-left: auto;
  color: #9e9e9e;
}
.nav-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 16px;
  margin: 1px 8px 1px 28px;
  font-size: 14px;
  font-weight: 600;
  color: #3c3c3c;
  cursor: pointer;
  border-radius: 8px;
}
.nav-sub-icon {
  color: #616161;
  flex: 0 0 auto;
}
.nav-sub:hover {
  background: #e8e8e8;
}
.nav-sub.is-active {
  color: #1546c1;
  font-weight: 700;
  border: 1.5px solid #1546c1;
  border-radius: 8px;
  background: #e8f0fe;
  padding: 7.5px 16px 7.5px 16px;
}
.nav-sub.is-active .nav-sub-icon {
  color: #1546c1;
}
.sidebar__footer {
  padding: 0 0 12px;
  font-size: 13px;
  background: #f5f5f5;
}
.sidebar__footer-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0 0 12px;
}
.sidebar__footer-powered {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
  color: #9e9e9e;
  font-size: 12px;
}
.sidebar__footer .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #3c3c3c;
}
.sidebar__footer .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3a0e5e;
  flex: 0 0 auto;
}

/* ---------------- Main ---------------- */
.content-area {
  flex: 1;
  display: flex;
  min-width: 0;
  overflow: hidden;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.main__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e5e5;
}
.main__title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  height: 36px;
}
.search-box input {
  border: none;
  outline: none;
  padding: 0 12px;
  width: 200px;
  font-size: 14px;
}
.search-box button {
  background: #f0f0f0;
  border: none;
  height: 100%;
  width: 36px;
  cursor: pointer;
}
.header-spacer {
  flex: 1;
}

/* ---------------- Table ---------------- */
.bk-table {
  flex: 1;
  overflow-y: auto;
}
.bk-row {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 190px 150px 130px 210px 64px;
  align-items: center;
  border-bottom: 1px solid #efefef;
  min-height: 56px;
  font-size: 14px;
}
.bk-row.is-header {
  font-size: 12px;
  color: #6b6b6b;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  min-height: 48px;
}
.bk-row.is-drop-target {
  background: #e8f0fe;
  outline: 2px dashed #2962ff;
  outline-offset: -2px;
}
.bk-row.is-dragging {
  opacity: 0.4;
}
.bk-cell {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bk-name {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: 0;
  padding-right: 12px;
}
.bk-name__label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-name__label.is-container {
  font-weight: 600;
}
.caret-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
  flex: 0 0 auto;
}
.caret-spacer {
  width: 24px;
  flex: 0 0 auto;
}
.drag-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  color: #bdbdbd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
}
.bk-row:hover .drag-handle {
  opacity: 1;
}
.drag-handle:hover {
  background: rgb(0 0 0 / 0.12);
  color: #424242;
}
.type-icon,
.node-icon {
  flex: 0 0 auto;
  color: #5f5f5f;
  display: inline-flex;
}
.thumb {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex: 0 0 auto;
}
.visibility-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #efefef;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 13px;
  color: #3c3c3c;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.visibility-chip svg {
  flex: 0 0 auto;
}
.visibility-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filters chip button */
.filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 8px 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
}
.filters-btn--active {
  background: rgba(33, 150, 243, 0.05);
  border-color: #245be7;
  color: #1546c1;
}
.filters-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #245be7;
  color: white;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.type-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3c3c3c;
}
.device-icons {
  display: inline-flex;
  gap: 6px;
  color: #5f5f5f;
}
.muted {
  color: #6b6b6b;
}
.row-menu {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6b6b6b;
  padding: 0 8px;
}

/* ---------------- LumX Dialog padding (library applies 0px) ---------------- */
.lumx-dialog__header {
  padding: 24px 24px 20px;
  border-bottom: 1px solid #e8e8e8;
}
.lumx-dialog__content {
  padding: 20px 24px 0;
}
.lumx-dialog__footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------------- Dialog forms ---------------- */
.form-section-title {
  font-weight: 700;
  font-size: 15px;
  margin: 4px 0 12px;
}
.form-field {
  margin-bottom: 16px;
}
.form-label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3c3c3c;
}
.form-label .req {
  color: #e01f26;
  margin-right: 2px;
}
.dialog-divider {
  border: none;
  border-top: 1px solid #e8e8e8;
  margin: 20px 0;
}
.expander-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}
.text-input {
  width: 100%;
  height: 40px;
  border: 1px solid rgb(0 0 0 / 0.38);
  border-radius: 4px;
  background: rgb(0 0 0 / 0.03);
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  color: #1a1a1a;
  transition: background 0.15s, border-color 0.1s;
}
.text-input:hover {
  background: rgb(0 0 0 / 0.12);
}
.text-input:focus {
  border: 2px solid rgb(36 91 231);
  background: transparent;
}
.thumb-wrap {
  width: 128px;
  height: 128px;
}
.thumb-upload-btn {
  width: 128px;
  height: 128px;
  border-radius: 4px;
  border: none;
  background: rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
  overflow: hidden;
}
.thumb-upload-btn:hover {
  background: rgba(0,0,0,0.15);
}
.thumb-upload-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,0.6);
  text-align: center;
  line-height: 1.2;
}
.thumb-preview-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 4px;
  overflow: hidden;
}
.thumb-upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
}
.thumb-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: rgba(255,255,255,0.85);
  color: #3c3c3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.15s;
}
.thumb-action-btn:hover {
  background: #fff;
}
.thumb-action-btn--delete:hover {
  background: #fde8e8;
  color: #c62828;
}
.general-grid {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 24px;
  align-items: start;
}

/* section picker */
.picker {
  position: relative;
}
.picker__control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border: 1px solid rgb(0 0 0 / 0.38);
  border-radius: 4px;
  background: rgb(0 0 0 / 0.03);
  padding: 0 12px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, border-width 0.1s;
}
.picker__control:hover {
  background: rgb(0 0 0 / 0.12);
  border-color: rgb(0 0 0 / 0.38);
}
.picker__control.is-open {
  background: transparent;
  border: 2px solid rgb(36 91 231);
}
.picker__control:disabled,
.picker__control[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.picker__control .chev {
  margin-left: auto;
  color: #6b6b6b;
}
.picker__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.picker__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}
.picker__opt:hover {
  background: #f5f5f5;
}
.picker__opt.is-selected {
  background: #e8f0fe;
  color: #1546c1;
}

/* chips input */
.chips-input {
  min-height: 40px;
  border: 1px solid rgb(0 0 0 / 0.38);
  border-radius: 4px;
  background: rgb(0 0 0 / 0.03);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: #9e9e9e;
  transition: background 0.15s, border-color 0.15s, border-width 0.1s;
}
.chips-input:hover {
  background: rgb(0 0 0 / 0.12);
  border-color: rgb(0 0 0 / 0.38);
}
.chips-input.is-open {
  background: transparent;
  border: 2px solid rgb(36 91 231);
}
.chips-input:disabled,
.chips-input[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.chips-input .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e0e0e0;
  color: #3c3c3c;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 13px;
}
.chips-input .chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  color: #6b6b6b;
}

/* move confirmation */
.move-warning {
  display: flex;
  gap: 10px;
  background: #fff8e1;
  border: 1px solid #ffe7a0;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  color: #5c4a00;
  margin-top: 16px;
}
.move-warning .icon {
  color: #f5a623;
  flex: 0 0 auto;
}
.move-body strong {
  font-weight: 700;
}

/* toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  z-index: 1000;
  min-width: 240px;
  max-width: 340px;
}
.toast__icon {
  background: #3d9e8c;
  width: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.toast__message {
  padding: 14px 18px;
  font-size: 14px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
}

/* dropdown menu (New button) */
.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  z-index: 50;
  min-width: 180px;
  padding: 4px 0 8px;
}
.menu-pop__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.88);
}
.menu-pop__item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.menu-pop__section-label {
  padding: 12px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 0.05em;
}
.new-wrap {
  position: relative;
}

/* ---------------- Row hover & menu active ---------------- */
.bk-row:not(.is-header):hover,
.bk-row.has-menu-open {
  background: #f5f5f5;
}
.row-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: #6b6b6b;
  transition: background 0.15s, color 0.15s;
}
.row-menu:hover,
.row-menu.is-active {
  background: #e8e8e8;
  color: #1a1a1a;
}

/* ---------------- Row context menu popup ---------------- */
.row-menu-pop {
  position: fixed;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  z-index: 200;
  min-width: 190px;
  padding: 4px 0;
}
.row-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
  color: #1a1a1a;
  position: relative;
  user-select: none;
}
.row-menu-item:hover {
  background: #f5f5f5;
}
.row-menu-item--danger {
  color: #c62828;
}
.row-menu-item--sub {
  justify-content: flex-start;
}
.row-menu-caret {
  margin-left: auto;
  color: #9e9e9e;
}
.row-menu-divider {
  border: none;
  border-top: 1px solid #efefef;
  margin: 4px 0;
}
.row-submenu {
  position: absolute;
  right: calc(100% + 2px);
  top: -4px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 160px;
  padding: 4px 0;
  z-index: 21;
}

/* ---------------- Detail panel ---------------- */
.detail-panel {
  width: 320px;
  flex: 0 0 320px;
  border-left: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
}
.detail-panel__header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #efefef;
  gap: 8px;
}
.detail-close-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6b6b6b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.detail-close-btn:hover {
  background: #f0f0f0;
}
.detail-panel__actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.detail-action-btn {
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  color: #3c3c3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.detail-action-btn:hover {
  background: #e0e0e0;
}
.detail-thumb-area {
  display: flex;
  justify-content: center;
  padding: 24px 16px 16px;
}
.detail-thumb-img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
}
.detail-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-thumb-color {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.detail-thumb-icon {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f5f5f;
}
.detail-panel__body {
  padding: 0 20px 24px;
}
.detail-name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}
.detail-breadcrumb {
  margin: 0 0 20px;
  font-size: 12px;
  color: #9e9e9e;
}
.detail-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9e9e9e;
  margin-bottom: 12px;
}
.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.detail-label {
  flex: 0 0 90px;
  color: #9e9e9e;
  font-size: 13px;
}
.detail-value {
  flex: 1;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  word-break: break-word;
}
.detail-link {
  color: #2962ff;
  text-decoration: none;
  word-break: break-all;
}
.detail-link:hover {
  text-decoration: underline;
}

/* ---------------- Top Navigation view ---------------- */
.topnav-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}
.topnav-filter-label {
  font-size: 14px;
  color: #616161;
}
.topnav-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0f0f0;
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #1a1a1a;
}
.topnav-chip-btn:hover {
  background: #e0e0e0;
}
.topnav-chip-btn--active {
  background: #e8f0fe;
  color: #2962ff;
  padding-right: 6px;
}
.topnav-chip-btn--add {
  background: transparent;
  border: 1.5px dashed #bdbdbd;
  color: #616161;
}
.topnav-chip-btn--add:hover {
  background: #f5f5f5;
  border-color: #9e9e9e;
}
.topnav-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 2px;
  color: #2962ff;
}
.topnav-chip-remove:hover {
  background: #c5cae9;
}
.topnav-addfilter-pop {
  position: fixed;
  z-index: 1100;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 4px 0;
  min-width: 160px;
}
.topnav-addfilter-opt {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  color: #1a1a1a;
}
.topnav-addfilter-opt:hover {
  background: #f5f5f5;
}
.topnav-addfilter-opt.is-selected {
  background: #e8f0fe;
  color: #2962ff;
  font-weight: 600;
}
.topnav-list {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}
.topnav-card {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  border: 1px solid #ebebeb;
}
.topnav-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: 72px;
}
.topnav-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topnav-card__name {
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
}
.topnav-card__lang {
  font-size: 13px;
  color: #9e9e9e;
  margin-left: 6px;
}
.topnav-card__sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #616161;
}
.topnav-card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topnav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: #616161;
  transition: background 0.15s;
}
.topnav-icon-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.07);
  color: #1a1a1a;
}
.topnav-icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.topnav-icon-btn--active {
  color: #f9a825;
}
.topnav-card__children {
  border-top: 1px solid #e5e5e5;
}
.topnav-bk-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 56px;
  font-size: 14px;
}
.topnav-bk-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
.topnav-bk-name {
  font-weight: 500;
  min-width: 120px;
}
.topnav-bk-url {
  color: #2962ff;
  text-decoration: none;
  font-size: 13px;
}
.topnav-bk-url:hover {
  text-decoration: underline;
}
.topnav-card__empty {
  border-top: 1px solid #e5e5e5;
  padding: 12px 56px;
  font-size: 13px;
  color: #9e9e9e;
  font-style: italic;
}
.topnav-empty {
  text-align: center;
  color: #9e9e9e;
  font-size: 14px;
  padding: 48px 0;
}

/* ---------------- TopNav dialog ---------------- */
.topnav-dialog-body {
  overflow-y: auto;
  max-height: calc(80vh - 160px);
  padding-right: 2px;
}
.topnav-general-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: end;
}
.topnav-icon-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgb(0 0 0 / 0.03);
  border: 1px solid rgb(0 0 0 / 0.38);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  width: auto;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.1s;
}
.topnav-icon-picker-btn:hover {
  background: rgb(0 0 0 / 0.12);
}
.topnav-icon-picker-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  width: 200px;
}
.topnav-icon-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: #616161;
}
.topnav-icon-option:hover {
  background: #f0f0f0;
}
.topnav-icon-option.is-selected {
  background: #e8f0fe;
  border-color: #2962ff;
  color: #2962ff;
}
.topnav-tabs {
  display: inline-flex;
  border: 1px solid rgb(0 0 0 / 0.2);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  background: rgb(0 0 0 / 0.03);
}
.topnav-tab {
  padding: 7px 18px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: #616161;
  border-right: 1px solid rgb(0 0 0 / 0.15);
  font-weight: 400;
  transition: background 0.1s;
}
.topnav-tab:last-child {
  border-right: none;
}
.topnav-tab:hover:not(.is-active) {
  background: rgb(0 0 0 / 0.06);
}
.topnav-tab.is-active {
  background: #fff;
  color: #1a1a1a;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.topnav-filter-box {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.topnav-filter-box__label {
  font-size: 14px;
  margin-bottom: 10px;
  color: #1a1a1a;
}
.topnav-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.topnav-filter-if {
  font-size: 13px;
  color: #616161;
  flex: 0 0 auto;
}
.topnav-select {
  border: 1px solid rgb(0 0 0 / 0.38);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 14px;
  background: rgb(0 0 0 / 0.03);
  cursor: pointer;
  color: #1a1a1a;
  transition: background 0.15s, border-color 0.1s;
  appearance: auto;
}
.topnav-select:hover {
  background: rgb(0 0 0 / 0.12);
}
.topnav-select:focus {
  outline: none;
  border: 2px solid rgb(36 91 231);
  background: transparent;
}
.topnav-select--full {
  width: 100%;
}
.topnav-select--inline {
  min-width: 70px;
  max-width: 100px;
  font-size: 13px;
  padding: 5px 8px;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: none;
  background: rgb(0 0 0 / 0.08);
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.1s;
}
.filter-pill:hover { background: rgb(0 0 0 / 0.15); }
.filter-pill-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgb(0 0 0 / 0.08);
  color: #616161;
  cursor: pointer;
  flex: 0 0 28px;
  transition: background 0.1s;
}
.filter-pill-add:hover { background: rgb(0 0 0 / 0.15); }
.filter-pill-pop {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 4px 0;
  min-width: 140px;
}
.filter-pill-opt {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  color: #1a1a1a;
}
.filter-pill-opt:hover { background: #f5f5f5; }
.filter-pill-opt.is-active { background: rgb(36 91 231 / 0.08); color: rgb(36 91 231); font-weight: 600; }
.topnav-filter-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgb(0 0 0 / 0.38);
  border-radius: 4px;
  padding: 4px 10px;
  background: rgb(0 0 0 / 0.03);
  transition: background 0.15s;
}
.topnav-filter-values:hover {
  background: rgb(0 0 0 / 0.12);
}
/* Design system small chip: height 24px, border-radius 12px, padding 0 12px */
.topnav-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  background: rgb(0 0 0 / 0.12);
  border-radius: 12px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgb(0 0 0 / 0.87);
  white-space: nowrap;
}
.topnav-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #616161;
}
.topnav-add-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #2962ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}
.topnav-add-filter-btn:hover {
  text-decoration: underline;
}
.topnav-preview-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0 8px;
  color: #1a1a1a;
}
.topnav-preview-row:hover {
  color: #2962ff;
}
.topnav-manual-placeholder {
  font-size: 14px;
  color: #9e9e9e;
  padding: 12px 0;
  font-style: italic;
}
.topnav-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.topnav-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  padding: 4px 0;
}
.topnav-toggle-label {
  color: #1a1a1a;
  font-size: 14px;
}
.topnav-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f0f0;
  flex: 0 0 auto;
}

/* ---------------- Filters popover ---------------- */
.filters-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 300px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  overflow: hidden;
}
.filters-pop__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
}
.filters-pop__title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}
.filters-pop__close {
  background: none;
  border: none;
  cursor: pointer;
  color: #616161;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
}
.filters-pop__close:hover {
  background: #f0f0f0;
}
.filters-pop__body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.filters-select {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  background: #f5f5f5;
  color: #1a1a1a;
  appearance: auto;
  cursor: pointer;
}
.filters-select:focus {
  outline: none;
  border-color: #2962ff;
}
.filters-pop__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.filters-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.filters-pop__clear {
  background: none;
  border: none;
  font-size: 14px;
  color: #9e9e9e;
  cursor: pointer;
  padding: 0;
}
.filters-pop__clear:hover {
  color: #1a1a1a;
}

/* ---------------- TopNav expanded bookmark cards ---------------- */
.topnav-bk-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-top: 1px solid #ebebeb;
  min-height: 72px;
}
.topnav-bk-card:last-child {
  border-bottom: none;
}
.topnav-bk-vis-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9e9e9e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex: 0 0 32px;
  transition: background 0.1s, color 0.1s;
}
.topnav-bk-vis-btn:hover { background: rgb(0 0 0 / 0.08); }
.topnav-bk-vis-btn.is-visible { color: #1a1a1a; }
.topnav-bk-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.topnav-bk-thumb__label {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.topnav-bk-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.topnav-bk-card__name {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topnav-bk-lang {
  font-weight: 400;
  font-size: 13px;
  color: #9e9e9e;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.topnav-bk-card__sub {
  font-size: 13px;
  color: #757575;
}
.topnav-bk-add {
  padding: 12px 16px;
  background: #fff;
}
.topnav-bk-add--top {
  border-bottom: 1px solid #ebebeb;
}
.topnav-add-inside-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f0f0;
  border: none;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #1a1a1a;
}
.topnav-add-inside-btn:hover {
  background: #e0e0e0;
}

/* ---------------- SectionPicker (design system style) ---------------- */
.sp-wrap {
  position: relative;
}
.sp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  border: 1px solid rgb(0 0 0 / 0.38);
  border-radius: 4px;
  background: rgb(0 0 0 / 0.03);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s, border-width 0.1s;
}
.sp-trigger:hover {
  background: rgb(0 0 0 / 0.12);
  border-color: rgb(0 0 0 / 0.38);
}
.sp-trigger.is-open {
  background: transparent;
  border: 2px solid rgb(36 91 231);
  outline: none;
}
.sp-panel {
  position: fixed;
  z-index: 1100;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border: 1px solid #e0e0e0;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}
.sp-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9e9e9e;
  text-transform: uppercase;
}
.sp-divider {
  height: 1px;
  background: #ebebeb;
  margin: 4px 0;
}
.sp-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  color: #1a1a1a;
  transition: background 0.1s;
}
.sp-opt:hover {
  background: #f5f5f5;
}
.sp-opt.is-selected {
  background: #e8f0fe;
  color: #1546c1;
}
.sp-opt span {
  flex: 1;
}
.sp-opt__info {
  color: #bdbdbd;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.1s;
}
.sp-opt:hover .sp-opt__info {
  opacity: 1;
}

/* ── Micro-app Picker ──────────────────────────────────────────────────────── */

/* Footer divider via has-dividers class the LumxDialog adds */
.lumx-dialog__footer--has-divider {
  border-top: 1px solid rgb(0 0 0 / 0.12) !important;
}

.map-chip {
  flex: 0 0 auto;
}
.map-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: none;
  background: rgb(0 0 0 / 0.12);
  color: rgb(0 0 0 / 0.87);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.map-chip-btn:hover {
  background: rgb(0 0 0 / 0.2);
}
.map-chip-btn.is-active {
  background: rgb(36 91 231 / 0.15);
  color: rgb(36 91 231);
}
.map-sort-pop {
  position: fixed;
  z-index: 1100;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 4px 0;
  min-width: 160px;
}
.map-sort-opt {
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  color: #1a1a1a;
  border-radius: 4px;
}
.map-sort-opt:hover { background: #f5f5f5; }
.map-sort-opt.is-active {
  background: rgb(36 91 231 / 0.08);
  color: rgb(36 91 231);
  font-weight: 600;
}

.map-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #616161;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.map-close-btn:hover { background: rgb(0 0 0 / 0.08); }
.map-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding-bottom: 16px;
}
.map-search {
  width: 220px;
  flex: 0 0 220px;
  display: flex;
  align-items: stretch;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  height: 36px;
  overflow: hidden;
}
.map-search:focus-within {
  border-color: rgb(36 91 231);
  box-shadow: 0 0 0 1px rgb(36 91 231);
}
.map-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  flex: 1;
  padding: 0 10px;
  color: #1a1a1a;
}
.map-search-btn {
  border: none;
  border-left: 1px solid #e0e0e0;
  background: #f5f5f5;
  cursor: pointer;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #616161;
  flex: 0 0 36px;
}
.map-search-btn:hover { background: #e8e8e8; }
.map-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #3c3c3c;
  white-space: nowrap;
}
.map-toolbar-btn:hover { background: #f5f5f5; }
.map-list-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0 -24px;
}
.map-filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 12px;
}
.map-filter-summary-label {
  font-size: 13px;
  color: #616161;
}
.map-filter-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: rgb(36 91 231);
  padding: 4px 6px;
  border-radius: 4px;
}
.map-filter-clear:hover { background: rgb(36 91 231 / 0.08); }
.map-tag-chip--active {
  background: rgb(36 91 231 / 0.12);
  border: 1px solid rgb(36 91 231 / 0.4);
  color: rgb(36 91 231);
  font-weight: 600;
}
.map-list {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  margin: 0 -24px;
}
.map-empty {
  padding: 40px 24px;
  text-align: center;
}
.map-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.map-empty-desc {
  font-size: 13px;
  color: #616161;
  margin-top: 6px;
}
.map-footer-count {
  font-size: 13px;
  color: #616161;
  margin-right: auto;
}
.map-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.1s;
}
.map-row:last-child { border-bottom: none; }
.map-row:hover { background: rgb(36 91 231 / 0.06); }
.map-row.is-selected { background: rgb(36 91 231 / 0.1); }
.map-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.map-thumb-label {
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.map-info {
  flex: 1;
  min-width: 0;
}
.map-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.map-desc {
  font-size: 13px;
  color: #616161;
  margin-top: 3px;
}
.map-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.map-topics-label {
  font-size: 12px;
  color: #9e9e9e;
}
.map-tag-chip {
  background: #e0e0e0;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  color: #3c3c3c;
  font-weight: 500;
}
.map-radio {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: rgb(36 91 231);
  flex: 0 0 auto;
}

/* ── New Micro-App Dialog preview ─────────────────────────────────────────── */
.mapp-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
}
.mapp-preview-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
}
.mapp-preview-info {
  flex: 1;
  min-width: 0;
}
.mapp-preview-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.mapp-preview-desc {
  font-size: 13px;
  color: #616161;
  margin-top: 2px;
}
.mapp-preview-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: #616161;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.mapp-preview-edit:hover {
  background: rgb(0 0 0 / 0.08);
  color: #1a1a1a;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  min-height: 400px;
}
.empty-state__icon {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
.empty-state__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.88);
  margin: 0;
}
.empty-state__hint {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Compact row — overrides the 72px map-row padding for the smaller icon */
.cp-row[data-v-b86e1fcc] {
  padding: 12px 24px;
  gap: 12px;
}

/* 36px grey circle icon thumb — matches lx-web-icon / content-block-figure from Figma */
.cp-icon-thumb[data-v-b86e1fcc] {
  width: 36px;
  height: 36px;
  border-radius: 300px;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
}

.org-picker[data-v-da4c8c91] {
  background: #f7f7f7;
  padding: 12px 24px 12px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Split button row */
.org-picker__btn-group[data-v-da4c8c91] {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  border-radius: 4px;
}
.org-picker__logo-btn[data-v-da4c8c91] {
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.org-picker__name-btn[data-v-da4c8c91] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 0 4px 4px 0;
  border: 2px solid transparent;
  transition: background 0.12s;
  min-width: 0;
}
.org-picker__name-btn.is-open[data-v-da4c8c91] {
  border-color: #245be7;
  border-radius: 4px;
  background: transparent !important;
}
.org-picker__name-text[data-v-da4c8c91] {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dropdown panel */
.org-picker__dropdown[data-v-da4c8c91] {
  position: fixed;
  z-index: 1100;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 8px 0;
}
.org-picker__item[data-v-da4c8c91] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.88);
  white-space: nowrap;
  transition: background 0.1s;
}
.org-picker__item[data-v-da4c8c91]:hover {
  background: rgba(0, 0, 0, 0.06);
}
.org-picker__item.is-selected[data-v-da4c8c91] {
  background: rgba(36, 91, 231, 0.1);
  color: #1546c1;
}
.org-picker__item.is-selected[data-v-da4c8c91]:hover {
  background: rgba(36, 91, 231, 0.14);
}