*:not(:defined) {
    display: none;
}

:root {
    color-scheme: light;
    /*  sm = small
        md = medium
        lg = large
    /* theme colors  => variants */
    --lds-color-primary: hsl(34, 92%, 48%);
    --lds-color-secondary: hsl(0, 0%, 80%);
    --lds-color-success: hsl(122, 39%, 49%);
    --lds-color-error: hsl(358, 74%, 58%);
    --lds-color-warning: hsl(36, 100%, 50%);
    --lds-color-info: hsl(207, 90%, 54%);

    /* theme color increments */
    --lds-color-primary-dark: hsl(34, 92%, 46%);
    --lds-color-secondary-dark: hsl(0, 0%, 78%);
    --lds-color-success-dark: hsl(122, 39%, 47%);
    --lds-color-error-dark: hsl(358, 74%, 56%);
    --lds-color-warning-dark: hsl(36, 100%, 48%);
    --lds-color-info-dark: hsl(207, 90%, 52%);

    --lds-color-default-100: #333;
    --lds-color-default-80: #707070;
    --lds-color-default-60: #9a9a9a;
    --lds-color-default-40: #c5c5c5;
    --lds-color-default-20: #eaeaea;
    --lds-color-default-0: #fff;

    --lds-text: var(--lds-color-default-80);
    --lds-text-invert: var(--lds-color-default-0);
    --lds-bg: var(--lds-color-default-0);

    --lds-disabled-opacity: 0.5;

    /* border */
    --lds-border-radius: 3px;

    /* snackbar */
    --lds-snackbar-bg: var(--lds-color-default-100);
    --lds-snackbar-text: var(--lds-color-default-20);

    /* box-shadow */
    --lds-box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 6px -3px, rgba(0, 0, 0, 0.14) 0px 10px 14px 1px,
        rgba(0, 0, 0, 0.12) 0px 4px 18px 3px;

    /* breakpoints */
    /* xs < sm */
    --lds-breakpoint-sm: 576px;
    --lds-breakpoint-md: 768px;
    --lds-breakpoint-lg: 1200px;
    --lds-breakpoint-xl: 1920px;
    /* < xl */
    /* valid are: xs, sm, md, lg, xl */
    /* determined if its still mobile device */
    --lds-breakpoint-mobile: lg;

    /* spacing */
    --lds-spacing-2xs: 4px;
    --lds-spacing-xs: 8px;
    --lds-spacing-sm: 12px;
    --lds-spacing-md: 16px;
    --lds-spacing-lg: 20px;
    --lds-spacing-xl: 24px;

    /* border-radius */
    --lds-border-radius-circle: 50%;
    --lds-border-radius-pill: 9999px;
    --lds-border-radius-xs: 3px;
    --lds-border-radius-sm: 12px;
    --lds-border-radius-md: 16px;
    --lds-border-radius-lg: 20px;
    --lds-border-radius-xl: 24px;

    /* border-width */
    --lds-border-width-xs: 1px;

    /* typography */
    /* too many imo */
    --lds-font-size-2xs: 10px;
    --lds-font-size-xs: 12px;
    --lds-font-size-sm: 14px;
    --lds-font-size-md: 16px;
    --lds-font-size-lg: 20px;
    --lds-font-size-xl: 24px;
    --lds-font-size-2xl: 28px;
    --lds-font-size-3xl: 32px;

    --lds-font-weight-thin: 100;
    --lds-font-weight-light: 300;
    --lds-font-weight-regular: 400;
    --lds-font-weight-medium: 500;
    --lds-font-weight-bold: 700;
    --lds-font-weight-black: 900;

    /* z-index */
    --lds-dropdown-z-index: 50;

    /* spinner */
    --lds-spinner-bg: var(--lds-color-default-20);
    --lds-spinner-color: var(--lds-color-default-60);
    --lds-spinner-speed: 1s;

    /* input, button */
    --lds-color-button-variant-text: var(--lds-color-default-0);
    --lds-color-button-default-text: var(--lds-color-default-80);

    --lds-input-border-radius: var(--lds-border-radius-xs);
    --lds-input-border-width: var(--lds-border-width-xs);
    --lds-input-border-color: var(--lds-color-default-60);
    --lds-input-border-style: solid;
    --lds-input-height-lg: 46px;
    --lds-input-height-md: 36px;
    --lds-input-height-sm: 26px;

    --lds-button-disabled-bg: var(--lds-color-default-20);

    /* checkbox */
    --lds-checkbox-size: 16px;

    /* radio */
    --lds-radio-inner-size: 10px;
    --lds-radio-ring-color: var(--lds-color-primary);

    /* dialog */
    --lds-dialog-header-spacing: var(--lds-spacing-xl);
    --lds-dialog-content-spacing: 0 var(--lds-spacing-xl) var(--lds-spacing-xl) var(--lds-spacing-xl);
    --lds-dialog-bg: var(--lds-color-default-0);

    /* toolbar */
    --lds-toolbar-font-size: var(--lds-font-size-lg);
    --lds-toolbar-text: var(--lds-text-invert);
    --lds-toolbar-bg: var(--lds-color-primary);
    --lds-toolbar-border-top: none;

    /* app */
    --lds-appbar-bg: var(--lds-color-default-20);
    --lds-appbar-z-index: 100;
    --lds-sidebar-bg: var(--lds-color-default-20);
    --lds-sidebar-width: 300px;
    --lds-sidebar-breakpoint: 580px;
    --lds-app-content-max-width: 1536px;
    --lds-app-height: 100vh;

    /* code */
    --lds-code-bg: white;
    --lds-code-text: var(--lds-color-default-100);

    /* list-item */
    --lds-list-item-bg: var(--lds-color-default-20);

    /* dropdown */
    --lds-dropdown-bg: var(--lds-color-default-0);
    --lds-dropdown-max-height: calc(49px * 6);
    /* menu item */
    --lds-menu-item-spacing-x: var(--lds-spacing-md);
    --lds-menu-item-spacing-y: var(--lds-spacing-md);

    /* switch */
    --lds-switch-active-bg: var(--lds-color-primary);
    --lds-switch-bg: var(--lds-color-default-40);
    --lds-switch-dot-bg: var(--lds-color-default-100);
    --lds-switch-active-dot-bg: var(--lds-color-default-100);
    --lds-switch-border-color: var(--lds-switch-bg);
    --lds-switch-active-border-color: var(--lds-switch-active-bg);
    --lds-switch-dot-size: 20px;
    --lds-switch-dot-border-color: var(--lds-switch-border-color);
    --lds-switch-active-dot-border-color: var(--lds-switch-active-border-color);
    --lds-switch-dot-spacing: 0px;

    /* progress-ring */
    --lds-progress-ring-color: var(--lds-color-primary);
    --lds-progress-ring-bg: var(--lds-color-default-20);

    /* swiper */
    --lds-swiper-background: #333;
    --swiper-pagination-bullet-size: 6px;
    --swiper-navigation-color: white;

    /* expansion panel */
    --lds-expansion-panel-border: 1px solid var(--lds-color-default-20);
    --lds-expansion-panel-transition-time: 0.2s;

    /* badge */
    --lds-badge-color: var(--lds-color-primary);
    --lds-badge-color-foreground: var(--lds-text-invert);

    /* payment */
    --lds-product-label-color: var(--lds-color-primary);
    --lds-product-price-color: var(--lds-color-default-60);

    /* stepper */
    --lds-stepper-active-color: var(--lds-color-primary);
    --lds-stepper-line-color: #e0e0e0;
    --lds-stepper-label-opacity: 0.75;
}

:root.lds-dark {
    color-scheme: dark;
    /* theme colors  => variants */
    --lds-color-primary: hsl(34, 92%, 48%);
    --lds-color-secondary: hsl(0, 0%, 80%);
    --lds-color-success: hsl(122, 39%, 49%);
    --lds-color-error: hsl(14, 100%, 57%);
    --lds-color-warning: hsl(36, 100%, 50%);
    --lds-color-info: hsl(207, 90%, 54%);

    /* theme color increments */
    --lds-color-primary-dark: rgb(208, 134, 37);

    --lds-color-default-100: #fff;
    --lds-color-default-80: #77777b;
    --lds-color-default-60: #5e5f63;
    --lds-color-default-40: #46474c;
    --lds-color-default-20: #303136;
    --lds-color-default-0: #1b1c21;

    --lds-text: var(--lds-color-default-100);

    --lds-color-button-variant-text: var(--lds-color-default-100);
    --lds-color-button-default-text: var(--lds-color-default-80);
    --lds-button-disabled-opacity: 0.5;

    --lds-code-bg: #1b1c21;

    --lds-code-text: var(--lds-color-default-0);
    --lds-code-filter: invert(0.92) hue-rotate(472deg) saturate(1.5);

    /* text-invert so far is only used for active states (option / menu-item)  */
    --lds-text-invert: var(--lds-color-default-100);

    /* snackbar */
    --lds-snackbar-bg: var(--lds-color-default-20);
    --lds-snackbar-text: var(--lds-color-default-100);
}

/** video player height fix, should this be here or video player? idk */
lds-swiper .video-js {
    padding-top: 0 !important;
}