.lk_ldBorderRadius_iyLZpqRx, .lk_borderRadius_I_8gGaZy { --ld-c-border-radius-rounded: var(--ld-s-border-radius-rounded); --ld-c-border-radius-extra-large: var(--ld-s-border-radius-extra-large); --ld-c-border-radius-large: var(--ld-s-border-radius-large); --ld-c-border-radius-extra-medium: var(--ld-s-border-radius-extra-medium); --ld-c-border-radius-medium: var(--ld-s-border-radius-medium); --ld-c-border-radius-small: var(--ld-s-border-radius-small); --ld-c-border-radius-none: var(--ld-s-border-radius-none); } .lk_ldForm_kjJGnecm, .lk_formContainer_fU0VHw7_ { --ld-c-form-placeholder-text-offset: 2px; --ld-c-form-transition-easing-default: ease-out; --ld-c-form-transition-duration-slow: var(--ld-s-transition-duration-slow); --ld-c-form-transition-duration-default: var(--ld-s-transition-duration-default); --ld-c-form-transition-duration-fast: var(--ld-s-transition-duration-fast); --ld-c-form-disabled: var(--ld-s-opacity-disabled); --ld-c-form-form-section-box-shadow-focus-type: var(--ld-prim-box-shadow-0-12-24-type); --ld-c-form-form-section-box-shadow-focus-spread: var(--ld-prim-box-shadow-0-12-24-spread); --ld-c-form-form-section-box-shadow-focus-blur: var(--ld-prim-box-shadow-0-12-24-blur); --ld-c-form-form-section-box-shadow-focus-y: var(--ld-prim-box-shadow-0-12-24-y); --ld-c-form-form-section-box-shadow-focus-x: var(--ld-prim-box-shadow-0-12-24-x); --ld-c-form-input-min-w: var(--ld-s-min-w-default); /* This token can be used to make all inputs wrap */ --ld-c-form-name-value-subheader-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-name-value-subheader-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-name-value-subheader-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-name-value-subheader-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-name-value-subheader-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-name-value-subheader-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-name-value-subheader-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-name-value-header-text-case: var(--ld-s-typography-label2-text-case); --ld-c-form-name-value-header-paragraph-spacing: var(--ld-s-typography-label2-paragraph-spacing); --ld-c-form-name-value-header-letter-spacing: var(--ld-s-typography-label2-letter-spacing); --ld-c-form-name-value-header-font-size: var(--ld-s-typography-label2-font-size); --ld-c-form-name-value-header-line-height: var(--ld-s-typography-label2-line-height); --ld-c-form-name-value-header-font-weight: var(--ld-s-typography-label2-font-weight); --ld-c-form-select-container-border-radius: var(--ld-s-border-radius-small); --ld-c-form-radio-border-radius: var(--ld-s-border-radius-rounded); --ld-c-form-text-info-subheader-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-info-subheader-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-info-subheader-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-info-subheader-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-info-subheader-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-info-subheader-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-info-subheader-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-info-header-text-case: var(--ld-s-typography-subtitle1-text-case); --ld-c-form-text-info-header-paragraph-spacing: var(--ld-s-typography-subtitle1-paragraph-spacing); --ld-c-form-text-info-header-line-height: var(--ld-s-typography-subtitle1-line-height); --ld-c-form-text-info-header-font-weight: var(--ld-s-typography-subtitle1-font-weight); --ld-c-form-form-section-box-shadow-focus-color: var(--ld-prim-box-shadow-0-12-24-color); --ld-c-form-form-section-border-radius: var(--ld-s-border-radius-extra-large); --ld-c-form-form-section-default: 1px solid var(--ld-s-color-utility-modifiers-midlight); /* This is the subtle border for most containers in form set */ --ld-c-form-text-field-support-text-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-field-support-text-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-field-support-text-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-field-support-text-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-field-support-text-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-field-support-text-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-field-support-text-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-field-body-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-body-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-body-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-body-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-body-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-body-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-body-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-text-field-label-text-case: var(--ld-s-typography-label1-text-case); --ld-c-form-text-field-label-paragraph-spacing: var(--ld-s-typography-label1-paragraph-spacing); --ld-c-form-text-field-label-letter-spacing: var(--ld-s-typography-label1-letter-spacing); --ld-c-form-text-field-label-font-size: var(--ld-s-typography-label1-font-size); --ld-c-form-text-field-label-line-height: var(--ld-s-typography-label1-line-height); --ld-c-form-text-field-label-font-weight: var(--ld-s-typography-label1-font-weight); --ld-c-form-text-field-placeholder-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-placeholder-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-placeholder-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-placeholder-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-placeholder-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-placeholder-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-placeholder-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-input-container-default-border-radius: var(--ld-s-border-radius-small); --ld-c-form-input-container-large-border-radius: var(--ld-s-border-radius-medium); --ld-c-form-name-value-header-font-family: var(--ld-s-typography-label2-font-family); --ld-c-form-select-item-min-height: var(--ld-s-dim-static-xl); --ld-c-form-select-item-hover-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-select-item-default-bg: var(--ld-s-color-elevation-raised-lighter); --ld-c-form-text-info-header-font-family: var(--ld-s-typography-subtitle1-font-family); --ld-c-form-form-section-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-form-section-v-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-h-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-focus: 2px solid var(--ld-s-color-accent-primary-default); /* This name needs to be worked on. Focus/Active/Hover can all share same treatment. Talk to team */ --ld-c-form-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* This is the focus ring that is used in tab targeting */ --ld-c-form-border-hover: 2px solid var(--ld-s-color-accent-primary-default); /* This is the hover border for most containers in form set */ --ld-c-form-border-default: 1px solid var(--ld-s-color-accent-primary-default); /* This is the default border for most containers in form set */ --ld-c-form-color-focus: var(--ld-s-color-accent-primary-default); --ld-c-form-color-placeholder-text: var(--ld-s-color-accent-primary-default); --ld-c-form-color-disabled: var(--ld-s-color-accent-primary-default); --ld-c-form-color-enabled: var(--ld-s-color-accent-primary-default); --ld-c-form-text-field-label-font-family: var(--ld-s-typography-label1-font-family); --ld-c-form-input-container-default-v-pad: var(--ld-s-dim-static-3xs); --ld-c-form-input-container-default-min-height: var(--ld-s-dim-static-xl); --ld-c-form-input-container-large-v-pad: var(--ld-s-dim-static-xs); --ld-c-form-input-container-large-min-height: var(--ld-s-dim-static-5xl); --ld-c-form-input-container-h-pad: var(--ld-s-dim-static-xs); /* This token sits here as its common across both default and large input-container. If confusing can just add 2 h-pad tokens to each individual set */ --ld-c-form-color-success: var(--ld-s-color-utility-success-darker); --ld-c-form-color-error: var(--ld-s-color-utility-error-default); --ld-c-form-text-info-header-letter-spacing: var(--ld-s-typography-subtitle1-letter-spacing); --ld-c-form-text-info-header-font-size: var(--ld-s-typography-subtitle1-font-size); --ld-c-form-border-success: 2px solid var(--ld-c-form-color-success); /* This is the success border for most containers in form set */ --ld-c-form-border-error: 2px solid var(--ld-c-form-color-error); /* This is the error border for most containers in form set */ } .lk_ldStack_WuMWO1WV, .lk_formContainer_fU0VHw7_ { --ld-c-stack-gap-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xl: var(--ld-s-dim-static-xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-l: var(--ld-s-dim-static-l); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-m: var(--ld-s-dim-static-m); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-s: var(--ld-s-dim-static-s); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xs: var(--ld-s-dim-static-xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-none: var(--ld-s-dim-static-none); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldTypographyGroup_Lqw_lPa3, .lk_typographyGroup_I6psY4zS { --ld-c-typography-group-margin-mobile-label1-bot: 12px; --ld-c-typography-group-margin-mobile-label1-top: 12px; --ld-c-typography-group-margin-mobile-price1-bot: 12px; --ld-c-typography-group-margin-mobile-price1-top: 12px; --ld-c-typography-group-margin-mobile-disclaimer1-bot: 12px; --ld-c-typography-group-margin-mobile-disclaimer1-top: 12px; --ld-c-typography-group-margin-mobile-caption1-bot: 19px; --ld-c-typography-group-margin-mobile-caption1-top: 19px; --ld-c-typography-group-margin-mobile-body2-bot: 19px; --ld-c-typography-group-margin-mobile-body2-top: 19px; --ld-c-typography-group-margin-mobile-body1-bot: 19px; --ld-c-typography-group-margin-mobile-body1-top: 19px; --ld-c-typography-group-margin-mobile-subtitle2-bot: 19px; --ld-c-typography-group-margin-mobile-subtitle2-top: 19px; --ld-c-typography-group-margin-mobile-subtitle1-bot: 19px; --ld-c-typography-group-margin-mobile-subtitle1-top: 19px; --ld-c-typography-group-margin-mobile-heading6-bot: 29px; --ld-c-typography-group-margin-mobile-heading5-bot: 29px; --ld-c-typography-group-margin-mobile-heading6-top: 29px; --ld-c-typography-group-margin-mobile-heading5-top: 29px; --ld-c-typography-group-margin-mobile-heading4-bot: 29px; --ld-c-typography-group-margin-mobile-heading4-top: 29px; --ld-c-typography-group-margin-mobile-heading3-bot: 29px; --ld-c-typography-group-margin-mobile-heading3-top: 29px; --ld-c-typography-group-margin-mobile-heading2-bot: 29px; --ld-c-typography-group-margin-mobile-heading2-top: 29px; --ld-c-typography-group-margin-mobile-heading1-bot: 29px; --ld-c-typography-group-margin-mobile-heading1-top: 29px; --ld-c-typography-group-margin-desktop-label1-bot: 12px; --ld-c-typography-group-margin-desktop-label1-top: 12px; --ld-c-typography-group-margin-desktop-price1-bot: 12px; --ld-c-typography-group-margin-desktop-price1-top: 12px; --ld-c-typography-group-margin-desktop-disclaimer1-bot: 12px; --ld-c-typography-group-margin-desktop-disclaimer1-top: 12px; --ld-c-typography-group-margin-desktop-caption1-bot: 19px; --ld-c-typography-group-margin-desktop-caption1-top: 19px; --ld-c-typography-group-margin-desktop-body2-bot: 19px; --ld-c-typography-group-margin-desktop-body2-top: 19px; --ld-c-typography-group-margin-desktop-body1-bot: 29px; --ld-c-typography-group-margin-desktop-body1-top: 29px; --ld-c-typography-group-margin-desktop-subtitle2-bot: 29px; --ld-c-typography-group-margin-desktop-subtitle2-top: 29px; --ld-c-typography-group-margin-desktop-subtitle1-bot: 29px; --ld-c-typography-group-margin-desktop-subtitle1-top: 29px; --ld-c-typography-group-margin-desktop-heading5-bot: 29px; --ld-c-typography-group-margin-desktop-heading6-bot: 29px; --ld-c-typography-group-margin-desktop-heading6-top: 29px; --ld-c-typography-group-margin-desktop-heading5-top: 29px; --ld-c-typography-group-margin-desktop-heading4-bot: 29px; --ld-c-typography-group-margin-desktop-heading4-top: 29px; --ld-c-typography-group-margin-desktop-heading3-bot: 29px; --ld-c-typography-group-margin-desktop-heading3-top: 29px; --ld-c-typography-group-margin-desktop-heading2-bot: 29px; --ld-c-typography-group-margin-desktop-heading2-top: 29px; --ld-c-typography-group-margin-desktop-heading1-bot: 43px; --ld-c-typography-group-margin-desktop-heading1-top: 43px; } .lk_h1_UpGyWlev { color: inherit; font-family: var(--ld-s-typography-heading1-font-family); font-size: var(--ld-s-typography-heading1-font-size); font-weight: var(--ld-s-typography-heading1-font-weight); letter-spacing: var(--ld-s-typography-heading1-letter-spacing); line-height: var(--ld-s-typography-heading1-line-height); text-transform: var(--ld-s-typography-heading1-text-case); } .lk_h2_KlIrf4yZ { color: inherit; font-family: var(--ld-s-typography-heading2-font-family); font-size: var(--ld-s-typography-heading2-font-size); font-weight: var(--ld-s-typography-heading2-font-weight); letter-spacing: var(--ld-s-typography-heading2-letter-spacing); line-height: var(--ld-s-typography-heading2-line-height); text-transform: var(--ld-s-typography-heading2-text-case); } .lk_h3_D5dLzJE3 { color: inherit; font-family: var(--ld-s-typography-heading3-font-family); font-size: var(--ld-s-typography-heading3-font-size); font-weight: var(--ld-s-typography-heading3-font-weight); letter-spacing: var(--ld-s-typography-heading3-letter-spacing); line-height: var(--ld-s-typography-heading3-line-height); text-transform: var(--ld-s-typography-heading3-text-case); } .lk_h4_Qoy7F72u { color: inherit; font-family: var(--ld-s-typography-heading4-font-family); font-size: var(--ld-s-typography-heading4-font-size); font-weight: var(--ld-s-typography-heading4-font-weight); letter-spacing: var(--ld-s-typography-heading4-letter-spacing); line-height: var(--ld-s-typography-heading4-line-height); text-transform: var(--ld-s-typography-heading4-text-case); } .lk_h5_WSKgK1pq { color: inherit; font-family: var(--ld-s-typography-heading5-font-family); font-size: var(--ld-s-typography-heading5-font-size); font-weight: var(--ld-s-typography-heading5-font-weight); letter-spacing: var(--ld-s-typography-heading5-letter-spacing); line-height: var(--ld-s-typography-heading5-line-height); text-transform: var(--ld-s-typography-heading5-text-case); } .lk_h6_bvACfYvr { color: inherit; font-family: var(--ld-s-typography-heading6-font-family); font-size: var(--ld-s-typography-heading6-font-size); font-weight: var(--ld-s-typography-heading6-font-weight); letter-spacing: var(--ld-s-typography-heading6-letter-spacing); line-height: var(--ld-s-typography-heading6-line-height); text-transform: var(--ld-s-typography-heading6-text-case); } .lk_s1_t9eG9SRT { color: inherit; font-family: var(--ld-s-typography-subtitle1-font-family); font-size: var(--ld-s-typography-subtitle1-font-size); font-weight: var(--ld-s-typography-subtitle1-font-weight); letter-spacing: var(--ld-s-typography-subtitle1-letter-spacing); line-height: var(--ld-s-typography-subtitle1-line-height); text-transform: var(--ld-s-typography-subtitle1-text-case); } .lk_s2__LVqGuU1 { color: inherit; font-family: var(--ld-s-typography-subtitle2-font-family); font-size: var(--ld-s-typography-subtitle2-font-size); font-weight: var(--ld-s-typography-subtitle2-font-weight); letter-spacing: var(--ld-s-typography-subtitle2-letter-spacing); line-height: var(--ld-s-typography-subtitle2-line-height); text-transform: var(--ld-s-typography-subtitle2-text-case); } .lk_b1_TEjtBwDX { color: inherit; font-family: var(--ld-s-typography-body1-font-family); font-size: var(--ld-s-typography-body1-font-size); font-weight: var(--ld-s-typography-body1-font-weight); letter-spacing: var(--ld-s-typography-body1-letter-spacing); line-height: var(--ld-s-typography-body1-line-height); text-transform: var(--ld-s-typography-body1-text-case); } .lk_b2_YHVnpcKa { color: inherit; font-family: var(--ld-s-typography-body2-font-family); font-size: var(--ld-s-typography-body2-font-size); font-weight: var(--ld-s-typography-body2-font-weight); letter-spacing: var(--ld-s-typography-body2-letter-spacing); line-height: var(--ld-s-typography-body2-line-height); text-transform: var(--ld-s-typography-body2-text-case); } .lk_c1_Jrqum1td { color: inherit; font-family: var(--ld-s-typography-caption1-font-family); font-size: var(--ld-s-typography-caption1-font-size); font-weight: var(--ld-s-typography-caption1-font-weight); letter-spacing: var(--ld-s-typography-caption1-letter-spacing); line-height: var(--ld-s-typography-caption1-line-height); text-transform: var(--ld-s-typography-caption1-text-case); } .lk_d1_Ukbwp_0z { color: inherit; font-family: var(--ld-s-typography-disclaimer1-font-family); font-size: var(--ld-s-typography-disclaimer1-font-size); font-weight: var(--ld-s-typography-disclaimer1-font-weight); letter-spacing: var(--ld-s-typography-disclaimer1-letter-spacing); line-height: var(--ld-s-typography-disclaimer1-line-height); text-transform: var(--ld-s-typography-disclaimer1-text-case); } .lk_p1_Mn4cjAAZ { color: inherit; font-family: var(--ld-s-typography-price1-font-family); font-size: var(--ld-s-typography-price1-font-size); font-weight: var(--ld-s-typography-price1-font-weight); letter-spacing: var(--ld-s-typography-price1-letter-spacing); line-height: var(--ld-s-typography-price1-line-height); text-transform: var(--ld-s-typography-price1-text-case); } .lk_l1_aveHIJ5o { color: inherit; font-family: var(--ld-s-typography-label1-font-family); font-size: var(--ld-s-typography-label1-font-size); font-weight: var(--ld-s-typography-label1-font-weight); letter-spacing: var(--ld-s-typography-label1-letter-spacing); line-height: var(--ld-s-typography-label1-line-height); text-transform: var(--ld-s-typography-label1-text-case); } .lk_l2_HhheXDNT { color: inherit; font-family: var(--ld-s-typography-label2-font-family); font-size: var(--ld-s-typography-label2-font-size); font-weight: var(--ld-s-typography-label2-font-weight); letter-spacing: var(--ld-s-typography-label2-letter-spacing); line-height: var(--ld-s-typography-label2-line-height); text-transform: var(--ld-s-typography-label2-text-case); } .lk_superscript_Jg0qfgl4 { text-decoration: none; } .lk_typographyGroup_I6psY4zS { color: inherit; font-family: var(--ld-s-typography-body1-font-family); font-size: var(--ld-s-typography-body1-font-size); font-weight: var(--ld-s-typography-body1-font-weight); letter-spacing: var(--ld-s-typography-body1-letter-spacing); line-height: var(--ld-s-typography-body1-line-height); text-transform: var(--ld-s-typography-body1-text-case); } .lk_typographyGroup_I6psY4zS.lk_typographyGroup_I6psY4zS :first-child { margin-top: 0; } .lk_typographyGroup_I6psY4zS.lk_typographyGroup_I6psY4zS :last-child { margin-bottom: 0; } .lk_typographyGroup_I6psY4zS .lk_h1_UpGyWlev { margin-bottom: var(--ld-c-typography-group-margin-mobile-heading1-bot); margin-top: var(--ld-c-typography-group-margin-mobile-heading1-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_h1_UpGyWlev { margin-bottom: var(--ld-c-typography-group-margin-desktop-heading1-bot); margin-top: var(--ld-c-typography-group-margin-desktop-heading1-top); } } .lk_typographyGroup_I6psY4zS .lk_h2_KlIrf4yZ { margin-bottom: var(--ld-c-typography-group-margin-mobile-heading2-bot); margin-top: var(--ld-c-typography-group-margin-mobile-heading2-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_h2_KlIrf4yZ { margin-bottom: var(--ld-c-typography-group-margin-desktop-heading2-bot); margin-top: var(--ld-c-typography-group-margin-desktop-heading2-top); } } .lk_typographyGroup_I6psY4zS .lk_h3_D5dLzJE3 { margin-bottom: var(--ld-c-typography-group-margin-mobile-heading3-bot); margin-top: var(--ld-c-typography-group-margin-mobile-heading3-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_h3_D5dLzJE3 { margin-bottom: var(--ld-c-typography-group-margin-desktop-heading3-bot); margin-top: var(--ld-c-typography-group-margin-desktop-heading3-top); } } .lk_typographyGroup_I6psY4zS .lk_h4_Qoy7F72u { margin-bottom: var(--ld-c-typography-group-margin-mobile-heading4-bot); margin-top: var(--ld-c-typography-group-margin-mobile-heading4-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_h4_Qoy7F72u { margin-bottom: var(--ld-c-typography-group-margin-desktop-heading4-bot); margin-top: var(--ld-c-typography-group-margin-desktop-heading4-top); } } .lk_typographyGroup_I6psY4zS .lk_h5_WSKgK1pq { margin-bottom: var(--ld-c-typography-group-margin-mobile-heading5-bot); margin-top: var(--ld-c-typography-group-margin-mobile-heading5-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_h5_WSKgK1pq { margin-bottom: var(--ld-c-typography-group-margin-desktop-heading5-bot); margin-top: var(--ld-c-typography-group-margin-desktop-heading5-top); } } .lk_typographyGroup_I6psY4zS .lk_h6_bvACfYvr { margin-bottom: var(--ld-c-typography-group-margin-mobile-heading6-bot); margin-top: var(--ld-c-typography-group-margin-mobile-heading6-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_h6_bvACfYvr { margin-bottom: var(--ld-c-typography-group-margin-desktop-heading6-bot); margin-top: var(--ld-c-typography-group-margin-desktop-heading6-top); } } .lk_typographyGroup_I6psY4zS .lk_s1_t9eG9SRT { margin-bottom: var(--ld-c-typography-group-margin-mobile-subtitle1-bot); margin-top: var(--ld-c-typography-group-margin-mobile-subtitle1-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_s1_t9eG9SRT { margin-bottom: var(--ld-c-typography-group-margin-desktop-subtitle1-bot); margin-top: var(--ld-c-typography-group-margin-desktop-subtitle1-top); } } .lk_typographyGroup_I6psY4zS .lk_s2__LVqGuU1 { margin-bottom: var(--ld-c-typography-group-margin-mobile-subtitle2-bot); margin-top: var(--ld-c-typography-group-margin-mobile-subtitle2-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_s2__LVqGuU1 { margin-bottom: var(--ld-c-typography-group-margin-desktop-subtitle2-bot); margin-top: var(--ld-c-typography-group-margin-desktop-subtitle2-top); } } .lk_typographyGroup_I6psY4zS .lk_b1_TEjtBwDX { margin-bottom: var(--ld-c-typography-group-margin-mobile-body1-bot); margin-top: var(--ld-c-typography-group-margin-mobile-body1-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_b1_TEjtBwDX { margin-bottom: var(--ld-c-typography-group-margin-desktop-body1-bot); margin-top: var(--ld-c-typography-group-margin-desktop-body1-top); } } .lk_typographyGroup_I6psY4zS .lk_b2_YHVnpcKa { margin-bottom: var(--ld-c-typography-group-margin-mobile-body2-bot); margin-top: var(--ld-c-typography-group-margin-mobile-body2-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_b2_YHVnpcKa { margin-bottom: var(--ld-c-typography-group-margin-desktop-body2-bot); margin-top: var(--ld-c-typography-group-margin-desktop-body2-top); } } .lk_typographyGroup_I6psY4zS .lk_c1_Jrqum1td { margin-bottom: var(--ld-c-typography-group-margin-mobile-caption1-bot); margin-top: var(--ld-c-typography-group-margin-mobile-caption1-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_c1_Jrqum1td { margin-bottom: var(--ld-c-typography-group-margin-desktop-caption1-bot); margin-top: var(--ld-c-typography-group-margin-desktop-caption1-top); } } .lk_typographyGroup_I6psY4zS .lk_d1_Ukbwp_0z { margin-bottom: var(--ld-c-typography-group-margin-mobile-disclaimer1-bot); margin-top: var(--ld-c-typography-group-margin-mobile-disclaimer1-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_typographyGroup_I6psY4zS .lk_d1_Ukbwp_0z { margin-bottom: var(--ld-c-typography-group-margin-desktop-disclaimer1-bot); margin-top: var(--ld-c-typography-group-margin-desktop-disclaimer1-top); } } .lk_book_POV_c_kW { font-weight: var(--ld-font-weights-book); } .lk_regular_WCyMzLnr { font-weight: var(--ld-font-weights-regular); } .lk_bold_oDpuTNoy { font-weight: var(--ld-font-weights-bold); } .lk_senkeiLine_xFaWnJGN { border-bottom: 3px solid var(--ld-color-lexus-inari-500); content: " "; display: inline-block; margin-bottom: 10px; margin-right: 8px; width: 40px; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_senkeiLine_xFaWnJGN { margin-bottom: 12px; margin-right: 15px; width: 80px; } } .lk_indented_tUIK7SYC { padding-left: 20px; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_indented_tUIK7SYC { padding-left: 40px; } } .lk_ldLink_rkJFctFX, .lk_genericLink_M3u66Hdl { --ld-c-link-external-transform-y: -1px; --ld-c-link-external-margin-left: 6px; --ld-c-link-line-w: 2px; } .lk_underline_rOnRhPx8, .lk_subtle_Di7yf5ks:hover, :where(.lk_genericLink_M3u66Hdl) { text-decoration: underline; text-decoration-thickness: 1px; } .lk_genericLink_M3u66Hdl { /* stylelint-disable */ } :where(.lk_genericLink_M3u66Hdl) :not(span) { cursor: pointer; } :where(.lk_genericLink_M3u66Hdl):hover { text-decoration-thickness: var(--ld-c-link-line-w); } .lk_genericLink_M3u66Hdl:where(.lk_senkei_bftHwUTk), .lk_genericLink_M3u66Hdl:where(.lk_subtle_Di7yf5ks), .lk_genericLink_M3u66Hdl:where(.lk_quiet_VY_bEv1w) { text-decoration: none; } .lk_wrapper_vXscZnks { display: block; } .lk_inlineWrapper_NJbtdFbc { display: inline-block; } .lk_senkei_bftHwUTk span { --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; } .lk_senkei_bftHwUTk span::after { content: ""; display: block; position: absolute; border-bottom: var(--ld-c-link-line-w) solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(-4px); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; } .lk_senkei_bftHwUTk span:hover::after { max-width: 100%; opacity: 1; } .lk_externalLink_ypW980pe::after { content: ""; margin-left: var(--ld-c-link-external-margin-left); /* stylelint-disable csstools/value-no-unknown-custom-properties */ mask-image: var(--lk-private-svg-external-link); width: var(--lk-private-svg-external-link-width); height: var(--lk-private-svg-external-link-height); /* stylelint-enable csstools/value-no-unknown-custom-properties */ display: inline-block; mask-repeat: no-repeat; mask-size: contain; mask-position: center; background-color: currentColor; transform: translateY(var(--ld-c-link-external-transform-y)); } .lk_ldFocusOutline_TCWkICBE, .lk_focusOutline__QH7LF1O { --ld-c-focus-outline-offset-smallest: -1px; /* -1px offset for elements like tab that need super tight focus outline. */ --ld-c-focus-outline-offset-smaller: 2px; /* Offset value for focus border padding of elements which already have 2px padding like radio and checkbox. */ --ld-c-focus-outline-none: var(--ld-s-border-radius-none); --ld-c-focus-outline-large: var(--ld-s-border-radius-large); --ld-c-focus-outline-medium: var(--ld-s-border-radius-medium); --ld-c-focus-outline-small: var(--ld-s-border-radius-small); /* Small border radius to be used on elements with no corner radius or fill. */ --ld-c-focus-outline-rounded: var(--ld-s-border-radius-rounded); /* Use this border-radius for rounded elements. */ --ld-c-focus-outline-extra-large: var(--ld-s-border-radius-extra-large); /* Focus outline radius for elements with medium border-radius. */ --ld-c-focus-outline-default: var(--ld-s-border-radius-extra-medium); /* Default border radius for elements with small border-radius like form inputs. */ --ld-c-focus-outline-outline: 1px dashed var(--ld-s-color-accent-primary-default); /* Dashed outline for focus. Becomes visible on tab or in some instances on interaction/active states like form input elements. */ --ld-c-focus-outline-offset-default: var(--ld-s-dim-static-4xs); /* Offset value for focus border padding. */ --ld-c-focus-outline-success: 1px dashed var(--ld-s-color-utility-success-darker); --ld-c-focus-outline-error: 1px dashed var(--ld-s-color-utility-error-default); /* Error border styling for input fields. */ } .lk_focusOutline__QH7LF1O:not(.lk_notSelf_rhaupqsX):focus-visible { outline: var(--ld-c-focus-outline-outline); } .lk_focusOutline__QH7LF1O.lk_within_BQxOejIz:has(:focus-visible) { outline: var(--ld-c-focus-outline-outline); } .lk_focusOutline__QH7LF1O.lk_within_BQxOejIz:has(:focus-visible)[aria-invalid=true], .lk_focusOutline__QH7LF1O.lk_within_BQxOejIz:has(:focus-visible):has([data-invalid]) { outline: var(--ld-c-focus-outline-error); } .lk_focusOutline__QH7LF1O.lk_within_BQxOejIz:has(:focus-visible)[aria-describedby=valid] { outline: var(--ld-c-focus-outline-success); } .lk_defaultOutlineOffSet_pwakf_ws { outline-offset: var(--ld-c-focus-outline-offset-default); } .lk_smallestOutlineOffSet_jlGiPdeF { outline-offset: var(--ld-c-focus-outline-offset-smallest); } .lk_smallOutlineOffSet_i5tgSrwj { outline-offset: var(--ld-c-focus-outline-offset-smaller); } .lk_noneOutlineOffSet_bedBZCh6 { outline-offset: 0px; } [data-focus-visible] .lk_focusOutline__QH7LF1O { outline: var(--ld-c-focus-outline-outline); } [data-focus-visible]:is([data-invalid]) .lk_focusOutline__QH7LF1O { outline: var(--ld-c-focus-outline-error); } .lk_formHelperText_YNzlwWrn { display: flex; } .lk_error_PkOSiELT { color: var(--ld-c-form-color-error); } :where(.lk_lkStylesScope_pWR9zlPH) { display: contents; } .lk_lkTheme_wwj86HIQ { display: contents; } /** * List of all the SVG icons of the project */ /** * Characters to escape from SVGs * Source: https://github.com/Threespot/frontline-sass/blob/master/src/variables/_escape-chars.scss */ /** * Helper to get URL-escaped inline SVG code */ /** * Convert all icons into custom properties */ :root { --lk-private-svg-arrow-right: url("data:image/svg+xml, %3Csvg%20width=%2717%27%20height=%2713%27%20viewBox=%270%200%2017%2013%27%20fill=%27none%27%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d=%27M1%206.5H16M16%206.5L9.7931%200.5M16%206.5L9.7931%2012.5%27%20stroke=%27%23EB0A1E%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%2F%3E%3C%2Fsvg%3E"); --lk-private-svg-arrow-right-width: 17px; --lk-private-svg-arrow-right-height: 13px; --lk-private-svg-external-link: url("data:image/svg+xml, %3Csvg%20width=%277%27%20height=%277%27%20viewBox=%272%2010%205%207%27%20fill=%27none%27%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d=%27M2.64648%2010.5H7.64648V15.5%27%20stroke=%27currentColor%27%20%2F%3E%3Cpath%20d=%27M7.64648%2010.3535L2%2016%27%20stroke=%27%231A1A1A%27%20%2F%3E%3C%2Fsvg%3E"); --lk-private-svg-external-link-width: 7px; --lk-private-svg-external-link-height: 7px; --lk-private-svg-search: url("data:image/svg+xml, %3Csvg%20width=%2716%27%20height=%2716%27%20viewBox=%270%200%2025%2024%27%20fill=%27none%27%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill-rule=%27evenodd%27%20clip-rule=%27evenodd%27%20d=%27M21.21%2019.29L17.81%2015.9C18.907%2014.5024%2019.5022%2012.7767%2019.5%2011C19.5%206.58172%2015.9183%203%2011.5%203C7.08172%203%203.5%206.58172%203.5%2011C3.5%2015.4183%207.08172%2019%2011.5%2019C13.2767%2019.0022%2015.0025%2018.407%2016.4%2017.31L19.79%2020.71C20.1789%2021.1021%2020.8121%2021.1047%2021.2042%2020.7158C21.2061%2020.7139%2021.2081%2020.7119%2021.21%2020.71V20.71C21.6021%2020.3211%2021.6047%2019.6879%2021.2158%2019.2958C21.2139%2019.2939%2021.2119%2019.2919%2021.21%2019.29L21.21%2019.29ZM5.5%2011V11C5.5%207.68629%208.18629%205%2011.5%205C14.8137%205%2017.5%207.68629%2017.5%2011C17.5%2014.3137%2014.8137%2017%2011.5%2017C8.18629%2017%205.5%2014.3137%205.5%2011L5.5%2011Z%27%20fill=%27%23E4E1D8%27%2F%3E%3C%2Fsvg%3E"); --lk-private-svg-search-width: 16px; --lk-private-svg-search-height: 16px; --lk-private-svg-loading-spinner: url("data:image/svg+xml, %3Csvg%20width=%2716%27%20height=%2716%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20opacity=%270.5%27%20fill-rule=%27evenodd%27%20clip-rule=%27evenodd%27%20d=%27M12%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012C3%2016.9706%207.02944%2021%2012%2021ZM12%2024C18.6274%2024%2024%2018.6274%2024%2012C24%205.37258%2018.6274%200%2012%200C5.37258%200%200%205.37258%200%2012C0%2018.6274%205.37258%2024%2012%2024Z%27%20fill=%27white%27%2F%3E%3Cpath%20d=%27M24%2012C24%205.37258%2018.6274%200%2012%200V3C16.9706%203%2021%207.02944%2021%2012H24Z%27%20fill=%27%23CA4B19%27%2F%3E%3Cpath%20d=%27M24%2012C24%205.37258%2018.6274%200%2012%200V3C16.9706%203%2021%207.02944%2021%2012H24Z%27%20stroke=%27tansparent%27%2F%3E%3C%2Fsvg%3E"); --lk-private-svg-loading-spinner-width: 16px; --lk-private-svg-loading-spinner-height: 16px; } :root { --icon-fill-color: var(--ld-button-icon-default); } :root { --lk-primary-nav-z-index: 1000; --lk-date-picker-popover-z-index: 1050; --lk-modal-z-index: 1100; --lk-popover-z-index: 1200; --lk-menu-close-button-container-z-index: 2; } :where(.lk_lkStylesScope_yruqvi_1) img { border-style: none; } :where(.lk_lkStylesScope_yruqvi_1) h1, :where(.lk_lkStylesScope_yruqvi_1) h2, :where(.lk_lkStylesScope_yruqvi_1) h3, :where(.lk_lkStylesScope_yruqvi_1) h4, :where(.lk_lkStylesScope_yruqvi_1) h5, :where(.lk_lkStylesScope_yruqvi_1) h6, :where(.lk_lkStylesScope_yruqvi_1) p, :where(.lk_lkStylesScope_yruqvi_1) blockquote { margin-top: 0; margin-bottom: 0; } :where(.lk_lkStylesScope_yruqvi_1) figure { margin: 0; } :where(.lk_lkStylesScope_yruqvi_1) button { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; } :where(.lk_lkStylesScope_yruqvi_1) button:hover { color: inherit; } :where(.lk_lkStylesScope_yruqvi_1) *, :where(.lk_lkStylesScope_yruqvi_1) *::before, :where(.lk_lkStylesScope_yruqvi_1) *::after { box-sizing: border-box; } :where(.lk_lkStylesScope_yruqvi_1) ul { margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; list-style: none; } :where(.lk_lkStylesScope_yruqvi_1) li { list-style: none; text-indent: 0; margin: 0; padding: 0; } :where(.lk_lkStylesScope_yruqvi_1) li::before { content: none; } :where(.lk_lkStylesScope_yruqvi_1) a { color: inherit; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ :where(.lk_lkStylesScope_yruqvi_1) { color: inherit; font-family: var(--ld-s-typography-body2-font-family); font-size: var(--ld-s-typography-body2-font-size); font-weight: var(--ld-s-typography-body2-font-weight); letter-spacing: var(--ld-s-typography-body2-letter-spacing); line-height: var(--ld-s-typography-body2-line-height); text-transform: var(--ld-s-typography-body2-text-case); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lk_inputLabel_ICRhnYzE { display: flex; } .lk_asterisk_NyC_16My { color: var(--ld-s-color-accent-secondary-default); } .lk_ldStack_U27wPzXn, .lk_stack_aBe6IFnz { --ld-c-stack-gap-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xl: var(--ld-s-dim-static-xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-l: var(--ld-s-dim-static-l); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-m: var(--ld-s-dim-static-m); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-s: var(--ld-s-dim-static-s); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xs: var(--ld-s-dim-static-xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-none: var(--ld-s-dim-static-none); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldInputBorder__TyGxGSG, .lk_inputBorder_PdWEmrKi { --ld-c-input-border-disabled: 0.5; /* Opacity for disabled state inputs. */ --ld-c-input-border-error-type: inset; --ld-c-input-border-error-spread: 2px; --ld-c-input-border-error-blur: 0; --ld-c-input-border-error-y: 0; --ld-c-input-border-error-x: 0; --ld-c-input-border-success-type: inset; --ld-c-input-border-success-spread: 2px; --ld-c-input-border-success-blur: 0; --ld-c-input-border-success-y: 0; --ld-c-input-border-success-x: 0; --ld-c-input-border-hover-type: inset; --ld-c-input-border-hover-spread: 2px; --ld-c-input-border-hover-blur: 0; --ld-c-input-border-hover-y: 0; --ld-c-input-border-hover-x: 0; --ld-c-input-border-default-type: inset; --ld-c-input-border-default-spread: 1px; --ld-c-input-border-default-blur: 0; --ld-c-input-border-default-y: 0; --ld-c-input-border-default-x: 0; --ld-c-input-border-border-radius-rounded: var(--ld-s-border-radius-rounded); --ld-c-input-border-border-radius-extra-large: var(--ld-s-border-radius-extra-large); --ld-c-input-border-border-radius-large: var(--ld-s-border-radius-large); --ld-c-input-border-border-radius-extra-medium: var(--ld-s-border-radius-extra-medium); --ld-c-input-border-border-radius-medium: var(--ld-s-border-radius-medium); /* Complex checkbox and radio will have this border-radius for the frame. */ --ld-c-input-border-border-radius-default: var(--ld-s-border-radius-small); /* Most input fields will have this border-radius value. */ --ld-c-input-border-hover-color: var(--ld-s-color-accent-primary-default); --ld-c-input-border-default-color: var(--ld-s-color-accent-primary-default); --ld-c-input-border-border-hover: 2px solid var(--ld-s-color-accent-primary-default); /* Hover and active state border properties. */ --ld-c-input-border-border-default: 1px solid var(--ld-s-color-accent-primary-default); /* Default input border when not interacted with. */ --ld-c-input-border-error-color: var(--ld-s-color-utility-error-default); --ld-c-input-border-success-color: var(--ld-s-color-utility-success-darker); --ld-c-input-border-border-error: 2px solid var(--ld-s-color-utility-error-default); /* Error border for input element containers. */ --ld-c-input-border-border-success: 2px solid var(--ld-s-color-utility-success-darker); /* Success border for input element containers. */ } .lk_inputBorder_PdWEmrKi { position: relative; display: flex; flex: 1; box-shadow: inset var(--ld-c-input-border-default-x) var(--ld-c-input-border-default-y) var(--ld-c-input-border-default-blur) var(--ld-c-input-border-default-spread) var(--ld-c-input-border-default-color); } .lk_inputBorder_PdWEmrKi input:focus { outline: none; } .lk_inputBorder_PdWEmrKi:has([data-disabled]) { opacity: var(--ld-c-input-border-disabled); cursor: not-allowed; pointer-events: none; } .lk_inputBorder_PdWEmrKi:not(.lk_invalid_qVp8dAeu, .lk_success_wohoP6EB):has([data-focused]):not(:has(.lk_inputBorder_PdWEmrKi)) { box-shadow: inset var(--ld-c-input-border-hover-x) var(--ld-c-input-border-hover-y) var(--ld-c-input-border-hover-blur) var(--ld-c-input-border-hover-spread) var(--ld-c-input-border-hover-color); } [data-hovered] .lk_inputBorder_PdWEmrKi:not(.lk_invalid_qVp8dAeu, .lk_success_wohoP6EB), [data-focus-visible] .lk_inputBorder_PdWEmrKi:not(.lk_invalid_qVp8dAeu, .lk_success_wohoP6EB) { box-shadow: inset var(--ld-c-input-border-hover-x) var(--ld-c-input-border-hover-y) var(--ld-c-input-border-hover-blur) var(--ld-c-input-border-hover-spread) var(--ld-c-input-border-hover-color); } .lk_inputBorderHoverState_qUPD6y9N:hover { box-shadow: inset var(--ld-c-input-border-hover-x) var(--ld-c-input-border-hover-y) var(--ld-c-input-border-hover-blur) var(--ld-c-input-border-hover-spread) var(--ld-c-input-border-hover-color); } .lk_success_wohoP6EB { box-shadow: inset var(--ld-c-input-border-success-x) var(--ld-c-input-border-success-y) var(--ld-c-input-border-success-blur) var(--ld-c-input-border-success-spread) var(--ld-c-input-border-success-color); } .lk_invalid_qVp8dAeu { box-shadow: inset var(--ld-c-input-border-error-x) var(--ld-c-input-border-error-y) var(--ld-c-input-border-error-blur) var(--ld-c-input-border-error-spread) var(--ld-c-input-border-error-color); } .lk_selected_AW2p9vwI { box-shadow: inset var(--ld-c-input-border-hover-x) var(--ld-c-input-border-hover-y) var(--ld-c-input-border-hover-blur) var(--ld-c-input-border-hover-spread) var(--ld-c-input-border-hover-color); } .lk_ldSpinner_C3s6hSVO, .lk_loadingSpinnerContainer_qHB0kMae { --ld-c-spinner-overlay-opacity: 0.1; /* 10% opacity */ --ld-c-spinner-overlay-bg: 0.9; --ld-c-spinner-border-radius: var(--ld-s-border-radius-rounded); --ld-c-spinner-bg: 2px solid var(--ld-s-color-utility-modifiers-midlight); /* This is the bg circle */ --ld-c-spinner-frame-size: var(--ld-s-dim-static-m); /* This is for the frame of the spinner */ --ld-c-spinner-size: var(--ld-s-dim-static-m)- var(--ld-s-dim-static-4xs); /* This is for the actual icon/svg */ --ld-c-spinner-fg: 2px solid var(--ld-s-color-accent-secondary-default); /* This is the rotating orange/senkei part */ } .lk_loadingSpinnerContainer_qHB0kMae { display: inline-flex; padding: 2px; } .lk_loadingSpinner_RA94KIAY { border: var(--ld-c-spinner-bg); border-bottom-color: var(--ld-s-color-accent-secondary-default); animation: lk_rotation_D9hUquRX 1s linear infinite; } @keyframes lk_rotation_D9hUquRX { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .lk_ldBox_PrnzNYCi, .lk_searchIcon_BE6_E6C7, .lk_searchInput_CuaFALLa { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_input_D_0wSmrn { border: 0; width: 100%; letter-spacing: var(--ld-c-form-text-field-body-text-letter-spacing); line-height: var(--ld-c-form-text-field-body-text-line-height); font-weight: var(--ld-c-form-text-field-body-text-font-weight); font-family: var(--ld-c-form-text-field-body-text-font-family); font-size: var(--ld-c-form-text-field-body-text-font-size); color: var(--ld-c-form-color-enabled); background-color: transparent; } .lk_input_D_0wSmrn[type=search]::-webkit-search-decoration, .lk_input_D_0wSmrn[type=search]::-webkit-search-cancel-button { appearance: none; } .lk_input_D_0wSmrn::placeholder { color: var(--ld-c-form-color-placeholder-text); opacity: 50%; transform: translateY(var(--ld-c-form-placeholder-text-offset)); } .lk_clearIcon_Gt62W3JP { display: flex; justify-content: center; cursor: pointer; color: var(--ld-s-color-accent-primary-default); } .lk_validIcon_M1DcXZEW { color: var(--ld-c-form-color-success); } .lk_inValidIcon_n133ZxvY { color: var(--ld-c-form-color-error); } .lk_searchIcon_BE6_E6C7 { left: var(--ld-c-box-pad-static-xs); height: 16px; width: 16px; } .lk_searchInput_CuaFALLa { padding: 0 var(--ld-c-box-pad-static-l); } .lk_inputContainer_Bqx6PBId { display: flex; align-items: center; width: 100%; min-height: var(--ld-c-form-input-container-default-min-height); padding: var(--ld-c-form-input-container-default-v-pad) var(--ld-c-form-input-container-h-pad); } .lk_iconContainer_KqEeCpeY { display: flex; } .lk_iconContainer_KqEeCpeY svg { height: var(--ld-dimension-16); width: var(--ld-dimension-16); } .lk_ldAutocomplete_Ux5EXdw5 { --ld-c-autocomplete-popover-hover: var(--ld-s-color-utility-modifiers-midlight); /* Hover bg colour for the search items in the popover. */ --ld-c-autocomplete-popover-bg: var(--ld-s-color-elevation-raised-lighter); /* Elevation lighter for default bg colour of the autocomplete popover. */ --ld-c-autocomplete-min-height: var(--ld-s-dim-static-xl); /* Min-height of the autocomplete list items. */ } .lk_autocomplete_JtEzjSgg[data-disabled] { opacity: 50%; cursor: not-allowed; } .lk_listbox_D_eVSarX { display: flex; flex-direction: column; gap: 1px; overflow: hidden; cursor: pointer; } .lk_isSolidPlaceholder_BtTlzTMB::placeholder { opacity: 1; } .lk_ldBox_bS6uz5A5, .lk_box_wPWZRzIr { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldSurface_fSVrwnxe, .lk_surface_Q4J7mUY4 { --ld-c-surface-highlight: var(--ld-s-color-utility-modifiers-midlight); /* Use to highlight interaction elements when hovered. */ --ld-c-surface-elevation-inset-darker: var(--ld-s-color-elevation-inset-darker); --ld-c-surface-elevation-inset-default: var(--ld-s-color-elevation-inset-default); --ld-c-surface-elevation-inset-lighter: var(--ld-s-color-elevation-inset-lighter); --ld-c-surface-elevation-raised-darker: var(--ld-s-color-elevation-raised-darker); --ld-c-surface-elevation-raised-default: var(--ld-s-color-elevation-raised-default); --ld-c-surface-elevation-raised-lighter: var(--ld-s-color-elevation-raised-lighter); --ld-c-surface-canvas-darker: var(--ld-s-color-canvas-darker); --ld-c-surface-canvas-default: var(--ld-s-color-canvas-default); --ld-c-surface-canvas-lighter: var(--ld-s-color-canvas-lighter); } .lk_surface_Q4J7mUY4 { --lk-canvas-color: var(--lk-surface-color); } .lk_surface_Q4J7mUY4:not(.lk_none_a0KlksQD):not(.lk_omitStyles_pwig1cm4), .lk_highlightOnHover_wwOTZy_u:hover:not(.lk_omitStyles_pwig1cm4) { background-color: var(--lk-surface-color); color: var(--ld-s-color-foreground-default); } .lk_highlightOnHover_wwOTZy_u:hover, .lk_highlight_M1B2PeIv { --lk-surface-color: var(--ld-c-surface-highlight); } .lk_canvasDefault_PDQsu35a { --lk-surface-color: var(--ld-c-surface-canvas-default); } .lk_canvasDarker_4v0_lSe6 { --lk-surface-color: var(--ld-c-surface-canvas-darker); } .lk_canvasLighter_vDlqIQXh { --lk-surface-color: var(--ld-c-surface-canvas-lighter); } .lk_elevationInsetDefault_SRQ4VKmd { --lk-surface-color: var(--ld-c-surface-elevation-inset-default); } .lk_elevationInsetDarker_pdfVH2H2 { --lk-surface-color: var(--ld-c-surface-elevation-inset-darker); } .lk_elevationInsetLighter_MofmqXe4 { --lk-surface-color: var(--ld-c-surface-elevation-inset-lighter); } .lk_elevationRaisedDefault_BVgmsyD6 { --lk-surface-color: var(--ld-c-surface-elevation-raised-default); } .lk_elevationRaisedDarker_gxWKiKj2 { --lk-surface-color: var(--ld-c-surface-elevation-raised-darker); } .lk_elevationRaisedLighter_MvgTGoLY { --lk-surface-color: var(--ld-c-surface-elevation-raised-lighter); } .lk_ldPopover_oEsqgzyd, .lk_popover_wGXZkxbN { --ld-c-popover-max-w: 400px; --ld-c-popover-box-shadow-type: var(--ld-s-box-shadow-default-type); --ld-c-popover-box-shadow-spread: var(--ld-s-box-shadow-default-spread); --ld-c-popover-box-shadow-blur: var(--ld-s-box-shadow-default-blur); --ld-c-popover-box-shadow-y: var(--ld-s-box-shadow-default-y); --ld-c-popover-box-shadow-x: var(--ld-s-box-shadow-default-x); --ld-c-popover-border: 1px solid var(--ld-s-color-utility-modifiers-midlight); --ld-c-popover-box-shadow-color: var(--ld-s-box-shadow-default-color); } .lk_popover_wGXZkxbN { box-shadow: var(--ld-c-popover-box-shadow-x) var(--ld-c-popover-box-shadow-y) var(--ld-c-popover-box-shadow-blur) var(--ld-c-popover-box-shadow-spread) var(--ld-c-popover-box-shadow-color) var(--ld-c-popover-box-shadow-type); border: var(--ld-c-popover-border); } .lk_useTriggerWidth_iDOBN5I6 { width: var(--trigger-width, auto); } .lk_scrollable_Os94b5Bm { height: 100%; overflow-y: auto; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldBox_AxQYcvYb, .lk_autoCompleteItem_SuaNEamo { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_autoCompleteItem_SuaNEamo { color: inherit; font-family: var(--ld-s-typography-body1-font-family); font-size: var(--ld-s-typography-body1-font-size); font-weight: var(--ld-s-typography-body1-font-weight); letter-spacing: var(--ld-s-typography-body1-letter-spacing); line-height: var(--ld-s-typography-body1-line-height); text-transform: var(--ld-s-typography-body1-text-case); color: var(--ld-s-color-accent-primary-default); text-transform: uppercase; } .lk_autoCompleteItem_SuaNEamo[data-focused] { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ background-color: var(--lk-surface-color); } .lk_ldForm_GZQONnaT, .lk_calendar_NDmlxbUr { --ld-c-form-placeholder-text-offset: 2px; --ld-c-form-transition-easing-default: ease-out; --ld-c-form-transition-duration-slow: var(--ld-s-transition-duration-slow); --ld-c-form-transition-duration-default: var(--ld-s-transition-duration-default); --ld-c-form-transition-duration-fast: var(--ld-s-transition-duration-fast); --ld-c-form-disabled: var(--ld-s-opacity-disabled); --ld-c-form-form-section-box-shadow-focus-type: var(--ld-prim-box-shadow-0-12-24-type); --ld-c-form-form-section-box-shadow-focus-spread: var(--ld-prim-box-shadow-0-12-24-spread); --ld-c-form-form-section-box-shadow-focus-blur: var(--ld-prim-box-shadow-0-12-24-blur); --ld-c-form-form-section-box-shadow-focus-y: var(--ld-prim-box-shadow-0-12-24-y); --ld-c-form-form-section-box-shadow-focus-x: var(--ld-prim-box-shadow-0-12-24-x); --ld-c-form-input-min-w: var(--ld-s-min-w-default); /* This token can be used to make all inputs wrap */ --ld-c-form-name-value-subheader-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-name-value-subheader-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-name-value-subheader-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-name-value-subheader-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-name-value-subheader-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-name-value-subheader-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-name-value-subheader-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-name-value-header-text-case: var(--ld-s-typography-label2-text-case); --ld-c-form-name-value-header-paragraph-spacing: var(--ld-s-typography-label2-paragraph-spacing); --ld-c-form-name-value-header-letter-spacing: var(--ld-s-typography-label2-letter-spacing); --ld-c-form-name-value-header-font-size: var(--ld-s-typography-label2-font-size); --ld-c-form-name-value-header-line-height: var(--ld-s-typography-label2-line-height); --ld-c-form-name-value-header-font-weight: var(--ld-s-typography-label2-font-weight); --ld-c-form-select-container-border-radius: var(--ld-s-border-radius-small); --ld-c-form-radio-border-radius: var(--ld-s-border-radius-rounded); --ld-c-form-text-info-subheader-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-info-subheader-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-info-subheader-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-info-subheader-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-info-subheader-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-info-subheader-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-info-subheader-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-info-header-text-case: var(--ld-s-typography-subtitle1-text-case); --ld-c-form-text-info-header-paragraph-spacing: var(--ld-s-typography-subtitle1-paragraph-spacing); --ld-c-form-text-info-header-line-height: var(--ld-s-typography-subtitle1-line-height); --ld-c-form-text-info-header-font-weight: var(--ld-s-typography-subtitle1-font-weight); --ld-c-form-form-section-box-shadow-focus-color: var(--ld-prim-box-shadow-0-12-24-color); --ld-c-form-form-section-border-radius: var(--ld-s-border-radius-extra-large); --ld-c-form-form-section-default: 1px solid var(--ld-s-color-utility-modifiers-midlight); /* This is the subtle border for most containers in form set */ --ld-c-form-text-field-support-text-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-field-support-text-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-field-support-text-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-field-support-text-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-field-support-text-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-field-support-text-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-field-support-text-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-field-body-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-body-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-body-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-body-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-body-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-body-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-body-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-text-field-label-text-case: var(--ld-s-typography-label1-text-case); --ld-c-form-text-field-label-paragraph-spacing: var(--ld-s-typography-label1-paragraph-spacing); --ld-c-form-text-field-label-letter-spacing: var(--ld-s-typography-label1-letter-spacing); --ld-c-form-text-field-label-font-size: var(--ld-s-typography-label1-font-size); --ld-c-form-text-field-label-line-height: var(--ld-s-typography-label1-line-height); --ld-c-form-text-field-label-font-weight: var(--ld-s-typography-label1-font-weight); --ld-c-form-text-field-placeholder-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-placeholder-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-placeholder-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-placeholder-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-placeholder-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-placeholder-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-placeholder-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-input-container-default-border-radius: var(--ld-s-border-radius-small); --ld-c-form-input-container-large-border-radius: var(--ld-s-border-radius-medium); --ld-c-form-name-value-header-font-family: var(--ld-s-typography-label2-font-family); --ld-c-form-select-item-min-height: var(--ld-s-dim-static-xl); --ld-c-form-select-item-hover-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-select-item-default-bg: var(--ld-s-color-elevation-raised-lighter); --ld-c-form-text-info-header-font-family: var(--ld-s-typography-subtitle1-font-family); --ld-c-form-form-section-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-form-section-v-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-h-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-focus: 2px solid var(--ld-s-color-accent-primary-default); /* This name needs to be worked on. Focus/Active/Hover can all share same treatment. Talk to team */ --ld-c-form-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* This is the focus ring that is used in tab targeting */ --ld-c-form-border-hover: 2px solid var(--ld-s-color-accent-primary-default); /* This is the hover border for most containers in form set */ --ld-c-form-border-default: 1px solid var(--ld-s-color-accent-primary-default); /* This is the default border for most containers in form set */ --ld-c-form-color-focus: var(--ld-s-color-accent-primary-default); --ld-c-form-color-placeholder-text: var(--ld-s-color-accent-primary-default); --ld-c-form-color-disabled: var(--ld-s-color-accent-primary-default); --ld-c-form-color-enabled: var(--ld-s-color-accent-primary-default); --ld-c-form-text-field-label-font-family: var(--ld-s-typography-label1-font-family); --ld-c-form-input-container-default-v-pad: var(--ld-s-dim-static-3xs); --ld-c-form-input-container-default-min-height: var(--ld-s-dim-static-xl); --ld-c-form-input-container-large-v-pad: var(--ld-s-dim-static-xs); --ld-c-form-input-container-large-min-height: var(--ld-s-dim-static-5xl); --ld-c-form-input-container-h-pad: var(--ld-s-dim-static-xs); /* This token sits here as its common across both default and large input-container. If confusing can just add 2 h-pad tokens to each individual set */ --ld-c-form-color-success: var(--ld-s-color-utility-success-darker); --ld-c-form-color-error: var(--ld-s-color-utility-error-default); --ld-c-form-text-info-header-letter-spacing: var(--ld-s-typography-subtitle1-letter-spacing); --ld-c-form-text-info-header-font-size: var(--ld-s-typography-subtitle1-font-size); --ld-c-form-border-success: 2px solid var(--ld-c-form-color-success); /* This is the success border for most containers in form set */ --ld-c-form-border-error: 2px solid var(--ld-c-form-color-error); /* This is the error border for most containers in form set */ } .lk_ldDatePicker_UBWoiqBh, .lk_calendar_NDmlxbUr { --ld-c-date-picker-container-min-w: 264px; --ld-c-date-picker-container-border-radius: var(--ld-s-border-radius-medium); --ld-c-date-picker-current-date-offset-width: var(--ld-s-dim-static-4xs); --ld-c-date-picker-cell-width: var(--ld-s-dim-static-m); /* This is for both days eg MO, TU, WE and individual days 1,2,3 */ --ld-c-date-picker-color-selected: var(--ld-s-color-accent-secondary-default); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_datePicker_cWcQoxVK[data-disabled] { opacity: var(--ld-s-opacity-disabled); } .lk_dateGroup_swhVQhYw { width: 100%; display: flex; align-items: center; position: relative; } .lk_loadingSpinner_q2atY3j0 { position: absolute; right: var(--ld-dimension-24); top: 50%; transform: translate(-50%, -50%); } .lk_dateSegment_jdVg3muO { display: flex; align-items: center; } .lk_dateSegment_jdVg3muO[data-placeholder], .lk_dateSegment_jdVg3muO[aria-hidden] { opacity: var(--ld-s-opacity-disabled); } .lk_dateSegment_jdVg3muO:not([data-focused]):not([data-focus-visible]) { outline: none; } .lk_headerText_q3Nutv5v { font-weight: var(--ld-font-weights-regular); text-transform: uppercase; } .lk_calendarCell_zsZiNh1I { color: inherit; font-family: var(--ld-s-typography-body1-font-family); font-size: var(--ld-s-typography-body1-font-size); font-weight: var(--ld-s-typography-body1-font-weight); letter-spacing: var(--ld-s-typography-body1-letter-spacing); line-height: var(--ld-s-typography-body1-line-height); text-transform: var(--ld-s-typography-body1-text-case); width: 32px; text-align: center; cursor: pointer; } .lk_calendarCell_zsZiNh1I[data-focus-visible], .lk_calendarCell_zsZiNh1I:focus-visible { outline: var(--ld-c-form-outline-focus); border-radius: var(--ld-s-border-radius-large); } .lk_calendarCell_zsZiNh1I[data-selected] { color: var(--ld-c-date-picker-color-selected); } .lk_calendarCell_zsZiNh1I[data-disabled], .lk_calendarCell_zsZiNh1I[data-unavailable] { opacity: 25%; cursor: not-allowed; } .lk_datesFromCurrentMonthOnly_trjkLWxg[data-outside-month] { display: none; } .lk_calendarCellToday_m1GXvTtq { text-decoration: underline var(--ld-c-date-picker-color-selected); text-underline-offset: var(--ld-c-date-picker-current-date-offset-width); } .lk_calendar_NDmlxbUr { color: var(--ld-s-color-accent-primary-default); border: 1px solid var(--ld-s-color-utility-modifiers-midlight); background: var(--ld-s-color-elevation-raised-lighter); width: fit-content; max-width: 100%; } .lk_header_vzlfqbUb { display: flex; align-items: center; justify-content: center; } .lk_heading_hyCqOl9M { color: inherit; font-family: var(--ld-s-typography-heading6-font-family); font-size: var(--ld-s-typography-heading6-font-size); font-weight: var(--ld-s-typography-heading6-font-weight); letter-spacing: var(--ld-s-typography-heading6-letter-spacing); line-height: var(--ld-s-typography-heading6-line-height); text-transform: var(--ld-s-typography-heading6-text-case); font-weight: var(--ld-font-weights-regular); flex: 1; display: flex; justify-content: center; margin: 0; } .lk_iconButtonContainer_qrbePQrJ { all: unset; box-sizing: border-box; width: 24px; height: 24px; padding: 4px; display: flex; align-items: center; justify-content: center; } .lk_iconButtonContainer_qrbePQrJ > svg { width: 100%; height: 100%; } .lk_iconButtonContainer_qrbePQrJ[data-disabled] { cursor: not-allowed; opacity: var(--ld-s-opacity-disabled); } .lk_dateInput_OwiJ2vuV { text-transform: uppercase; width: 100%; display: flex; border: 0; letter-spacing: var(--ld-c-form-text-field-body-text-letter-spacing); line-height: var(--ld-c-form-text-field-body-text-line-height); font-weight: var(--ld-c-form-text-field-body-text-font-weight); font-family: var(--ld-c-form-text-field-body-text-font-family); font-size: var(--ld-c-form-text-field-body-text-font-size); color: var(--ld-c-form-color-enabled); background-color: transparent; padding: var(--ld-c-form-input-container-default-v-pad) calc(var(--ld-dimension-24) + var(--ld-c-form-input-container-h-pad)) var(--ld-c-form-input-container-default-v-pad) var(--ld-c-form-input-container-h-pad); min-height: var(--ld-c-form-input-container-default-min-height); } .lk_dateInput_OwiJ2vuV::placeholder { color: var(--ld-c-form-color-placeholder-text); opacity: var(--ld-s-opacity-disabled); } .lk_calendarTriggerButton_nF7eH682 { cursor: pointer; position: absolute; right: var(--ld-c-form-input-container-default-v-pad); } .lk_calendarTriggerButton_nF7eH682:focus-visible { outline: var(--ld-c-form-outline-focus); outline-offset: calc(var(--ld-c-stack-gap-static-4xs) / 2); border-radius: var(--ld-s-border-radius-large); } .lk_datePickerContainer_uU2nwZJJ { position: relative; } .lk_calendarDatesContainer_p0e7e_5E { position: relative; } .lk_datePickerSpinnerContainer_aL61MIax { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--ld-c-form-select-item-default-bg); opacity: 0.75; display: flex; align-items: center; justify-content: center; } .lk_ldForm_q7WLfvId { --ld-c-form-placeholder-text-offset: 2px; --ld-c-form-transition-easing-default: ease-out; --ld-c-form-transition-duration-slow: var(--ld-s-transition-duration-slow); --ld-c-form-transition-duration-default: var(--ld-s-transition-duration-default); --ld-c-form-transition-duration-fast: var(--ld-s-transition-duration-fast); --ld-c-form-disabled: var(--ld-s-opacity-disabled); --ld-c-form-form-section-box-shadow-focus-type: var(--ld-prim-box-shadow-0-12-24-type); --ld-c-form-form-section-box-shadow-focus-spread: var(--ld-prim-box-shadow-0-12-24-spread); --ld-c-form-form-section-box-shadow-focus-blur: var(--ld-prim-box-shadow-0-12-24-blur); --ld-c-form-form-section-box-shadow-focus-y: var(--ld-prim-box-shadow-0-12-24-y); --ld-c-form-form-section-box-shadow-focus-x: var(--ld-prim-box-shadow-0-12-24-x); --ld-c-form-input-min-w: var(--ld-s-min-w-default); /* This token can be used to make all inputs wrap */ --ld-c-form-name-value-subheader-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-name-value-subheader-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-name-value-subheader-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-name-value-subheader-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-name-value-subheader-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-name-value-subheader-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-name-value-subheader-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-name-value-header-text-case: var(--ld-s-typography-label2-text-case); --ld-c-form-name-value-header-paragraph-spacing: var(--ld-s-typography-label2-paragraph-spacing); --ld-c-form-name-value-header-letter-spacing: var(--ld-s-typography-label2-letter-spacing); --ld-c-form-name-value-header-font-size: var(--ld-s-typography-label2-font-size); --ld-c-form-name-value-header-line-height: var(--ld-s-typography-label2-line-height); --ld-c-form-name-value-header-font-weight: var(--ld-s-typography-label2-font-weight); --ld-c-form-select-container-border-radius: var(--ld-s-border-radius-small); --ld-c-form-radio-border-radius: var(--ld-s-border-radius-rounded); --ld-c-form-text-info-subheader-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-info-subheader-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-info-subheader-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-info-subheader-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-info-subheader-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-info-subheader-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-info-subheader-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-info-header-text-case: var(--ld-s-typography-subtitle1-text-case); --ld-c-form-text-info-header-paragraph-spacing: var(--ld-s-typography-subtitle1-paragraph-spacing); --ld-c-form-text-info-header-line-height: var(--ld-s-typography-subtitle1-line-height); --ld-c-form-text-info-header-font-weight: var(--ld-s-typography-subtitle1-font-weight); --ld-c-form-form-section-box-shadow-focus-color: var(--ld-prim-box-shadow-0-12-24-color); --ld-c-form-form-section-border-radius: var(--ld-s-border-radius-extra-large); --ld-c-form-form-section-default: 1px solid var(--ld-s-color-utility-modifiers-midlight); /* This is the subtle border for most containers in form set */ --ld-c-form-text-field-support-text-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-field-support-text-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-field-support-text-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-field-support-text-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-field-support-text-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-field-support-text-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-field-support-text-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-field-body-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-body-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-body-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-body-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-body-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-body-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-body-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-text-field-label-text-case: var(--ld-s-typography-label1-text-case); --ld-c-form-text-field-label-paragraph-spacing: var(--ld-s-typography-label1-paragraph-spacing); --ld-c-form-text-field-label-letter-spacing: var(--ld-s-typography-label1-letter-spacing); --ld-c-form-text-field-label-font-size: var(--ld-s-typography-label1-font-size); --ld-c-form-text-field-label-line-height: var(--ld-s-typography-label1-line-height); --ld-c-form-text-field-label-font-weight: var(--ld-s-typography-label1-font-weight); --ld-c-form-text-field-placeholder-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-placeholder-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-placeholder-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-placeholder-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-placeholder-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-placeholder-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-placeholder-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-input-container-default-border-radius: var(--ld-s-border-radius-small); --ld-c-form-input-container-large-border-radius: var(--ld-s-border-radius-medium); --ld-c-form-name-value-header-font-family: var(--ld-s-typography-label2-font-family); --ld-c-form-select-item-min-height: var(--ld-s-dim-static-xl); --ld-c-form-select-item-hover-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-select-item-default-bg: var(--ld-s-color-elevation-raised-lighter); --ld-c-form-text-info-header-font-family: var(--ld-s-typography-subtitle1-font-family); --ld-c-form-form-section-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-form-section-v-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-h-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-focus: 2px solid var(--ld-s-color-accent-primary-default); /* This name needs to be worked on. Focus/Active/Hover can all share same treatment. Talk to team */ --ld-c-form-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* This is the focus ring that is used in tab targeting */ --ld-c-form-border-hover: 2px solid var(--ld-s-color-accent-primary-default); /* This is the hover border for most containers in form set */ --ld-c-form-border-default: 1px solid var(--ld-s-color-accent-primary-default); /* This is the default border for most containers in form set */ --ld-c-form-color-focus: var(--ld-s-color-accent-primary-default); --ld-c-form-color-placeholder-text: var(--ld-s-color-accent-primary-default); --ld-c-form-color-disabled: var(--ld-s-color-accent-primary-default); --ld-c-form-color-enabled: var(--ld-s-color-accent-primary-default); --ld-c-form-text-field-label-font-family: var(--ld-s-typography-label1-font-family); --ld-c-form-input-container-default-v-pad: var(--ld-s-dim-static-3xs); --ld-c-form-input-container-default-min-height: var(--ld-s-dim-static-xl); --ld-c-form-input-container-large-v-pad: var(--ld-s-dim-static-xs); --ld-c-form-input-container-large-min-height: var(--ld-s-dim-static-5xl); --ld-c-form-input-container-h-pad: var(--ld-s-dim-static-xs); /* This token sits here as its common across both default and large input-container. If confusing can just add 2 h-pad tokens to each individual set */ --ld-c-form-color-success: var(--ld-s-color-utility-success-darker); --ld-c-form-color-error: var(--ld-s-color-utility-error-default); --ld-c-form-text-info-header-letter-spacing: var(--ld-s-typography-subtitle1-letter-spacing); --ld-c-form-text-info-header-font-size: var(--ld-s-typography-subtitle1-font-size); --ld-c-form-border-success: 2px solid var(--ld-c-form-color-success); /* This is the success border for most containers in form set */ --ld-c-form-border-error: 2px solid var(--ld-c-form-color-error); /* This is the error border for most containers in form set */ } .lk_alert_qgBUjVVs { background: var(--ld-s-color-elevation-raised-lighter); padding: var(--ld-s-dim-scaled-even-less); border-left: 4px solid transparent; } .lk_iconContainer_IQMMmDwi { width: 24px; height: 24px; } .lk_iconContainer_IQMMmDwi > svg { width: inherit; height: inherit; } .lk_info_POaOVVSJ { border-color: var(--ld-s-color-utility-information-default); } .lk_success_tU1vGj7C { border-color: var(--ld-s-color-utility-success-default); } .lk_warning_r2OrgtjZ { border-color: var(--ld-s-color-utility-warning-default); } .lk_error_F_5_Y125 { border-color: var(--ld-s-color-utility-error-default); } .lk_ldBox_smL2w3so, .lk_radio_uRLuTwpq { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldRadio_FnnkaWkC, .lk_radio_uRLuTwpq { --ld-c-radio-circle-size-small: 20px; /* Small size of the radio circle with 2px padding around it for focus consideration. */ --ld-c-radio-unselected-border: none; --ld-c-radio-unselected-background: none; --ld-c-radio-selected-icon: none; --ld-c-radio-selected-border: none; --ld-c-radio-selected-background: none; --ld-c-radio-circle-size-default: var(--ld-s-dim-d-5); /* Default size of the radio circle with 2px padding around it for focus consideration. */ --ld-c-radio-border-radius: var(--ld-s-border-radius-rounded); } .lk_radio_uRLuTwpq { flex: 1; display: flex; min-height: var(--ld-c-form-input-container-default-min-height); padding: var(--ld-c-box-pad-static-3xs); } .lk_radio_uRLuTwpq.lk_isFramed_H_TaooQ6 { min-height: var(--ld-c-form-input-container-large-min-height); padding: var(--ld-c-form-input-container-large-v-pad) var(--ld-c-form-input-container-h-pad); } .lk_radio_uRLuTwpq .lk_stack_HiSqSsmL { width: 100%; } .lk_radio_uRLuTwpq .lk_iconContainer_o0MqmRSr { width: var(--ld-c-radio-circle-size-default); height: var(--ld-c-radio-circle-size-default); flex-shrink: 0; padding: var(--ld-dimension-2); } .lk_radio_uRLuTwpq .lk_radioDotContainer_oN_xy0f9 { height: 100%; } .lk_radio_uRLuTwpq[data-disabled] { opacity: 0.5; } .lk_radio_uRLuTwpq[data-selected] .lk_radioDot_KQioq_jG { position: absolute; background-color: var(--ld-c-form-color-enabled); top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; } .lk_radio_uRLuTwpq[data-invalid] .lk_radioDot_KQioq_jG { background: var(--ld-c-form-color-error); } .lk_svgIconWrapper_SDHQ2tyf { display: flex; height: 16px; width: 16px; } .lk_svgIconWrapper_SDHQ2tyf svg { height: 100%; width: 100%; } .lk_breakWord_UFZ6xkoJ { word-break: break-word; } .lk_ldStack_jIm24lK8, .lk_isHorizontal_dp5oHIEj { --ld-c-stack-gap-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xl: var(--ld-s-dim-static-xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-l: var(--ld-s-dim-static-l); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-m: var(--ld-s-dim-static-m); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-s: var(--ld-s-dim-static-s); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xs: var(--ld-s-dim-static-xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-none: var(--ld-s-dim-static-none); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldIcon_f_vQiuWt, .lk_isHorizontal_dp5oHIEj { --ld-icon-sizing-more: var(--ld-s-dim-d-5); --ld-icon-sizing-default: var(--ld-s-dim-d-4); --ld-icon-sizing-less: var(--ld-s-dim-d-3); } .lk_isHorizontal_dp5oHIEj > label { flex: 1 1 calc(50% - var(--ld-c-stack-gap-static-3xs)); min-width: min(var(--ld-c-form-input-min-w), 100%); } .lk_ldBox_rIdiy2Hs, .lk_checkbox_HV9YSqfn { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldCheckbox_Esv5cVZU, .lk_checkbox_HV9YSqfn { --ld-c-checkbox-box-size-small: 20px; /* Small variant size of the checkbox with 2px padding around it for focus consideration. */ --ld-c-checkbox-icon-size-small: var(--ld-s-dim-d-3); /* Small size for the tick icon. */ --ld-c-checkbox-icon-size-default: var(--ld-s-dim-d-4); /* Default size for the tick icon. */ --ld-c-checkbox-box-size-default: var(--ld-s-dim-d-5); /* Default size of the checkbox with 2px padding around it for focus consideration. */ --ld-c-checkbox-color-unselected-border: var(--ld-s-color-default-accent-primary-default); --ld-c-checkbox-color-selected-icon: var(--ld-s-color-default-accent-primary-default); --ld-c-checkbox-color-selected-border: var(--ld-s-color-default-accent-primary-default); } .lk_checkbox_HV9YSqfn { display: flex; width: 100%; min-height: var(--ld-c-form-input-container-default-min-height); padding: var(--ld-c-box-pad-static-3xs); } .lk_checkbox_HV9YSqfn.lk_isFramed_wj6Si0by { min-height: var(--ld-c-form-input-container-large-min-height); padding: var(--ld-c-form-input-container-large-v-pad) var(--ld-c-form-input-container-h-pad); } .lk_checkbox_HV9YSqfn .lk_stack_wCRDCG1Z { width: 100%; } .lk_checkbox_HV9YSqfn .lk_iconContainer_uPkiqx05 { width: var(--ld-c-checkbox-box-size-default); height: var(--ld-c-checkbox-box-size-default); flex-shrink: 0; padding: var(--ld-dimension-2); } .lk_checkbox_HV9YSqfn .lk_smallIconContainer_QMJwKUaH { width: var(--ld-c-checkbox-box-size-small); height: var(--ld-c-checkbox-box-size-small); } .lk_checkbox_HV9YSqfn .lk_checkboxTickContainer_S8G56W3F { height: 100%; } .lk_checkbox_HV9YSqfn .lk_checkboxTick_PpYRtcYx { display: none; } .lk_checkbox_HV9YSqfn[data-disabled] { opacity: 0.5; } .lk_checkbox_HV9YSqfn[data-selected] .lk_checkboxTick_PpYRtcYx { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--ld-c-checkbox-icon-size-default); height: var(--ld-c-checkbox-icon-size-default); } .lk_checkbox_HV9YSqfn[data-selected] .lk_smallCheckboxTick_NSLA11sI { width: var(--ld-c-checkbox-icon-size-small); height: var(--ld-c-checkbox-icon-size-small); } .lk_checkbox_HV9YSqfn[data-invalid] .lk_checkboxTick_PpYRtcYx { background: var(--ld-c-form-color-error); } .lk_ldDivider_bN9Eoudl, .lk_divider_Ppvrz3hT { --ld-c-divider-lightest: 0.1; --ld-c-divider-light: 0.3; --ld-c-divider-dark: 0.5; --ld-c-divider-darkest: 1; --ld-c-divider-default: var(--ld-s-color-accent-primary-default); } .lk_divider_Ppvrz3hT { height: 1px; background-color: var(--ld-c-divider-default); width: 100%; } .lk_invisible__zLMTPHr { opacity: 0%; } .lk_lightest_FImCwZX6 { opacity: var(--ld-c-divider-lightest); } .lk_light_nvqA5Gsb { opacity: var(--ld-c-divider-light); } .lk_dark_sIqre0lj { opacity: var(--ld-c-divider-dark); } .lk_darkest_JL9bHR23 { opacity: var(--ld-c-divider-darkest); } .lk_ldForm_V7r9S1gg { --ld-c-form-placeholder-text-offset: 2px; --ld-c-form-transition-easing-default: ease-out; --ld-c-form-transition-duration-slow: var(--ld-s-transition-duration-slow); --ld-c-form-transition-duration-default: var(--ld-s-transition-duration-default); --ld-c-form-transition-duration-fast: var(--ld-s-transition-duration-fast); --ld-c-form-disabled: var(--ld-s-opacity-disabled); --ld-c-form-form-section-box-shadow-focus-type: var(--ld-prim-box-shadow-0-12-24-type); --ld-c-form-form-section-box-shadow-focus-spread: var(--ld-prim-box-shadow-0-12-24-spread); --ld-c-form-form-section-box-shadow-focus-blur: var(--ld-prim-box-shadow-0-12-24-blur); --ld-c-form-form-section-box-shadow-focus-y: var(--ld-prim-box-shadow-0-12-24-y); --ld-c-form-form-section-box-shadow-focus-x: var(--ld-prim-box-shadow-0-12-24-x); --ld-c-form-input-min-w: var(--ld-s-min-w-default); /* This token can be used to make all inputs wrap */ --ld-c-form-name-value-subheader-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-name-value-subheader-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-name-value-subheader-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-name-value-subheader-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-name-value-subheader-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-name-value-subheader-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-name-value-subheader-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-name-value-header-text-case: var(--ld-s-typography-label2-text-case); --ld-c-form-name-value-header-paragraph-spacing: var(--ld-s-typography-label2-paragraph-spacing); --ld-c-form-name-value-header-letter-spacing: var(--ld-s-typography-label2-letter-spacing); --ld-c-form-name-value-header-font-size: var(--ld-s-typography-label2-font-size); --ld-c-form-name-value-header-line-height: var(--ld-s-typography-label2-line-height); --ld-c-form-name-value-header-font-weight: var(--ld-s-typography-label2-font-weight); --ld-c-form-select-container-border-radius: var(--ld-s-border-radius-small); --ld-c-form-radio-border-radius: var(--ld-s-border-radius-rounded); --ld-c-form-text-info-subheader-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-info-subheader-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-info-subheader-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-info-subheader-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-info-subheader-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-info-subheader-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-info-subheader-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-info-header-text-case: var(--ld-s-typography-subtitle1-text-case); --ld-c-form-text-info-header-paragraph-spacing: var(--ld-s-typography-subtitle1-paragraph-spacing); --ld-c-form-text-info-header-line-height: var(--ld-s-typography-subtitle1-line-height); --ld-c-form-text-info-header-font-weight: var(--ld-s-typography-subtitle1-font-weight); --ld-c-form-form-section-box-shadow-focus-color: var(--ld-prim-box-shadow-0-12-24-color); --ld-c-form-form-section-border-radius: var(--ld-s-border-radius-extra-large); --ld-c-form-form-section-default: 1px solid var(--ld-s-color-utility-modifiers-midlight); /* This is the subtle border for most containers in form set */ --ld-c-form-text-field-support-text-text-case: var(--ld-s-typography-body2-text-case); --ld-c-form-text-field-support-text-paragraph-spacing: var(--ld-s-typography-body2-paragraph-spacing); --ld-c-form-text-field-support-text-letter-spacing: var(--ld-s-typography-body2-letter-spacing); --ld-c-form-text-field-support-text-font-size: var(--ld-s-typography-body2-font-size); --ld-c-form-text-field-support-text-line-height: var(--ld-s-typography-body2-line-height); --ld-c-form-text-field-support-text-font-weight: var(--ld-s-typography-body2-font-weight); --ld-c-form-text-field-support-text-font-family: var(--ld-s-typography-body2-font-family); --ld-c-form-text-field-body-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-body-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-body-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-body-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-body-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-body-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-body-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-text-field-label-text-case: var(--ld-s-typography-label1-text-case); --ld-c-form-text-field-label-paragraph-spacing: var(--ld-s-typography-label1-paragraph-spacing); --ld-c-form-text-field-label-letter-spacing: var(--ld-s-typography-label1-letter-spacing); --ld-c-form-text-field-label-font-size: var(--ld-s-typography-label1-font-size); --ld-c-form-text-field-label-line-height: var(--ld-s-typography-label1-line-height); --ld-c-form-text-field-label-font-weight: var(--ld-s-typography-label1-font-weight); --ld-c-form-text-field-placeholder-text-text-case: var(--ld-s-typography-body1-text-case); --ld-c-form-text-field-placeholder-text-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-form-text-field-placeholder-text-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-form-text-field-placeholder-text-font-size: var(--ld-s-typography-body1-font-size); --ld-c-form-text-field-placeholder-text-line-height: var(--ld-s-typography-body1-line-height); --ld-c-form-text-field-placeholder-text-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-form-text-field-placeholder-text-font-family: var(--ld-s-typography-body1-font-family); --ld-c-form-input-container-default-border-radius: var(--ld-s-border-radius-small); --ld-c-form-input-container-large-border-radius: var(--ld-s-border-radius-medium); --ld-c-form-name-value-header-font-family: var(--ld-s-typography-label2-font-family); --ld-c-form-select-item-min-height: var(--ld-s-dim-static-xl); --ld-c-form-select-item-hover-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-select-item-default-bg: var(--ld-s-color-elevation-raised-lighter); --ld-c-form-text-info-header-font-family: var(--ld-s-typography-subtitle1-font-family); --ld-c-form-form-section-bg: var(--ld-s-color-elevation-raised-darker); --ld-c-form-form-section-v-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-h-pad: var(--ld-s-dim-scaled-default); --ld-c-form-form-section-focus: 2px solid var(--ld-s-color-accent-primary-default); /* This name needs to be worked on. Focus/Active/Hover can all share same treatment. Talk to team */ --ld-c-form-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* This is the focus ring that is used in tab targeting */ --ld-c-form-border-hover: 2px solid var(--ld-s-color-accent-primary-default); /* This is the hover border for most containers in form set */ --ld-c-form-border-default: 1px solid var(--ld-s-color-accent-primary-default); /* This is the default border for most containers in form set */ --ld-c-form-color-focus: var(--ld-s-color-accent-primary-default); --ld-c-form-color-placeholder-text: var(--ld-s-color-accent-primary-default); --ld-c-form-color-disabled: var(--ld-s-color-accent-primary-default); --ld-c-form-color-enabled: var(--ld-s-color-accent-primary-default); --ld-c-form-text-field-label-font-family: var(--ld-s-typography-label1-font-family); --ld-c-form-input-container-default-v-pad: var(--ld-s-dim-static-3xs); --ld-c-form-input-container-default-min-height: var(--ld-s-dim-static-xl); --ld-c-form-input-container-large-v-pad: var(--ld-s-dim-static-xs); --ld-c-form-input-container-large-min-height: var(--ld-s-dim-static-5xl); --ld-c-form-input-container-h-pad: var(--ld-s-dim-static-xs); /* This token sits here as its common across both default and large input-container. If confusing can just add 2 h-pad tokens to each individual set */ --ld-c-form-color-success: var(--ld-s-color-utility-success-darker); --ld-c-form-color-error: var(--ld-s-color-utility-error-default); --ld-c-form-text-info-header-letter-spacing: var(--ld-s-typography-subtitle1-letter-spacing); --ld-c-form-text-info-header-font-size: var(--ld-s-typography-subtitle1-font-size); --ld-c-form-border-success: 2px solid var(--ld-c-form-color-success); /* This is the success border for most containers in form set */ --ld-c-form-border-error: 2px solid var(--ld-c-form-color-error); /* This is the error border for most containers in form set */ } .lk_ldBox_y61IxDaL, .lk_dialog_N34GB2X6 { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldModal_B6fSyZUx, .lk_modalOverlay_Y16_tivp, .lk_dialog_N34GB2X6 { --ld-c-modal-color-bg: rgba(35,38,50,0.75); /* Color of the overlay, darkens the background to hightlight the modal */ --ld-c-modal-max-w: var(--ld-s-sz-columns-8col-max-w); /* Max width for the overlay slot */ --ld-c-modal-transition-duration: var(--ld-s-transition-duration-fast); --ld-c-modal-transition-easing: var(--ld-s-transition-easing-ease-out); --ld-c-modal-h-pad: var(--ld-s-dim-scaled-default); /* Padding for the overlay slot */ --ld-c-modal-v-pad: var(--ld-s-dim-scaled-most); /* Padding for the overlay slot */ } .lk_ldPopover_n6qgLEcD, .lk_popover_PzLh4IHM { --ld-c-popover-max-w: 400px; --ld-c-popover-box-shadow-type: var(--ld-s-box-shadow-default-type); --ld-c-popover-box-shadow-spread: var(--ld-s-box-shadow-default-spread); --ld-c-popover-box-shadow-blur: var(--ld-s-box-shadow-default-blur); --ld-c-popover-box-shadow-y: var(--ld-s-box-shadow-default-y); --ld-c-popover-box-shadow-x: var(--ld-s-box-shadow-default-x); --ld-c-popover-border: 1px solid var(--ld-s-color-utility-modifiers-midlight); --ld-c-popover-box-shadow-color: var(--ld-s-box-shadow-default-color); } .lk_modalOverlay_Y16_tivp { position: fixed; top: 0; left: 0; width: 100vw; /* stylelint-disable */ height: var(--visual-viewport-height); /* stylelint-enable */ background: var(--ld-c-modal-color-bg); display: flex; align-items: center; justify-content: center; z-index: var(--lk-modal-z-index, 1); } .lk_dialog_N34GB2X6 { /* stylelint-disable */ max-height: min(100vh - var(--ld-c-box-pad-static-m), var(--visual-viewport-height) - var(--ld-c-box-pad-static-m)); /* stylelint-enable */ box-sizing: border-box; overflow-y: auto; width: calc(100vw - var(--ld-c-box-pad-static-m)); max-width: var(--ld-c-modal-max-w); transition: all var(--ld-c-modal-transition-duration) var(--ld-c-modal-transition-easing); outline: none; position: relative; } .lk_popover_PzLh4IHM { max-width: var(--ld-c-popover-max-w); } .lk_ldIconLink_gGijyKYP, .lk_iconLink_kMFqPufV { --ld-c-icon-link-opacity-disabled: 0.5; /* 50% opacity for disabled state. */ --ld-c-icon-link-transition-text-duration: 450ms; /* The duration for the physical transition (transformation) of the label. */ --ld-c-icon-link-transition-icon-duration: var(--ld-s-transition-duration-default); /* The duration for the opacity of transition of the icon. */ --ld-c-icon-link-transition-easing-default: var(--ld-s-transition-easing-ease-out); --ld-c-icon-link-gap: var(--ld-s-dim-static-4xs); /* The gap between the chevron icon and the label. */ --ld-c-icon-link-chevron-size: var(--ld-s-dim-static-2xs); /* Fixed size for the chevron icon. */ } .lk_iconLink_kMFqPufV { display: inline-block; max-width: fit-content; } .lk_container_rm32Urpf { position: relative; padding-right: calc(var(--ld-c-icon-link-chevron-size) - 2 * var(--ld-c-icon-link-gap)); } .lk_container_rm32Urpf.lk_disabled_P6uDzhpi { opacity: var(--ld-c-icon-link-opacity-disabled); cursor: default; } .lk_container_rm32Urpf.lk_animated_JNJ1_9gq:not(.lk_disabled_P6uDzhpi):hover .lk_iconLeft_ALlGHDNp { opacity: 0; /* Finally hide left icon */ } .lk_container_rm32Urpf.lk_animated_JNJ1_9gq:not(.lk_disabled_P6uDzhpi):hover .lk_iconRight_tZfZp4uw { opacity: 1; /* Finally show right icon */ } .lk_container_rm32Urpf.lk_animated_JNJ1_9gq:not(.lk_disabled_P6uDzhpi):hover .lk_text_qf5NbAIS { transform: translateX(calc(0px - var(--ld-c-icon-link-chevron-size))); } .lk_container_rm32Urpf .lk_icon_YAOwfmlh { transition: opacity var(--ld-c-icon-link-transition-icon-duration) var(--ld-c-icon-link-transition-easing-default); } .lk_container_rm32Urpf .lk_icon_YAOwfmlh svg { height: var(--ld-c-icon-link-chevron-size); width: var(--ld-c-icon-link-chevron-size); display: block; } .lk_container_rm32Urpf .lk_iconLeft_ALlGHDNp { opacity: 1; /* Initially show left icon */ } .lk_container_rm32Urpf.lk_animated_JNJ1_9gq .lk_iconRight_tZfZp4uw { opacity: 0; /* Initially hide right icon */ position: absolute; right: 0; } .lk_container_rm32Urpf .lk_text_qf5NbAIS { transition: transform var(--ld-c-icon-link-transition-text-duration) var(--ld-c-icon-link-transition-easing-default); transform: translateX(0px); } .lk_infoCircleAnimated_v2hU6a3T { border: 2px; } .lk_infoCircleAnimated_v2hU6a3T .el_R83X2SrZK * { transition-duration: 0.5s; transition-property: transform; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } .lk_infoCircleAnimated_v2hU6a3T .el_R83X2SrZK { border-radius: 50%; } .lk_infoCircleAnimated_v2hU6a3T .el_jmHK5trHns_an_anWn31MKH { transform: translate(16px, 19px) translate(-16px, -19px) translate(0, 0); } .lk_active_oBXKtYsn.lk_infoCircleAnimated_v2hU6a3T .el_jmHK5trHns_an_anWn31MKH { transform: translate(16px, 19px) translate(-16px, -19px) translate(0, -3px); } .lk_infoCircleAnimated_v2hU6a3T .el_jmHK5trHns_an_A0eM93gt1 { transform: translate(16px, 19px) scale(1, 1) translate(-16px, -19px); } .lk_active_oBXKtYsn.lk_infoCircleAnimated_v2hU6a3T .el_jmHK5trHns_an_A0eM93gt1 { transform: translate(16px, 19px) scale(5, 0.3) translate(-16px, -19px); } .lk_infoCircleAnimated_v2hU6a3T .el_1fUqEs7ngG_an_PpSfaeqmh { transform: translate(16px, 7.9999px) translate(-16px, -7.9999px) translate(0, 0); } .lk_active_oBXKtYsn.lk_infoCircleAnimated_v2hU6a3T .el_1fUqEs7ngG_an_PpSfaeqmh { transform: translate(16px, 7.9999px) translate(-16px, -7.9999px) translate(0, 8px); } .lk_infoCircleAnimated_v2hU6a3T .el_jmHK5trHns_an_39zHbxqec { transform: translate(16px, 19px) rotate(0deg) translate(-16px, -19px); } .lk_active_oBXKtYsn.lk_infoCircleAnimated_v2hU6a3T .el_jmHK5trHns_an_39zHbxqec { transform: translate(16px, 19px) rotate(45deg) translate(-16px, -19px); } .lk_infoCircleAnimated_v2hU6a3T .el_1fUqEs7ngG_an_4pOv3FSUw { transform: translate(16px, 8px) rotate(0deg) translate(-16px, -8px); } .lk_active_oBXKtYsn.lk_infoCircleAnimated_v2hU6a3T .el_1fUqEs7ngG_an_4pOv3FSUw { transform: translate(16px, 8px) rotate(45deg) translate(-16px, -8px); } .lk_infoCircleAnimated_v2hU6a3T .el_1fUqEs7ngG_an_teAff_UH2 { transform: translate(16px, 8px) scale(1, 1) translate(-16px, -8px); } .lk_active_oBXKtYsn.lk_infoCircleAnimated_v2hU6a3T .el_1fUqEs7ngG_an_teAff_UH2 { transform: translate(16px, 8px) scale(1, 5) translate(-16px, -8px); } .lk_iconWrapper_D0AZ7sTg { display: inline-block; fill: currentColor; line-height: 1; } .lk_iconWrapper_D0AZ7sTg svg { display: block; } .lk_iconWrapper_D0AZ7sTg path, .lk_iconWrapper_D0AZ7sTg circle { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ fill: var(--icon-fill-color); } .lk_withBackground_WJeannOG { padding: 5px; background: rgba(255, 255, 255, 0.3921568627); } .lk_ldStack_hq_CNTvz { --ld-c-stack-gap-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xl: var(--ld-s-dim-static-xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-l: var(--ld-s-dim-static-l); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-m: var(--ld-s-dim-static-m); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-s: var(--ld-s-dim-static-s); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xs: var(--ld-s-dim-static-xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-none: var(--ld-s-dim-static-none); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_textField_BkYTMgRL { display: flex; flex-direction: column; gap: var(--ld-c-stack-gap-static-3xs); width: 100%; min-width: var(--ld-c-form-input-min-w); } .lk_textField_BkYTMgRL[data-disabled] { opacity: 50%; } .lk_success_OCY1QPF5 { color: var(--ld-c-form-color-success); } .lk_tooltipTrigger_PlmpiOWw { display: inline-flex; height: fit-content; } @charset "UTF-8"; .lk_ldTooltipPopup_IN77PXGS, .lk_tooltipPopup_Mq0GAetz { --ld-c-tooltip-popup-border-radius: var(--ld-s-border-radius-small); --ld-c-tooltip-popup-border: 1px solid var(--ld-s-color-foreground-default); /* Border for the tool-tip popup - same color as the text. */ --ld-c-tooltip-popup-text: var(--ld-s-color-foreground-default); /* Foreground default colour for the text within the tooltip popup. */ --ld-c-tooltip-popup-background: var(--ld-s-color-elevation-raised-default); /* Raised elevation colour for the background of the tooltip popup. */ --ld-c-tooltip-popup-margin: var(--ld-s-dim-scaled-default); /* Minimum margin for the tooltip to prevent it from touching the edge of the screen. This will scale, desktop is 40px and mobile is 24px. */ --ld-c-tooltip-popup-altitude: var(--ld-s-dim-static-4xs); /* 4px altitude from tip of pointer to base. */ --ld-c-tooltip-popup-base: var(--ld-s-dim-static-3xs); /* 8px base, total width of the triangle. */ } .lk_ldBox_XC0MHxRo, .lk_tooltipPopup_Mq0GAetz { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldIconTooltip_JdJg2bfU { --ld-c-icon-tooltip-clickable-area: 44px; --ld-c-icon-tooltip-shadow-default-type: dropShadow; --ld-c-icon-tooltip-shadow-default-spread: 0; --ld-c-icon-tooltip-shadow-default-blur: 8px; --ld-c-icon-tooltip-shadow-default-y: 1px; --ld-c-icon-tooltip-shadow-default-x: 0; --ld-c-icon-tooltip-icon-accent: var(--ld-color-core-white); /* Colour for icon – to allow theme switching. */ --ld-c-icon-tooltip-icon-default: var(--ld-color-core-black); /* Colour for icon – to allow theme switching. */ --ld-c-icon-tooltip-shadow-default-color: var(--ld-s-color-default-common-black); --ld-c-icon-tooltip-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* Focus outline for the icon in the icon tooltip. */ --ld-c-icon-tooltip-icon-size: var(--ld-s-dim-static-xs); /* 16px square for the i icon used on this icon tooltip component. */ } .lk_tooltipPopup_Mq0GAetz { /* Pseudo-element for the border */ } .lk_tooltipPopup_Mq0GAetz .lk_popupContent_K6qQ9jLs { position: relative; background-color: var(--ld-c-tooltip-popup-background); border: var(--ld-c-tooltip-popup-border); max-width: calc(100vw - var(--ld-c-tooltip-popup-margin) * 2); max-height: calc(100vh - var(--ld-c-tooltip-popup-margin) * 2); color: var(--ld-c-tooltip-popup-text); font-size: var(--ld-tooltip-typography-font-size); font-weight: var(--ld-tooltip-typography-font-weight); line-height: var(--ld-tooltip-typography-line-height); letter-spacing: var(--ld-tooltip-typography-letter-spacing); overflow: hidden auto; } .lk_tooltipPopup_Mq0GAetz .lk_popupContent_K6qQ9jLs > p { color: inherit; } .lk_tooltipPopup_Mq0GAetz .lk_triangle_VFVLMlQQ { width: 0; height: 0; border-left: calc(var(--ld-c-tooltip-popup-base) / 2) solid transparent; border-right: calc(var(--ld-c-tooltip-popup-base) / 2) solid transparent; border-bottom: var(--ld-c-tooltip-popup-altitude) solid var(--ld-s-color-foreground-default); } .lk_tooltipPopup_Mq0GAetz .lk_triangle_VFVLMlQQ::before { content: ""; position: absolute; top: 1px; left: calc(-1 * var(--ld-c-tooltip-popup-base) / 2); border-left: calc(var(--ld-c-tooltip-popup-base) / 2) solid transparent; border-right: calc(var(--ld-c-tooltip-popup-base) / 2) solid transparent; border-bottom: var(--ld-c-tooltip-popup-altitude) solid var(--ld-c-tooltip-popup-background); } .lk_positionTopRight_aFNMzBYd, .lk_positionTopLeft_XH2H_oCA, .lk_positionTopMiddle_G6TK9L67 { flex-direction: column-reverse; } .lk_positionBottomRight_uyb_cGyy, .lk_positionBottomLeft_bUwIG5sV, .lk_positionBottomMiddle_jzqwe51c { flex-direction: column; } .lk_positionMiddleLeft_wkUrHTyv, .lk_positionMiddleTopLeft_mYMBFOhD, .lk_positionMiddleBottomLeft_vZK_z1iw { flex-direction: row-reverse; } .lk_positionMiddleRight_MQBs1ppt, .lk_positionMiddleTopRight_wkp7Amgi, .lk_positionMiddleBottomRight_PFTRCUF8 { flex-direction: row; } .lk_containerTopLeft_B1Wqmpfh, .lk_containerBottomLeft_cE11wdPX { align-items: start; } .lk_containerTopRight_TFcb0XTK, .lk_containerBottomRight_B8UCAKzz { align-items: end; } .lk_containerTopMiddle_NbkQNiK2, .lk_containerBottomMiddle_GRWjFF7i, .lk_containerMiddleLeft_g0I_ih3y, .lk_containerMiddleRight_KhDdCOy8 { align-items: center; margin: 0; } .lk_containerMiddleBottomRight_yFox1JJ_, .lk_containerMiddleBottomLeft_iTjpjoj1 { align-items: flex-end; margin: calc(-1 * (var(--ld-c-box-pad-static-4xs) + var(--ld-c-tooltip-popup-altitude) / 2)) 0; } .lk_containerMiddleTopLeft_oD4Ofz2N, .lk_containerMiddleTopRight_LS7JXvFW { align-items: flex-start; margin: calc(-1 * (var(--ld-c-box-pad-static-4xs) + var(--ld-c-tooltip-popup-altitude) / 2)) 0; } .lk_containerMiddleBottomLeft_iTjpjoj1, .lk_containerMiddleTopLeft_oD4Ofz2N, .lk_containerMiddleLeft_g0I_ih3y { margin-right: var(--ld-c-tooltip-popup-margin); } .lk_containerMiddleBottomRight_yFox1JJ_, .lk_containerMiddleTopRight_LS7JXvFW, .lk_containerMiddleRight_KhDdCOy8 { margin-left: var(--ld-c-tooltip-popup-margin); } .lk_containerTopLeft_B1Wqmpfh, .lk_containerTopMiddle_NbkQNiK2, .lk_containerTopRight_TFcb0XTK { margin-bottom: var(--ld-c-tooltip-popup-margin); } .lk_containerBottomLeft_cE11wdPX, .lk_containerBottomMiddle_GRWjFF7i, .lk_containerBottomRight_B8UCAKzz { margin-top: var(--ld-c-tooltip-popup-margin); } .lk_pointerBottomLeft_ssjAQ8hd, .lk_pointerBottomRight_xV0eoZ5A, .lk_pointerBottomMiddle_rB5MOKRG { transform: rotate(180deg); margin-top: -1px; } .lk_pointerTopLeft_OgmFWOLA, .lk_pointerTopRight_hVtT06GE, .lk_pointerTopMiddle_MxGlc5V0 { transform: rotate(0); margin-bottom: -1px; } .lk_pointerMiddleLeft_odas2dQ4, .lk_pointerMiddleTopLeft_AMYvn5PB, .lk_pointerMiddleBottomLeft_O2OWbNHe { transform: rotate(-90deg); margin-right: -3px; } .lk_pointerMiddleRight_ir5jytJS, .lk_pointerMiddleTopRight_acHDMa9f, .lk_pointerMiddleBottomRight_MGLd1uZK { transform: rotate(90deg); margin-left: -3px; } .lk_ldIconButton_NzjNm7Wf, .lk_iconButton_swtfbg3W { --ld-c-icon-button-subtle-hover-type: inset; --ld-c-icon-button-subtle-hover-spread: 2px; --ld-c-icon-button-subtle-hover-blur: 0; --ld-c-icon-button-subtle-hover-y: 0; --ld-c-icon-button-subtle-hover-x: 0; --ld-c-icon-button-subtle-default-type: inset; --ld-c-icon-button-subtle-default-spread: 1px; --ld-c-icon-button-subtle-default-blur: 0; --ld-c-icon-button-subtle-default-y: 0; --ld-c-icon-button-subtle-default-x: 0; --ld-c-icon-button-subtle-background: none; /* No bg colour for the subtle variant. */ --ld-c-icon-button-bare-border-radius: 3px; /* Radius for the focus outline of the bare variant. */ --ld-c-icon-button-default-border-radius: 999px; /* Border-radius for the arrow to make it a circle. */ --ld-c-icon-button-highlight-border: 1px solid var(--ld-s-color-default-utility-modifiers-midlight); --ld-c-icon-button-highlight-hover-background: var(--ld-s-color-default-utility-modifiers-mid); /* Might change this to 20% shade of black, will need to add to colour themes. So this will be changed. */ --ld-c-icon-button-opacity-disabled: var(--ld-s-opacity-disabled); /* 50% opacity for the arrows to indicate disabled state. */ --ld-c-icon-button-default-hover-background: var(--ld-color-lexus-smoke-300); /* Hover colour for the arrow background. */ --ld-c-icon-button-highlight-enabled-background: var(--ld-s-color-utility-modifiers-midlight); --ld-c-icon-button-bare-hover-background: var(--ld-s-color-utility-modifiers-midlight); /* Midlight color for the hover background of the bare variant. */ --ld-c-icon-button-shadow-default-type: var(--ld-s-box-shadow-less-type); --ld-c-icon-button-shadow-default-spread: var(--ld-s-box-shadow-less-spread); --ld-c-icon-button-shadow-default-blur: var(--ld-s-box-shadow-less-blur); --ld-c-icon-button-shadow-default-y: var(--ld-s-box-shadow-less-y); --ld-c-icon-button-shadow-default-x: var(--ld-s-box-shadow-less-x); --ld-c-icon-button-default-color: var(--ld-s-color-default-common-black); /* Colour of the chevron icon. */ --ld-c-icon-button-default-enabled-background: var(--ld-s-color-alt-common-white); /* Default colour for the arrow. */ --ld-c-icon-button-highlight-color: var(--ld-s-color-foreground-default); /* Color for the icon in the higlight variant. */ --ld-c-icon-button-subtle-color: var(--ld-s-color-foreground-default); /* Color for the icon in the subtle icon-button variant. */ --ld-c-icon-button-subtle-hover-color: var(--ld-s-color-accent-primary-default); --ld-c-icon-button-subtle-default-color: var(--ld-s-color-accent-primary-opacity-default-lighter); --ld-c-icon-button-bare-color: var(--ld-s-color-foreground-default); /* Color of the icon for the bare variant of the icon-button. */ --ld-c-icon-button-shadow-default-color: var(--ld-s-box-shadow-less-color); --ld-c-icon-button-focus-offset: var(--ld-s-dim-static-4xs); /* Offset value for the focus border padding. */ --ld-c-icon-button-border: 1px solid var(--ld-s-color-elevation-inset-darker); /* Border values for the arrow. Elevation inset colour to make border darker than the canvas background and the arrow background. */ --ld-c-icon-button-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* Focus outline values for the arrow. */ --ld-c-icon-button-padding-small: var(--ld-s-dim-static-3xs); /* Padding for around the icon to create smaller sized icon-buttons, all variant style types but bare. */ --ld-c-icon-button-padding-default: var(--ld-s-dim-static-2xs); /* Padding for around the icon to create bigger sized icon-buttons, all variant style types but bare. */ --ld-c-icon-button-icon-size: var(--ld-s-dim-static-xs); /* 16px size value for the icon. */ --ld-c-icon-button-size: var(--ld-s-dim-static-l); /* 40px fixed size value for icon-button. This can be deprecated from May 2025. */ } .lk_iconButton_swtfbg3W { display: inline-flex; align-items: center; justify-content: center; height: var(--ld-c-icon-button-icon-size); width: var(--ld-c-icon-button-icon-size); padding: var(--ld-c-icon-button-padding-default); box-sizing: content-box; cursor: pointer; background-color: var(--ld-c-icon-button-default-enabled-background); } .lk_iconButton_swtfbg3W:not(:empty) { color: var(--ld-c-icon-button-default-color); } .lk_iconButton_swtfbg3W.lk_small_wZdApHjO { padding: var(--ld-c-icon-button-padding-small); } .lk_iconButton_swtfbg3W.lk_bare_D8EYhwiU { background: none; color: var(--ld-c-icon-button-bare-color); padding: 0; height: auto; } .lk_iconButton_swtfbg3W.lk_subtle_DkMRY2X0 { background: var(--ld-c-icon-button-subtle-background); color: var(--ld-c-icon-button-subtle-color); box-shadow: var(--ld-c-icon-button-subtle-default-type) var(--ld-c-icon-button-subtle-default-x) var(--ld-c-icon-button-subtle-default-y) var(--ld-c-icon-button-subtle-default-blur) var(--ld-c-icon-button-subtle-default-spread) var(--ld-c-icon-button-subtle-default-color); } .lk_iconButton_swtfbg3W.lk_highlight_Wq3Wkd5k { background: var(--ld-c-icon-button-highlight-enabled-background); color: var(--ld-c-icon-button-highlight-color); border: var(--ld-c-icon-button-highlight-border); padding: calc(var(--ld-c-icon-button-padding-default) - 1px); } .lk_iconButton_swtfbg3W.lk_highlight_Wq3Wkd5k.lk_small_wZdApHjO { padding: calc(var(--ld-c-icon-button-padding-small) - 1px); } .lk_iconButton_swtfbg3W.lk_shadowed_AxD8D81o { box-shadow: var(--ld-c-icon-button-shadow-default-x) var(--ld-c-icon-button-shadow-default-y) var(--ld-c-icon-button-shadow-default-blur) var(--ld-c-icon-button-shadow-default-spread) var(--ld-c-icon-button-shadow-default-color); } .lk_iconButton_swtfbg3W.lk_shadowed_AxD8D81o:hover { box-shadow: none; } .lk_iconButton_swtfbg3W.lk_disabled_qfPYK0QO { opacity: 50%; cursor: default; } .lk_iconButton_swtfbg3W:hover:not(.lk_disabled_qfPYK0QO) { background-color: var(--ld-c-icon-button-default-hover-background); } .lk_iconButton_swtfbg3W:hover:not(.lk_disabled_qfPYK0QO).lk_bare_D8EYhwiU { background-color: var(--ld-c-icon-button-bare-hover-background); } .lk_iconButton_swtfbg3W:hover:not(.lk_disabled_qfPYK0QO).lk_subtle_DkMRY2X0 { background-color: transparent; box-shadow: var(--ld-c-icon-button-subtle-hover-type) var(--ld-c-icon-button-subtle-hover-x) var(--ld-c-icon-button-subtle-hover-y) var(--ld-c-icon-button-subtle-hover-blur) var(--ld-c-icon-button-subtle-hover-spread) var(--ld-c-icon-button-subtle-hover-color); } .lk_iconButton_swtfbg3W:hover:not(.lk_disabled_qfPYK0QO).lk_highlight_Wq3Wkd5k { background-color: var(--ld-c-icon-button-highlight-hover-background); } @charset "UTF-8"; .lk_ldIconButton_NDGb8MmU, .lk_tooltipWithIcon_Jawc3CB8 { --ld-c-icon-button-subtle-hover-type: inset; --ld-c-icon-button-subtle-hover-spread: 2px; --ld-c-icon-button-subtle-hover-blur: 0; --ld-c-icon-button-subtle-hover-y: 0; --ld-c-icon-button-subtle-hover-x: 0; --ld-c-icon-button-subtle-default-type: inset; --ld-c-icon-button-subtle-default-spread: 1px; --ld-c-icon-button-subtle-default-blur: 0; --ld-c-icon-button-subtle-default-y: 0; --ld-c-icon-button-subtle-default-x: 0; --ld-c-icon-button-subtle-background: none; /* No bg colour for the subtle variant. */ --ld-c-icon-button-bare-border-radius: 3px; /* Radius for the focus outline of the bare variant. */ --ld-c-icon-button-default-border-radius: 999px; /* Border-radius for the arrow to make it a circle. */ --ld-c-icon-button-highlight-border: 1px solid var(--ld-s-color-default-utility-modifiers-midlight); --ld-c-icon-button-highlight-hover-background: var(--ld-s-color-default-utility-modifiers-mid); /* Might change this to 20% shade of black, will need to add to colour themes. So this will be changed. */ --ld-c-icon-button-opacity-disabled: var(--ld-s-opacity-disabled); /* 50% opacity for the arrows to indicate disabled state. */ --ld-c-icon-button-default-hover-background: var(--ld-color-lexus-smoke-300); /* Hover colour for the arrow background. */ --ld-c-icon-button-highlight-enabled-background: var(--ld-s-color-utility-modifiers-midlight); --ld-c-icon-button-bare-hover-background: var(--ld-s-color-utility-modifiers-midlight); /* Midlight color for the hover background of the bare variant. */ --ld-c-icon-button-shadow-default-type: var(--ld-s-box-shadow-less-type); --ld-c-icon-button-shadow-default-spread: var(--ld-s-box-shadow-less-spread); --ld-c-icon-button-shadow-default-blur: var(--ld-s-box-shadow-less-blur); --ld-c-icon-button-shadow-default-y: var(--ld-s-box-shadow-less-y); --ld-c-icon-button-shadow-default-x: var(--ld-s-box-shadow-less-x); --ld-c-icon-button-default-color: var(--ld-s-color-default-common-black); /* Colour of the chevron icon. */ --ld-c-icon-button-default-enabled-background: var(--ld-s-color-alt-common-white); /* Default colour for the arrow. */ --ld-c-icon-button-highlight-color: var(--ld-s-color-foreground-default); /* Color for the icon in the higlight variant. */ --ld-c-icon-button-subtle-color: var(--ld-s-color-foreground-default); /* Color for the icon in the subtle icon-button variant. */ --ld-c-icon-button-subtle-hover-color: var(--ld-s-color-accent-primary-default); --ld-c-icon-button-subtle-default-color: var(--ld-s-color-accent-primary-opacity-default-lighter); --ld-c-icon-button-bare-color: var(--ld-s-color-foreground-default); /* Color of the icon for the bare variant of the icon-button. */ --ld-c-icon-button-shadow-default-color: var(--ld-s-box-shadow-less-color); --ld-c-icon-button-focus-offset: var(--ld-s-dim-static-4xs); /* Offset value for the focus border padding. */ --ld-c-icon-button-border: 1px solid var(--ld-s-color-elevation-inset-darker); /* Border values for the arrow. Elevation inset colour to make border darker than the canvas background and the arrow background. */ --ld-c-icon-button-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* Focus outline values for the arrow. */ --ld-c-icon-button-padding-small: var(--ld-s-dim-static-3xs); /* Padding for around the icon to create smaller sized icon-buttons, all variant style types but bare. */ --ld-c-icon-button-padding-default: var(--ld-s-dim-static-2xs); /* Padding for around the icon to create bigger sized icon-buttons, all variant style types but bare. */ --ld-c-icon-button-icon-size: var(--ld-s-dim-static-xs); /* 16px size value for the icon. */ --ld-c-icon-button-size: var(--ld-s-dim-static-l); /* 40px fixed size value for icon-button. This can be deprecated from May 2025. */ } .lk_ldIconTooltip_hy1H0aGi, .lk_tooltipWithIcon_Jawc3CB8 { --ld-c-icon-tooltip-clickable-area: 44px; --ld-c-icon-tooltip-shadow-default-type: dropShadow; --ld-c-icon-tooltip-shadow-default-spread: 0; --ld-c-icon-tooltip-shadow-default-blur: 8px; --ld-c-icon-tooltip-shadow-default-y: 1px; --ld-c-icon-tooltip-shadow-default-x: 0; --ld-c-icon-tooltip-icon-accent: var(--ld-color-core-white); /* Colour for icon – to allow theme switching. */ --ld-c-icon-tooltip-icon-default: var(--ld-color-core-black); /* Colour for icon – to allow theme switching. */ --ld-c-icon-tooltip-shadow-default-color: var(--ld-s-color-default-common-black); --ld-c-icon-tooltip-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* Focus outline for the icon in the icon tooltip. */ --ld-c-icon-tooltip-icon-size: var(--ld-s-dim-static-xs); /* 16px square for the i icon used on this icon tooltip component. */ } .lk_tooltipWithIcon_Jawc3CB8 button.lk_toolTipTrigger_V8nSqLJ5 { width: auto; height: auto; color: var(--ld-c-icon-tooltip-icon-default); } .lk_tooltipWithIcon_Jawc3CB8 button.lk_iconColorAccent_PIpTRAjL { color: var(--ld-c-icon-tooltip-icon-accent); } .lk_tooltipWithIcon_Jawc3CB8 .lk_clickableArea_YDMDfJc9 { cursor: pointer; width: var(--ld-c-icon-tooltip-clickable-area); height: var(--ld-c-icon-tooltip-clickable-area); border-radius: 50%; position: relative; } .lk_tooltipWithIcon_Jawc3CB8 .lk_clickableArea_YDMDfJc9 button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .lk_isShadow_NMmEiYY2 svg { filter: drop-shadow(0px var(--ld-c-icon-tooltip-shadow-default-y, 1px) var(--ld-c-icon-tooltip-shadow-default-blur, 8px) var(--ld-c-icon-tooltip-shadow-default-color)); } .lk_hiddenButton_PP3Ti_YX { opacity: 0; position: absolute; pointer-events: none; } .lk_focusCatcher_ZM9q_8Gq { opacity: 0; position: absolute; pointer-events: none; } .lk_ldTopBanner_bPke82Kb, .lk_topBanner_iyjFG6Be { --ld-c-top-banner-fg: var(--ld-s-color-foreground-on-accent); /* Text colour for the top-banner. */ --ld-c-top-banner-bg: var(--ld-s-color-accent-primary-default); /* Background of the top-banner. */ } .lk_topBanner_iyjFG6Be { display: flex; justify-content: center; align-items: center; background-color: var(--ld-c-top-banner-bg); color: var(--ld-c-top-banner-fg); } .lk_showForSmall_JfP2Ocff { display: none; /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_showForSmall_JfP2Ocff { display: contents; } } .lk_showForLarge_n38T4Bp7 { display: none; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_showForLarge_n38T4Bp7 { display: contents; } } .lk_isContents_X3n0pl9h { display: contents; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_primaryNav_B_KOruYZ { --primary-nav-navbar-z-index: 2; --primary-nav-modal-z-index: 3; /*stylelint cant read interpolated values so thinks this is an error */ --primary-nav-navbar-height: 68px; --primary-nav-container-shadow-height: calc(100% + 124px - var(--primary-nav-navbar-height)); --primary-nav-top-dynamic: 0; --primary-nav-bottom-dynamic: var(--primary-nav-navbar-height); --primary-navbar-item-senkei-transition-duration: 0.3s; --primary-navbar-item-label-transition-duration: 0.3s; --primary-navbar-item-fill-transition-duration: 0.3s; --primary-nav-navbar-item-regular-padding-horizontal: clamp(8px, -11.6923076923px + 1.9230769231vw, 16px); --primary-nav-navbar-item-regular-padding-horizontal-last: clamp(24px, -15.3846153846px + 3.8461538462vw, 40px); --primary-nav-navbar-item-authenticated-label-background: #d9d9d9; --primary-nav-navbar-logo-padding: 24px; --primary-nav-navbar-logo-focus-padding: -15px; --primary-nav-tg-navbar-item-regular-font-size: 12px; --primary-nav-tg-navbar-item-regular-line-height: 12px; --primary-nav-tg-navbar-item-regular-letter-spacing: 1.44px; --primary-nav-tg-navbar-item-regular-text-transform: uppercase; --primary-nav-tg-navbar-item-regular-font-weight: 400; --primary-nav-tg-navbar-item-special-font-size: 12px; --primary-nav-tg-navbar-item-special-line-height: 16px; --primary-nav-tg-navbar-item-special-letter-spacing: 1px; --primary-nav-tg-navbar-item-special-text-transform: uppercase; --primary-nav-tg-navbar-item-special-font-weight: 400; --primary-nav-tg-static-link-font-size: 12px; --primary-nav-tg-static-link-line-height: 12px; --primary-nav-tg-static-link-letter-spacing: 1.44px; --primary-nav-tg-static-link-text-transform: uppercase; --primary-nav-tg-item-font-size: 23px; --primary-nav-tg-item-line-height: 26.45px; --primary-nav-tg-item-font-weight: 300; /*stylelint cant read interpolated values so thinks this is an error */ --primary-nav-modal-transition-duration: 0.3s; --primary-nav-modal-content-transition-duration: 0.3s; --primary-nav-modal-container-padding: 24px; /*stylelint cant read interpolated values so thinks this is an error */ --primary-nav-desktop-layout-padding-top: 120px; --primary-nav-desktop-layout-level-1-body-footer-spacing: 40px; --primary-nav-desktop-layout-level-2-padding: var(--primary-nav-desktop-layout-padding-top) 80px; --primary-nav-mobile-page-padding-top: 120px; --primary-nav-mobile-page-level-2-header-padding-bottom: 40px; --primary-nav-mobile-page-level-2-footer-and-children-padding-top: 40px; --primary-nav-mobile-page-level-2-children-footer-spacing: 40px; --primary-nav-mobile-items-container-padding: 40px; --primary-nav-items-spacing-between: 40px; --primary-nav-footer-padding: 40px; --primary-nav-modal-dealer-details-visible-max-height: 1650px; /*stylelint cant read interpolated values so thinks this is an error */ --primary-nav-navbar-item-special-max-width: 89px; --primary-nav-navbar-item-special-background-transition: background var(--primary-navbar-item-fill-transition-duration) ease-in-out, color var(--primary-navbar-item-fill-transition-duration) ease-in-out; --primary-nav-navbar-item-special-background-hover: var(--ld-color-legacy-deepblue-light); --primary-nav-navbar-item-special-background-active: var(--ld-color-legacy-smoke-lightest); --primary-nav-navbar-item-special-border-left: 1px solid var(--ld-color-legacy-lexus-brand-white); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_primaryNav_B_KOruYZ { --primary-nav-modal-z-index: 1; } } @media (min-width: 1024px) { .lk_primaryNav_B_KOruYZ { --primary-nav-tg-item-font-size: 26px; --primary-nav-tg-item-line-height: 29.9px; } } @media (min-width: 1024px) { .lk_primaryNav_B_KOruYZ { --primary-nav-modal-container-padding: clamp(40px, -58.4548819768px + 9.6149223595vw, 80px); } } @media (min-width: 1024px) { .lk_primaryNav_B_KOruYZ { --primary-nav-footer-padding: var(--primary-nav-modal-container-padding); } } @media (min-width: 1024px) { .lk_primaryNav_B_KOruYZ { position: relative; z-index: 1; } } .lk_navbarWrapper_SNXc9oRe { position: relative; z-index: var(--primary-nav-navbar-z-index); } .lk_logo_BPWiaw48 { display: flex; height: 100%; align-items: center; line-height: 0; } .lk_logo_BPWiaw48 svg { max-width: 100%; height: auto; } .lk_logo_BPWiaw48 .lk_logoLink_cmPBDXiu img { width: 100%; } .lk_modal_RaxdXNle { --primary-nav-modal-display: flex; --primary-nav-modal-padding-top: 0; --primary-nav-modal-height: 100vh; /*stylelint cant read interpolated values so thinks this is an error */ position: absolute; z-index: var(--primary-nav-modal-z-index); display: none; flex-direction: column; border-top: var(--primary-nav-modal-padding-top) solid var(--ld-color-legacy-deepblue-dark); top: 0; left: 0; right: 0; height: var(--primary-nav-modal-height); background-color: var(--ld-color-legacy-deepblue-dark); color: var(--ld-color-legacy-lexus-brand-white); } @media (min-width: 1024px) { .lk_modal_RaxdXNle { --primary-nav-modal-padding-top: var(--primary-nav-navbar-height); --primary-nav-modal-height: calc(100vh - var(--primary-nav-top-dynamic)); } } .lk_modalOpenCloseEnter_xSgesmam { opacity: 0; /*stylelint cant read interpolated values so thinks this is an error */ display: var(--primary-nav-modal-display); } @media (max-width: 1023.98px) { .lk_modalOpenCloseEnter_xSgesmam { transform: translateX(50px); } } .lk_modalOpenCloseEnterActive_IXDjBK2k { transition: opacity var(--primary-nav-modal-transition-duration) ease-in-out, transform var(--primary-nav-modal-transition-duration) ease-out; opacity: 1; transform: translateX(0); display: var(--primary-nav-modal-display); } .lk_modalOpenCloseEnterDone_LCUgd0Yr { display: var(--primary-nav-modal-display); } .lk_modalOpenCloseExit__KxyQc1a { opacity: 1; display: var(--primary-nav-modal-display); } .lk_modalOpenCloseExitActive_YqGuwzh6 { transition: opacity var(--primary-nav-modal-transition-duration) ease-in-out; opacity: 0; } .lk_modalOpenCloseExitDone_R86Eh9jt { display: none; } .lk_closeButtonContainer_mlY8zoYQ { position: fixed; z-index: 1; } .lk_allModalsContentScrollContainer_wDQhsjeV { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; overflow-y: auto; display: flex; flex-direction: column; } .lk_allModalsContent_CaVGOCC6 { flex-grow: 1; display: flex; flex-direction: row; } .lk_modalContent_z_mzFfOl { --primary-nav-modal-content-display: flex; display: none; width: 100%; margin-right: -100%; flex-direction: column; } .lk_modalContentSwitchEnter_HKTpnT1F { opacity: 0; /*stylelint cant read interpolated values so thinks this is an error */ display: var(--primary-nav-modal-content-display); } @media (max-width: 1023.98px) { .lk_modalContentSwitchEnter_HKTpnT1F { transform: translateX(50px); } } .lk_modalContentSwitchEnterActive_GDxIlFPB { transition: opacity var(--primary-nav-modal-content-transition-duration) ease-in-out, transform var(--primary-nav-modal-content-transition-duration) ease-out; opacity: 1; transform: translateX(0); display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchEnterDone_TdtMbMVf { display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchExit_YkESgN8S { opacity: 1; display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchExitActive_FkHJCXeM { transition: opacity var(--primary-nav-modal-content-transition-duration) ease-in-out; opacity: 0; display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchExitDone_AwmcKhXg { display: none; } .lk_modalContentSwitchBackEnter_dJhEidGZ { opacity: 0; display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchBackEnterActive_Gfo9dgxl { transition: opacity var(--primary-nav-modal-content-transition-duration) ease-in-out; opacity: 1; display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchBackEnterDone_lvDd7OxE { display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchBackExit_wal9eQEF { opacity: 1; display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchBackExitActive_yHDeCdJm { transition: opacity var(--primary-nav-modal-content-transition-duration) ease-in-out; opacity: 0; display: var(--primary-nav-modal-content-display); } .lk_modalContentSwitchBackExitDone_Y98CScq2 { display: none; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldBox_MsOfiH1q { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_closeButton_GeMKplgA { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; --primary-nav-close-button-top: 16px; --primary-nav-close-button-icon-size: 45px; --primary-nav-close-button-icon-label-spacing: 8px; position: absolute; top: var(--primary-nav-close-button-top); cursor: pointer; display: flex; width: min-content; align-items: center; z-index: 1; } .lk_closeButton_GeMKplgA:hover { color: inherit; } .lk_closeButtonIcon_NOH4mDR4 { position: relative; z-index: 1; width: var(--primary-nav-close-button-icon-size); height: var(--primary-nav-close-button-icon-size); display: flex; justify-content: center; align-items: center; } .lk_closeButtonIcon_NOH4mDR4::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; background: var(--ld-color-legacy-lexus-brand-white); border-radius: 9999px; } .lk_closeButtonIcon_NOH4mDR4 + .lk_closeButtonLabel_n3gtBH0m { margin-left: var(--primary-nav-close-button-icon-label-spacing); } .lk_closeButtonLabel_n3gtBH0m { font-size: var(--primary-nav-tg-navbar-item-regular-font-size); line-height: var(--primary-nav-tg-navbar-item-regular-line-height); letter-spacing: var(--primary-nav-tg-navbar-item-regular-letter-spacing); text-transform: var(--primary-nav-tg-navbar-item-regular-text-transform); font-weight: var(--primary-nav-tg-navbar-item-regular-font-weight); } .lk_ldChip_KIsALOmV, .lk_chip_nQ0WcTJ9 { --ld-c-chip-opacity-disabled: .5; --ld-c-chip-border-radius-round: var(--ld-s-border-radius-rounded); --ld-c-chip-border-ghost: 1px solid var(--ld-s-color-utility-modifiers-midlight); --ld-c-chip-typography-label-text-case: var(--ld-s-typography-label1-text-case); --ld-c-chip-typography-label-paragraph-spacing: var(--ld-s-typography-label1-paragraph-spacing); --ld-c-chip-typography-label-letter-spacing: var(--ld-s-typography-label1-letter-spacing); --ld-c-chip-typography-label-font-size: var(--ld-s-typography-label1-font-size); --ld-c-chip-typography-label-line-height: var(--ld-s-typography-label1-line-height); --ld-c-chip-typography-label-font-weight: var(--ld-s-typography-label1-font-weight); --ld-c-chip-color-ghost-success-border: var(--ld-s-color-utility-modifiers-midlight); --ld-c-chip-color-ghost-success-fg: var(--ld-s-color-default-foreground-on-accent); --ld-c-chip-color-ghost-hover-bg: var(--ld-s-color-utility-modifiers-midlight); --ld-c-chip-outline-focus: 1px dashed var(--ld-s-color-accent-primary-default); /* Focus outline values for the chip. */ --ld-c-chip-focus-offset: var(--ld-s-dim-static-4xs); /* Offset value for the focus border padding. */ --ld-c-chip-size-icon: var(--ld-s-dim-static-s); --ld-c-chip-small-v-pad: var(--ld-s-dim-static-4xs); --ld-c-chip-small-h-pad: var(--ld-s-dim-static-2xs); --ld-c-chip-small-height: var(--ld-s-dim-static-s); --ld-c-chip-gap: var(--ld-s-dim-static-3xs); --ld-c-chip-large-v-pad: var(--ld-s-dim-static-2xs); --ld-c-chip-large-h-pad: var(--ld-s-dim-static-xs); --ld-c-chip-large-height: var(--ld-s-dim-static-l); --ld-c-chip-typography-label-font-family: var(--ld-s-typography-label1-font-family); --ld-c-chip-color-ghost-default-border: var(--ld-s-color-accent-primary-disabled); --ld-c-chip-color-ghost-default-fg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-ghost-disabled-border: var(--ld-s-color-accent-primary-disabled); --ld-c-chip-color-ghost-disabled-fg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-ghost-selected-bg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-ghost-selected-fg: var(--ld-s-color-foreground-on-accent); --ld-c-chip-color-ghost-hover-fg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-ghost-enabled-border: var(--ld-s-color-accent-primary-disabled); --ld-c-chip-color-ghost-enabled-fg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-solid-default-bg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-solid-default-fg: var(--ld-s-color-foreground-on-accent); --ld-c-chip-color-solid-disabled-bg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-solid-disabled-fg: var(--ld-s-color-foreground-on-accent); --ld-c-chip-color-solid-selected-bg: var(--ld-s-color-elevation-raised-default); --ld-c-chip-color-solid-selected-fg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-solid-hover-bg: var(--ld-s-color-accent-primary-lighter); --ld-c-chip-color-solid-hover-fg: var(--ld-s-color-foreground-on-accent); --ld-c-chip-color-solid-enabled-bg: var(--ld-s-color-accent-primary-default); --ld-c-chip-color-solid-enabled-fg: var(--ld-s-color-foreground-on-accent); --ld-c-chip-color-ghost-success-bg: var(--ld-s-color-utility-success-default); } .lk_chip_nQ0WcTJ9 { display: inline-flex; align-items: center; } .lk_fullWidth_vK1vp8Uc { display: flex; width: 100%; } .lk_solid_eWsAyaJG.lk_interactive_NGUspK1j[disabled], .lk_ghost_voQeazzy.lk_interactive_NGUspK1j[disabled] { opacity: var(--ld-c-chip-opacity-disabled); } .lk_solid_eWsAyaJG.lk_success_I_EXWLWt, .lk_ghost_voQeazzy.lk_success_I_EXWLWt { --lk-private-border-color: transparent; color: var(--ld-c-chip-color-ghost-success-fg); background: var(--ld-c-chip-color-ghost-success-bg); } .lk_solid_eWsAyaJG { background-color: var(--ld-c-chip-color-solid-enabled-bg); color: var(--ld-c-chip-color-solid-enabled-fg); } .lk_solid_eWsAyaJG.lk_interactive_NGUspK1j:not([disabled]):hover { background-color: var(--ld-c-chip-color-solid-hover-bg); color: var(--ld-c-chip-color-solid-enabled-fg); } .lk_solid_eWsAyaJG.lk_interactive_NGUspK1j:not([disabled]).lk_selected_RMOh9YR6 { background-color: var(--ld-c-chip-color-solid-selected-bg); color: var(--ld-c-chip-color-solid-selected-fg); } .lk_ghost_voQeazzy { --lk-private-border-color: var(--ld-c-chip-color-ghost-enabled-border); background-color: transparent; border: 1px solid var(--lk-private-border-color); color: var(--ld-c-chip-color-ghost-enabled-fg); } .lk_ghost_voQeazzy.lk_interactive_NGUspK1j:not([disabled]):hover, .lk_ghost_voQeazzy.lk_interactive_NGUspK1j:not([disabled]).lk_selected_RMOh9YR6 { --lk-private-border-color: transparent; } .lk_ghost_voQeazzy.lk_interactive_NGUspK1j:not([disabled]):hover { color: var(--ld-c-chip-color-ghost-hover-fg); background-color: var(--ld-c-chip-color-ghost-hover-bg); } .lk_ghost_voQeazzy.lk_interactive_NGUspK1j:not([disabled]).lk_selected_RMOh9YR6 { background-color: var(--ld-c-chip-color-ghost-selected-bg); color: var(--ld-c-chip-color-ghost-selected-fg); } .lk_large_JjMtXYSm { height: var(--ld-c-chip-large-height); padding: var(--ld-c-chip-large-v-pad) var(--ld-c-chip-large-h-pad); } .lk_small_KHQEvWiE { height: var(--ld-c-chip-small-height); padding: var(--ld-c-chip-small-v-pad) var(--ld-c-chip-small-h-pad); } .lk_truncateText_NhmJPDFI { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk_icon_4lSJgqw3 { display: flex; width: 16px; height: 16px; } .lk_icon_4lSJgqw3 svg { height: inherit; width: inherit; } .lk_clickable_oBwBUGQJ:not([disabled]) { cursor: pointer; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_primaryNavContainer_GQaJlA6w { --primary-nav-container-shadow-height: calc(100% + 56px); position: absolute; top: 0; left: 0; right: 0; z-index: var(--lk-primary-nav-z-index); color: var(--ld-color-legacy-lexus-brand-white); } .lk_primaryNavContainer_GQaJlA6w.lk_isSolidBackground_IMK_eMhC { background-color: var(--ld-color-legacy-deepblue-darkest); } .lk_primaryNavContainer_GQaJlA6w.lk_isFixedAtTop_Rfc6vplj { position: fixed; left: 0; right: 0; } .lk_primaryNavContainer_GQaJlA6w.lk_isSolidContainer_Q27_7i1A { position: relative; } .lk_primaryNavContainer_GQaJlA6w.lk_isFixedAtTop_Rfc6vplj.lk_isSolidContainer_Q27_7i1A { position: sticky; } .lk_navbarShadow_HTXBN4Ar { position: absolute; z-index: -1; display: block; top: 0; left: 0; right: 0; height: var(--primary-nav-container-shadow-height); pointer-events: none; background: var(--ld-color-legacy-lexus-brand-black); mask-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.002) 98.2%, rgba(0, 0, 0, 0)); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_navbarItems_e1VHNhS2 { --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; display: flex; flex-direction: row; align-items: stretch; position: relative; padding-right: calc(var(--primary-nav-navbar-item-regular-padding-horizontal-last) - var(--primary-nav-navbar-item-regular-padding-horizontal)); } .lk_navbarItems_e1VHNhS2:hover .lk_label_nVftsoo0 { opacity: 0.7; } .lk_navbarItem_GqORN6N1 { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; color: var(--ld-color-legacy-lexus-brand-white); position: relative; cursor: pointer; padding-left: var(--primary-nav-navbar-item-regular-padding-horizontal); padding-right: var(--primary-nav-navbar-item-regular-padding-horizontal); font-size: var(--primary-nav-tg-navbar-item-regular-font-size); line-height: var(--primary-nav-tg-navbar-item-regular-line-height); letter-spacing: var(--primary-nav-tg-navbar-item-regular-letter-spacing); text-transform: var(--primary-nav-tg-navbar-item-regular-text-transform); font-weight: var(--primary-nav-tg-navbar-item-regular-font-weight); text-align: center; } .lk_navbarItem_GqORN6N1:hover { color: inherit; } .lk_navbarItem_GqORN6N1::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 12px; border-bottom: var(--ornaments-senkei-default-line-size) solid var(--ornaments-senkei-border-color); opacity: 0; transition: opacity var(--primary-navbar-item-senkei-transition-duration) ease-in-out, width var(--primary-navbar-item-senkei-transition-duration) ease-in-out; } .lk_navbarItem_GqORN6N1 .lk_label_nVftsoo0 { color: var(--ld-color-legacy-lexus-brand-white); transition: opacity var(--primary-navbar-item-label-transition-duration) ease-in-out; } .lk_navbarItem_GqORN6N1.lk_isActive_wSzQNXki .lk_label_nVftsoo0, .lk_navbarItem_GqORN6N1:hover .lk_label_nVftsoo0, .lk_navbarItem_GqORN6N1.lk_navbarItemHovered_Ru5uYcrz .lk_label_nVftsoo0 { opacity: 1; } .lk_navbarItem_GqORN6N1.lk_isActive_wSzQNXki::after, .lk_navbarItem_GqORN6N1:hover::after, .lk_navbarItem_GqORN6N1.lk_navbarItemHovered_Ru5uYcrz::after { opacity: 1; } .lk_navbarItem_GqORN6N1.lk_isActive_wSzQNXki::after { width: calc(100% - 2 * var(--primary-nav-navbar-item-regular-padding-horizontal)); } .lk_quickBookButton_vmZbOKLu { align-self: center; padding: var(--primary-nav-navbar-item-regular-padding-horizontal); } .lk_scrollSvgCircle_gSpCoF_F { animation-name: lk_scroll_DZuP73HE; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform, opacity; opacity: 1; } @keyframes lk_scroll_DZuP73HE { 0%, 20% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(36px) scaleY(2); opacity: 0; } } .lk_scrollIndicator_utlcTAxs { --scroll-indicator-transition-duration: 0.3s; width: 290px; height: 129px; position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(0%); z-index: 3; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity var(--scroll-indicator-transition-duration) ease-in-out; transition-delay: var(--scroll-indicator-transition-duration); pointer-events: none; } .lk_scrollShow_AK2WMnqM { opacity: 1; pointer-events: initial; } .lk_scrollGradient_ZvOvGPNR { position: absolute; opacity: 0; transition: opacity 1s ease-out; display: inline-block; width: 100%; height: 100%; background: var(--ld-color-legacy-senkei-inari); mask-image: radial-gradient(circle at 50% 50%, rgb(0, 0, 0) -23%, rgba(0, 0, 0, 0) 43%); z-index: -1; } .lk_scrollLink_yKcJpceA { --scroll-indicator-padding: 8px; padding: var(--scroll-indicator-padding); display: flex; cursor: pointer; } @media (hover: hover) { .lk_scrollLink_yKcJpceA:hover + .lk_scrollGradient_ZvOvGPNR { opacity: 1; } } .lk_scrollLink_yKcJpceA span { /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_scrollLink_yKcJpceA span { display: none; } } .lk_swipeIcon_cNH857QF { display: none; color: var(--ld-color-legacy-lexus-brand-white); font-size: 13px; /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_swipeIcon_cNH857QF { display: flex; align-items: center; gap: 4px; } .lk_swipeIcon_cNH857QF ~ svg { display: none; } } .lk_map_qfVRJrS3 { background-color: var(--ld-color-legacy-deepblue-dark); } .lk_container_FuO7cEK4 { --dealer-map-container-height: 426px; --dealer-map-container-desktop-height: 360px; position: relative; min-height: var(--dealer-map-container-height); width: 100%; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_container_FuO7cEK4 { min-height: var(--dealer-map-container-desktop-height); } } .lk_mapMarkerNumber_TYzDG4em { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); display: block; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_dealerLocation_X94NnmRD { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--dealer-location-gap); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_dealerLocation_X94NnmRD { flex-direction: row; } } .lk_dealerLocationBranch_nGW23CRX { min-width: 320px; } .lk_dealerLocationBranch_nGW23CRX:not(:only-child) { flex: 1 1 0; } .lk_dealerLocationBranch_nGW23CRX:not(:first-of-type) { padding-top: var(--dealer-location-padding-top); } @keyframes lk_fade-in_d6586leD { from { opacity: 0; } to { opacity: 1; } } /* stylelint-disable selector-class-pattern */ :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs_fwq1KVIn { -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; -ms-tap-highlight-color: transparent; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab-list_BmJWcqf9 { padding-bottom: 24px; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab-list_BmJWcqf9 * { font-size: 22px; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab_JO5nf7A_ { display: inline-block; cursor: pointer; padding-right: 8px; margin-right: 0.5rem; color: var(--ld-color-legacy-smoke-default); opacity: 0.25; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab_JO5nf7A_:not(:last-child) { position: relative; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab_JO5nf7A_:not(:last-child)::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: auto; border-right: var(--ld-color-legacy-smoke-default) 1px solid; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab--selected_NXkM6gup { opacity: 1; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab--selected_NXkM6gup::before { opacity: 0.25; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab--disabled_DVsEiUmG { cursor: default; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab_JO5nf7A_:focus { outline: none; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab_JO5nf7A_:focus::after { content: ""; position: absolute; height: 5px; left: -4px; right: -4px; bottom: -5px; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab-panel_GCVYjsh5 { display: none; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab-panel--selected_l6wqCaRj { display: block; } :where(.lk_lkStylesScope_aZoMbOtY) .lk_react-tabs__tab-panel--selected--transition_CQreCa5U { animation-name: lk_fade-in_d6586leD; animation-duration: 300ms; animation-timing-function: linear; } /* stylelint-enable selector-class-pattern */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_dealerBranchTitle_g40m_IAJ { display: flex; flex-direction: row; } .lk_dealerBranchTitleText_uEdu8vFD { display: flex; flex-direction: column; } .lk_dealerBranchTitleText_uEdu8vFD .lk_dealerBranchTabTitle_JonVKbRm[id^=react-tabs] { text-transform: capitalize; position: relative; opacity: 0.25; color: var(--ld-color-legacy-smoke-default); display: inline-block; } .lk_dealerBranchTitleText_uEdu8vFD .lk_dealerBranchTabTitle_JonVKbRm[id^=react-tabs]:not(:last-child) { /* stylelint-disable csstools/value-no-unknown-custom-properties */ padding-right: var(--dealer-contact-tile-tab-gap); margin-right: var(--dealer-contact-tile-tab-gap); /* stylelint-enable csstools/value-no-unknown-custom-properties */ } .lk_dealerBranchTitleText_uEdu8vFD .lk_dealerBranchTabTitle_JonVKbRm[id^=react-tabs]:not(:last-child)::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: auto; border-right: var(--ld-color-legacy-smoke-default) 1px solid; opacity: 1; } .lk_dealerBranchTitleText_uEdu8vFD .lk_dealerBranchTabTitleSelected_Ggug8baW[id^=react-tabs] { opacity: 1; color: var(--ld-color-legacy-smoke-default); border-right: unset !important; } .lk_dealerBranchTitleText_uEdu8vFD .lk_dealerBranchTabTitleSelected_Ggug8baW[id^=react-tabs]:not(:last-child)::before { opacity: 0.25; } .lk_dealerBranchLocationName_OKBtIj5e { font-size: var(--dealer-branch-location-name-font-size); line-height: var(--dealer-branch-location-name-line-height); letter-spacing: var(--dealer-branch-location-name-letter-spacing); text-transform: var(--dealer-branch-location-name-text-transform); /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ padding-bottom: var(--dealer-branch-location-name-spacing-bottom); } .lk_dealerBranchLocationPinIcon_JMhX6jCs { fill: var(--ld-color-legacy-lexus-brand-white); display: block; /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ padding-right: var(--dealer-branch-location-pin-spacing-right); } .lk_dealerBranchLocationPinIconContainer_nn3f5ap0 { display: inline-block; position: relative; } .lk_dealerBranchLocationPinIconNumber_SpyJusdS { position: absolute; top: var(--dealer-branch-location-pin-icon-position-top); left: var(--dealer-branch-location-pin-icon-position-left); font-size: var(--dealer-branch-location-pin-icon-font-size); line-height: var(--dealer-branch-location-pin-icon-line-height); color: var(--ld-color-legacy-deepblue-darkest); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldIcon_B1MBAutv, .lk_button_YGgjYcEm { --ld-icon-sizing-more: var(--ld-s-dim-d-5); --ld-icon-sizing-default: var(--ld-s-dim-d-4); --ld-icon-sizing-less: var(--ld-s-dim-d-3); } .lk_ldButton_QxpE1Tdz, .lk_button_YGgjYcEm { --ld-c-button-box-shadow-hero-secondary-pressed-type: inset; --ld-c-button-box-shadow-hero-secondary-pressed-spread: 2px; --ld-c-button-box-shadow-hero-secondary-pressed-blur: 0; --ld-c-button-box-shadow-hero-secondary-pressed-y: 0; --ld-c-button-box-shadow-hero-secondary-pressed-x: 0; --ld-c-button-box-shadow-hero-secondary-hover-type: inset; --ld-c-button-box-shadow-hero-secondary-hover-spread: 2px; --ld-c-button-box-shadow-hero-secondary-hover-blur: 0; --ld-c-button-box-shadow-hero-secondary-hover-y: 0; --ld-c-button-box-shadow-hero-secondary-hover-x: 0; --ld-c-button-box-shadow-hero-secondary-enabled-type: inset; --ld-c-button-box-shadow-hero-secondary-enabled-spread: 2px; --ld-c-button-box-shadow-hero-secondary-enabled-blur: 0; --ld-c-button-box-shadow-hero-secondary-enabled-y: 0; --ld-c-button-box-shadow-hero-secondary-enabled-x: 0; --ld-c-button-box-shadow-hero-primary-pressed-color: none; --ld-c-button-box-shadow-hero-primary-pressed-type: inset; --ld-c-button-box-shadow-hero-primary-pressed-spread: 0; --ld-c-button-box-shadow-hero-primary-pressed-blur: 0; --ld-c-button-box-shadow-hero-primary-pressed-y: 0; --ld-c-button-box-shadow-hero-primary-pressed-x: 0; --ld-c-button-box-shadow-hero-primary-hover-type: inset; --ld-c-button-box-shadow-hero-primary-hover-spread: 2px; --ld-c-button-box-shadow-hero-primary-hover-blur: 0; --ld-c-button-box-shadow-hero-primary-hover-y: 0; --ld-c-button-box-shadow-hero-primary-hover-x: 0; --ld-c-button-box-shadow-hero-primary-enabled-color: none; --ld-c-button-box-shadow-hero-primary-enabled-type: inset; --ld-c-button-box-shadow-hero-primary-enabled-spread: 0; --ld-c-button-box-shadow-hero-primary-enabled-blur: 0; --ld-c-button-box-shadow-hero-primary-enabled-y: 0; --ld-c-button-box-shadow-hero-primary-enabled-x: 0; --ld-c-button-box-shadow-secondary-pressed-type: inset; --ld-c-button-box-shadow-secondary-pressed-spread: 2px; --ld-c-button-box-shadow-secondary-pressed-blur: 0; --ld-c-button-box-shadow-secondary-pressed-y: 0; --ld-c-button-box-shadow-secondary-pressed-x: 0; --ld-c-button-box-shadow-secondary-hover-type: inset; --ld-c-button-box-shadow-secondary-hover-spread: 2px; --ld-c-button-box-shadow-secondary-hover-blur: 0; --ld-c-button-box-shadow-secondary-hover-y: 0; --ld-c-button-box-shadow-secondary-hover-x: 0; --ld-c-button-box-shadow-secondary-enabled-type: inset; --ld-c-button-box-shadow-secondary-enabled-spread: 2px; --ld-c-button-box-shadow-secondary-enabled-blur: 0; --ld-c-button-box-shadow-secondary-enabled-y: 0; --ld-c-button-box-shadow-secondary-enabled-x: 0; --ld-c-button-box-shadow-primary-pressed-type: inset; --ld-c-button-box-shadow-primary-pressed-spread: 0; --ld-c-button-box-shadow-primary-pressed-blur: 0; --ld-c-button-box-shadow-primary-pressed-y: 0; --ld-c-button-box-shadow-primary-pressed-x: 0; --ld-c-button-box-shadow-primary-hover-type: inset; --ld-c-button-box-shadow-primary-hover-spread: 2px; --ld-c-button-box-shadow-primary-hover-blur: 0; --ld-c-button-box-shadow-primary-hover-y: 0; --ld-c-button-box-shadow-primary-hover-x: 0; --ld-c-button-box-shadow-primary-enabled-type: inset; --ld-c-button-box-shadow-primary-enabled-spread: 2px; --ld-c-button-box-shadow-primary-enabled-blur: 0; --ld-c-button-box-shadow-primary-enabled-y: 0; --ld-c-button-box-shadow-primary-enabled-x: 0; --ld-c-button-hero-secondary-enabled-bg: none; --ld-c-button-hero-secondary-disabled-label: #E8E6E0; /* Label and icon text colour for the hero-primary button variant. */ --ld-c-button-hero-secondary-label: #E8E6E0; /* Label and icon text colour for the hero-primary button variant. */ --ld-c-button-hero-secondary-hover-bg: none; --ld-c-button-hero-primary-disabled-label: #E8E6E0; /* Label and icon text colour for the hero-primary button variant. */ --ld-c-button-hero-primary-label: #E8E6E0; /* Label and icon text colour for the hero-primary button variant. */ --ld-c-button-secondary-disabled-bg: none; --ld-c-button-secondary-enabled-bg: none; --ld-c-button-secondary-pressed-bg: none; --ld-c-button-secondary-hover-bg: none; --ld-c-button-opacity-highlight: 0.3; /* Opacity of overall highlight gradient used for hover states. */ --ld-c-button-opacity-hero-outlines-pressed: 0.2; /* Opacity for the hero primary and secondary button outlines. */ --ld-c-button-opacity-hero-outlines-default: 0.1; /* Opacity for the hero primary and secondary button outlines and primary bg colours. */ --ld-c-button-opacity-disabled: 0.5; /* Disabled opacity */ --ld-button-hero-secondary-small-height: 40px; --ld-button-hero-secondary-small-border-width: 2px; --ld-button-hero-secondary-small-vertical-padding: 12px; --ld-button-hero-secondary-small-horizontal-padding: 16px; --ld-button-hero-secondary-large-height: 48px; --ld-button-hero-secondary-large-border-width: 2px; --ld-button-hero-secondary-large-vertical-padding: 16px; --ld-button-hero-secondary-large-horizontal-padding: 16px; --ld-button-hero-small-height: 40px; --ld-button-hero-small-border-width: 2px; --ld-button-hero-small-vertical-padding: 12px; --ld-button-hero-small-horizontal-padding: 16px; --ld-button-hero-large-height: 48px; --ld-button-hero-large-border-width: 2px; --ld-button-hero-large-vertical-padding: 16px; --ld-button-hero-large-horizontal-padding: 16px; --ld-button-tertiary-small-height: 40px; --ld-button-tertiary-small-border-width: 2px; --ld-button-tertiary-small-vertical-padding: 12px; --ld-button-tertiary-small-horizontal-padding: 16px; --ld-button-tertiary-large-height: 48px; --ld-button-tertiary-large-border-width: 2px; --ld-button-tertiary-large-vertical-padding: 16px; --ld-button-tertiary-large-horizontal-padding: 16px; --ld-button-secondary-small-height: 40px; --ld-button-secondary-small-border-width: 2px; --ld-button-secondary-small-vertical-padding: 12px; --ld-button-secondary-small-horizontal-padding: 16px; --ld-button-secondary-large-height: 48px; --ld-button-secondary-large-border-width: 2px; --ld-button-secondary-large-vertical-padding: 16px; --ld-button-secondary-large-horizontal-padding: 16px; --ld-button-alt-color-tertiary-disabled-border: none; --ld-button-alt-color-tertiary-disabled-background: none; --ld-button-alt-color-tertiary-pressed-border: none; --ld-button-alt-color-tertiary-hover-highlight: none; --ld-button-alt-color-tertiary-hover-border: none; --ld-button-alt-color-tertiary-enabled-border: none; --ld-button-alt-color-secondary-disabled-background: none; --ld-button-alt-color-secondary-pressed-background: none; --ld-button-alt-color-secondary-hover-highlight: rgba(236,234,228,0.3); --ld-button-alt-color-secondary-hover-background: none; --ld-button-alt-color-secondary-enabled-background: none; --ld-button-alt-color-primary-hover-highlight: rgba(29,31,42,0.3); --ld-button-semitransparent: 0.1; --ld-button-disabled: 0.5; --ld-button-item-spacing-default: 8px; --ld-button-primary-small-height: 40px; --ld-button-primary-small-border-width: 2px; --ld-button-primary-small-vertical-padding: 12px; --ld-button-primary-small-horizontal-padding: 16px; --ld-button-primary-large-height: 48px; --ld-button-primary-large-border-width: 2px; --ld-button-primary-large-vertical-padding: 16px; --ld-button-primary-large-horizontal-padding: 16px; --ld-button-default-color-hero-secondary-pressed-border: rgba(255,255,255,0.1); --ld-button-default-color-hero-secondary-pressed-background: rgba(227,224,216,0.2); --ld-button-default-color-hero-secondary-hover-highlight: rgba(255,255,255,0.2); --ld-button-default-color-hero-secondary-hover-border: rgba(255,255,255,0.1); --ld-button-default-color-hero-secondary-hover-background: none; --ld-button-default-color-hero-secondary-enabled-border: rgba(255,255,255,0.1); --ld-button-default-color-hero-secondary-enabled-background: none; --ld-button-default-color-hero-hover-highlight: rgba(255,255,255,0.2); --ld-button-default-color-hero-hover-border: none; --ld-button-default-color-hero-hover-background: rgba(255,255,255,0.1); --ld-button-default-color-hero-pressed-border: none; --ld-button-default-color-hero-pressed-background: rgba(255,255,255,0.2); --ld-button-default-color-hero-enabled-border: none; --ld-button-default-color-hero-enabled-background: rgba(255,255,255,0.1); --ld-button-default-color-tertiary-disabled-border: none; --ld-button-default-color-tertiary-disabled-background: none; --ld-button-default-color-tertiary-pressed-border: none; --ld-button-default-color-tertiary-hover-highlight: none; --ld-button-default-color-tertiary-hover-border: none; --ld-button-default-color-tertiary-enabled-border: none; --ld-button-default-color-secondary-disabled-background: none; --ld-button-default-color-secondary-pressed-background: none; --ld-button-default-color-secondary-hover-highlight: rgba(26,28,38,0.3); --ld-button-default-color-secondary-hover-background: none; --ld-button-default-color-secondary-enabled-background: none; --ld-button-default-color-primary-hover-highlight: rgba(242,240,236,0.3); --ld-c-button-min-w: var(--ld-s-min-w-more); --ld-button-hero-secondary-small-border-radius: var(--ld-prim-b-r-sm); --ld-button-hero-secondary-large-border-radius: var(--ld-prim-b-r-sm); --ld-button-hero-small-border-radius: var(--ld-prim-b-r-sm); --ld-button-hero-large-border-radius: var(--ld-prim-b-r-sm); --ld-button-tertiary-small-border-radius: var(--ld-prim-b-r-sm); --ld-button-tertiary-large-border-radius: var(--ld-prim-b-r-sm); --ld-button-secondary-small-border-radius: var(--ld-prim-b-r-sm); --ld-button-secondary-large-border-radius: var(--ld-prim-b-r-sm); --ld-button-text-decoration-tertiary: var(--ld-text-decoration-underline); --ld-button-primary-small-border-radius: var(--ld-prim-b-r-sm); --ld-button-primary-large-border-radius: var(--ld-prim-b-r-sm); --ld-button-default-color-hero-secondary-pressed-icon: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-secondary-pressed-label: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-secondary-hover-icon: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-secondary-hover-label: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-secondary-enabled-icon: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-secondary-enabled-label: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-hover-icon: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-hover-label: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-pressed-icon: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-pressed-label: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-enabled-icon: var(--ld-color-lexus-smoke-500); --ld-button-default-color-hero-enabled-label: var(--ld-color-lexus-smoke-500); --ld-c-button-default: var(--ld-s-border-radius-small); --ld-c-button-border-hero-secondary-pressed: 2px solid var(--ld-s-color-default-common-opacity-white-lighter); /* Pressed border propertieis for the hero-secondary button. */ --ld-c-button-border-hero-secondary-enabled: 2px solid var(--ld-s-color-default-common-opacity-white-lightest); /* Border propertieis for the hero-secondary button. */ --ld-c-button-border-hero-primary-pressed: 2px solid var(--ld-s-color-default-common-opacity-white-lighter); --ld-c-button-border-hero-primary-enabled: 2px solid var(--ld-s-color-default-common-opacity-white-lightest); /* Border colour for enabled state of the hero-primary button. */ --ld-focus-alt: 1px dashed var(--ld-s-color-alt-accent-primary-default); --ld-focus-default: 1px dashed var(--ld-s-color-default-accent-primary-default); --ld-button-alt-color-tertiary-disabled-icon: var(--ld-s-color-alt-accent-primary-disabled); --ld-button-alt-color-tertiary-disabled-label: var(--ld-s-color-alt-accent-primary-disabled); --ld-button-alt-color-tertiary-pressed-icon: var(--ld-s-color-alt-accent-primary-lighter); --ld-button-alt-color-tertiary-pressed-label: var(--ld-s-color-alt-accent-primary-lighter); --ld-button-alt-color-tertiary-hover-icon: var(--ld-s-color-alt-accent-primary-darker); --ld-button-alt-color-tertiary-hover-label: var(--ld-s-color-alt-accent-primary-darker); --ld-button-alt-color-tertiary-enabled-icon: var(--ld-s-color-alt-accent-primary-default); --ld-button-alt-color-tertiary-enabled-label: var(--ld-s-color-alt-accent-primary-default); --ld-button-alt-color-secondary-disabled-icon: var(--ld-s-color-alt-accent-primary-disabled); --ld-button-alt-color-secondary-disabled-label: var(--ld-s-color-alt-accent-primary-disabled); --ld-button-alt-color-secondary-disabled-border: var(--ld-s-color-alt-accent-primary-disabled); --ld-button-alt-color-secondary-pressed-icon: var(--ld-s-color-alt-accent-primary-lighter); --ld-button-alt-color-secondary-pressed-label: var(--ld-s-color-alt-accent-primary-lighter); --ld-button-alt-color-secondary-pressed-border: var(--ld-s-color-alt-accent-primary-lighter); --ld-button-alt-color-secondary-hover-icon: var(--ld-s-color-alt-accent-primary-darker); --ld-button-alt-color-secondary-hover-label: var(--ld-s-color-alt-accent-primary-darker); --ld-button-alt-color-secondary-hover-border: var(--ld-s-color-alt-accent-primary-darker); --ld-button-alt-color-secondary-enabled-icon: var(--ld-s-color-alt-accent-primary-default); --ld-button-alt-color-secondary-enabled-label: var(--ld-s-color-alt-accent-primary-default); --ld-button-alt-color-secondary-enabled-border: var(--ld-s-color-alt-accent-primary-default); --ld-button-alt-color-primary-disabled-icon: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-disabled-label: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-disabled-background: var(--ld-s-color-alt-accent-primary-lighter); --ld-button-alt-color-primary-pressed-icon: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-pressed-label: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-pressed-background: var(--ld-s-color-alt-accent-primary-lighter); --ld-button-alt-color-primary-hover-icon: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-hover-label: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-hover-background: var(--ld-s-color-alt-accent-primary-darker); --ld-button-alt-color-primary-enabled-icon: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-enabled-label: var(--ld-s-color-alt-foreground-on-accent); --ld-button-alt-color-primary-enabled-background: var(--ld-s-color-alt-accent-primary-default); --ld-button-typography-label-text-case: var(--ld-s-typography-label1-text-case); --ld-button-typography-label-paragraph-spacing: var(--ld-s-typography-label1-paragraph-spacing); --ld-button-typography-label-letter-spacing: var(--ld-s-typography-label1-letter-spacing); --ld-button-typography-label-font-size: var(--ld-s-typography-label1-font-size); --ld-button-typography-label-line-height: var(--ld-s-typography-label1-line-height); --ld-button-typography-label-font-weight: var(--ld-s-typography-label1-font-weight); --ld-button-default-color-tertiary-disabled-icon: var(--ld-s-color-default-accent-primary-disabled); --ld-button-default-color-tertiary-disabled-label: var(--ld-s-color-default-accent-primary-disabled); --ld-button-default-color-tertiary-pressed-icon: var(--ld-s-color-default-accent-primary-lighter); --ld-button-default-color-tertiary-pressed-label: var(--ld-s-color-default-accent-primary-lighter); --ld-button-default-color-tertiary-hover-icon: var(--ld-s-color-default-accent-primary-darker); --ld-button-default-color-tertiary-hover-label: var(--ld-s-color-default-accent-primary-darker); --ld-button-default-color-tertiary-enabled-icon: var(--ld-s-color-default-accent-primary-default); --ld-button-default-color-tertiary-enabled-label: var(--ld-s-color-default-accent-primary-default); --ld-button-default-color-secondary-disabled-icon: var(--ld-s-color-default-accent-primary-disabled); --ld-button-default-color-secondary-disabled-label: var(--ld-s-color-default-accent-primary-disabled); --ld-button-default-color-secondary-disabled-border: var(--ld-s-color-default-accent-primary-disabled); --ld-button-default-color-secondary-pressed-icon: var(--ld-s-color-default-accent-primary-lighter); --ld-button-default-color-secondary-pressed-label: var(--ld-s-color-default-accent-primary-lighter); --ld-button-default-color-secondary-pressed-border: var(--ld-s-color-default-accent-primary-lighter); --ld-button-default-color-secondary-hover-icon: var(--ld-s-color-default-accent-primary-darker); --ld-button-default-color-secondary-hover-label: var(--ld-s-color-default-accent-primary-darker); --ld-button-default-color-secondary-hover-border: var(--ld-s-color-default-accent-primary-darker); --ld-button-default-color-secondary-enabled-icon: var(--ld-s-color-default-accent-primary-default); --ld-button-default-color-secondary-enabled-label: var(--ld-s-color-default-accent-primary-default); --ld-button-default-color-secondary-enabled-border: var(--ld-s-color-default-accent-primary-default); --ld-button-default-color-primary-disabled-icon: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-disabled-label: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-disabled-background: var(--ld-s-color-default-accent-primary-lighter); --ld-button-default-color-primary-pressed-icon: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-pressed-label: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-pressed-background: var(--ld-s-color-default-accent-primary-lighter); --ld-button-default-color-primary-hover-icon: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-hover-label: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-hover-background: var(--ld-s-color-default-accent-primary-darker); --ld-button-default-color-primary-enabled-icon: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-enabled-label: var(--ld-s-color-default-foreground-on-accent); --ld-button-default-color-primary-enabled-background: var(--ld-s-color-default-accent-primary-default); --ld-c-button-box-shadow-hero-secondary-pressed-color: var(--ld-s-color-common-opacity-white-lighter); --ld-c-button-box-shadow-hero-secondary-hover-color: var(--ld-s-color-common-opacity-white-lightest); --ld-c-button-box-shadow-hero-secondary-enabled-color: var(--ld-s-color-common-opacity-white-lightest); --ld-c-button-box-shadow-hero-primary-hover-color: var(--ld-s-color-common-opacity-white-lightest); --ld-c-button-box-shadow-secondary-pressed-color: var(--ld-s-color-accent-primary-darker); --ld-c-button-box-shadow-secondary-hover-color: var(--ld-s-color-accent-primary-lighter); --ld-c-button-box-shadow-secondary-enabled-color: var(--ld-s-color-accent-primary-default); --ld-c-button-box-shadow-primary-pressed-color: var(--ld-s-color-accent-primary-darker); --ld-c-button-box-shadow-primary-hover-color: var(--ld-s-color-accent-primary-lighter); --ld-c-button-box-shadow-primary-enabled-color: var(--ld-s-color-accent-primary-default); --ld-c-button-icon-size: var(--ld-s-dim-static-xs); /* Size tokens for the height and width of icons within the button. */ --ld-c-button-min-height: var(--ld-s-dim-static-xl); /* Min height of the button. */ --ld-c-button-hero-secondary-pressed-bg: var(--ld-s-color-common-opacity-white-lighter); /* Paired with 20% opacity token. Bg colour for the pressed version of the hero secondary button variant. */ --ld-c-button-hero-secondary-hover-highlight: var(--ld-s-color-common-opacity-white-lighter); /* Highlight colour for the gradient on the hover state of the hero-secondary button variant. */ --ld-c-button-hero-primary-pressed-bg: var(--ld-s-color-common-opacity-white-lighter); /* Using the 20% opacity white colour for the pressed background colour of the hero-pimary button variant. */ --ld-c-button-hero-primary-hover-highlight: var(--ld-s-color-common-opacity-white-lighter); /* Highlight colour for the gradient on hover state for the hero primary button variant. */ --ld-c-button-hero-primary-hover-bg: var(--ld-s-color-common-opacity-white-lightest); /* Using the 10% opacity white colour for the hover colour of the hero primary button variant. */ --ld-c-button-hero-primary-enabled-bg: var(--ld-s-color-common-opacity-white-lightest); /* Using the 10% opacity white colour for the bg of the hero primary button variant. */ --ld-c-button-border-secondary-pressed: 2px solid var(--ld-s-color-accent-primary-darker); /* Border colour for the pressed state of the secondary button variant. */ --ld-c-button-border-secondary-hover: 2px solid var(--ld-s-color-accent-primary-lighter); /* Border colour for the hover state of the secondary button variant. */ --ld-c-button-border-secondary-enabled: 2px solid var(--ld-s-color-accent-primary-default); /* The border colour and properties for the enabled state of the secondary button variant. */ --ld-c-button-border-primary-pressed: 2px solid var(--ld-s-color-accent-primary-darker); /* Border colour for the pressed state of the primary button variant. */ --ld-c-button-border-primary-hover: 2px solid var(--ld-s-color-accent-primary-lighter); /* Border colour for the hover state of the primary button variant. */ --ld-c-button-border-primary-enabled: 2px solid var(--ld-s-color-accent-primary-default); /* Border for the default/enabled primary button vairant. */ --ld-c-button-secondary-disabled-label: var(--ld-s-color-accent-primary-default); /* Label and icon colour when disabled. */ --ld-c-button-secondary-enabled-label: var(--ld-s-color-accent-primary-default); /* Default label colour for the secondary button variant. */ --ld-c-button-secondary-pressed-label: var(--ld-s-color-accent-primary-darker); /* Pressed state label colour for the secondary button variant. */ --ld-c-button-secondary-hover-label: var(--ld-s-color-foreground-lighter); /* Hover label colour for the secondary button variant. */ --ld-c-button-secondary-hover-highlight: var(--ld-s-color-accent-primary-opacity-default-lighter); /* Highlight main gradient colour token. */ --ld-c-button-primary-disabled-label: var(--ld-s-color-foreground-on-disabled); /* Colour for the label and icon within the primary button disabled state variant. */ --ld-c-button-primary-label: var(--ld-s-color-foreground-on-accent); /* Colour for the label and icon within the primary button variant. */ --ld-c-button-primary-pressed-bg: var(--ld-s-color-accent-primary-darker); /* Background colour for the pressed state of the primary button variant. */ --ld-c-button-primary-hover-highlight: var(--ld-s-color-foreground-opacity-on-accent-lighter); /* Highlight main gradient colour token. */ --ld-c-button-primary-hover-bg: var(--ld-s-color-accent-primary-lighter); /* Hover colour for the background of the primary button variant. */ --ld-c-button-primary-enabled-bg: var(--ld-s-color-accent-primary-default); --ld-button-icon-default: var(--ld-icon-sizing-default); --ld-button-alt-color-primary-disabled-border: var(--ld-button-alt-color-primary-disabled-background); --ld-button-alt-color-primary-pressed-border: var(--ld-button-alt-color-primary-pressed-background); --ld-button-alt-color-primary-hover-border: var(--ld-button-alt-color-primary-hover-background); --ld-button-alt-color-primary-enabled-border: var(--ld-button-alt-color-primary-enabled-background); --ld-button-typography-label-font-family: var(--ld-s-typography-label1-font-family); --ld-button-default-color-primary-disabled-border: var(--ld-button-default-color-primary-disabled-background); --ld-button-default-color-primary-pressed-border: var(--ld-button-default-color-primary-pressed-background); --ld-button-default-color-primary-hover-border: var(--ld-button-default-color-primary-hover-background); --ld-button-default-color-primary-enabled-border: var(--ld-button-default-color-primary-enabled-background); } .lk_ldBox_ULKh1tjC { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_button_YGgjYcEm { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; min-width: var(--ld-c-button-min-w); min-height: var(--ld-c-button-min-height); outline: none; text-decoration: none; cursor: pointer; } .lk_button_YGgjYcEm:hover { color: inherit; } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu) { background: var(--ld-c-button-primary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-primary-enabled-x) var(--ld-c-button-box-shadow-primary-enabled-y) var(--ld-c-button-box-shadow-primary-enabled-blur) var(--ld-c-button-box-shadow-primary-enabled-spread) var(--ld-c-button-box-shadow-primary-enabled-color) var(--ld-c-button-box-shadow-primary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu) .lk_label_aBXA4brp { color: var(--ld-c-button-primary-label, var(--ld-c-button-primary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu) .lk_icon_esUINGC7 { color: var(--ld-c-button-primary-label, var(--ld-c-button-primary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-primary-hover-x) var(--ld-c-button-box-shadow-primary-hover-y) var(--ld-c-button-box-shadow-primary-hover-blur) var(--ld-c-button-box-shadow-primary-hover-spread) var(--ld-c-button-box-shadow-primary-hover-color) var(--ld-c-button-box-shadow-primary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-primary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu):not(:disabled):active { background-color: var(--ld-c-button-primary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-primary-pressed-x) var(--ld-c-button-box-shadow-primary-pressed-y) var(--ld-c-button-box-shadow-primary-pressed-blur) var(--ld-c-button-box-shadow-primary-pressed-spread) var(--ld-c-button-box-shadow-primary-pressed-color) var(--ld-c-button-box-shadow-primary-pressed-type); color: var(--ld-c-button-primary-label); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-primary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-primary-disabled-label); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu) { background: var(--ld-c-button-primary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-primary-enabled-x) var(--ld-c-button-box-shadow-primary-enabled-y) var(--ld-c-button-box-shadow-primary-enabled-blur) var(--ld-c-button-box-shadow-primary-enabled-spread) var(--ld-c-button-box-shadow-primary-enabled-color) var(--ld-c-button-box-shadow-primary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu) .lk_label_aBXA4brp { color: var(--ld-c-button-primary-label, var(--ld-c-button-primary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu) .lk_icon_esUINGC7 { color: var(--ld-c-button-primary-label, var(--ld-c-button-primary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-primary-hover-x) var(--ld-c-button-box-shadow-primary-hover-y) var(--ld-c-button-box-shadow-primary-hover-blur) var(--ld-c-button-box-shadow-primary-hover-spread) var(--ld-c-button-box-shadow-primary-hover-color) var(--ld-c-button-box-shadow-primary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-primary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu):not(:disabled):active { background-color: var(--ld-c-button-primary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-primary-pressed-x) var(--ld-c-button-box-shadow-primary-pressed-y) var(--ld-c-button-box-shadow-primary-pressed-blur) var(--ld-c-button-box-shadow-primary-pressed-spread) var(--ld-c-button-box-shadow-primary-pressed-color) var(--ld-c-button-box-shadow-primary-pressed-type); color: var(--ld-c-button-primary-label); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-primary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_primary_Fg6TMOBu)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-primary-disabled-label); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq) { background: var(--ld-c-button-secondary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-secondary-enabled-x) var(--ld-c-button-box-shadow-secondary-enabled-y) var(--ld-c-button-box-shadow-secondary-enabled-blur) var(--ld-c-button-box-shadow-secondary-enabled-spread) var(--ld-c-button-box-shadow-secondary-enabled-color) var(--ld-c-button-box-shadow-secondary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq) .lk_label_aBXA4brp { color: var(--ld-c-button-secondary-label, var(--ld-c-button-secondary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq) .lk_icon_esUINGC7 { color: var(--ld-c-button-secondary-label, var(--ld-c-button-secondary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-secondary-hover-x) var(--ld-c-button-box-shadow-secondary-hover-y) var(--ld-c-button-box-shadow-secondary-hover-blur) var(--ld-c-button-box-shadow-secondary-hover-spread) var(--ld-c-button-box-shadow-secondary-hover-color) var(--ld-c-button-box-shadow-secondary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-secondary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq):not(:disabled):active { background-color: var(--ld-c-button-secondary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-secondary-pressed-x) var(--ld-c-button-box-shadow-secondary-pressed-y) var(--ld-c-button-box-shadow-secondary-pressed-blur) var(--ld-c-button-box-shadow-secondary-pressed-spread) var(--ld-c-button-box-shadow-secondary-pressed-color) var(--ld-c-button-box-shadow-secondary-pressed-type); color: var(--ld-c-button-secondary-label); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-secondary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-secondary-disabled-label); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq) { background: var(--ld-c-button-secondary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-secondary-enabled-x) var(--ld-c-button-box-shadow-secondary-enabled-y) var(--ld-c-button-box-shadow-secondary-enabled-blur) var(--ld-c-button-box-shadow-secondary-enabled-spread) var(--ld-c-button-box-shadow-secondary-enabled-color) var(--ld-c-button-box-shadow-secondary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq) .lk_label_aBXA4brp { color: var(--ld-c-button-secondary-label, var(--ld-c-button-secondary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq) .lk_icon_esUINGC7 { color: var(--ld-c-button-secondary-label, var(--ld-c-button-secondary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-secondary-hover-x) var(--ld-c-button-box-shadow-secondary-hover-y) var(--ld-c-button-box-shadow-secondary-hover-blur) var(--ld-c-button-box-shadow-secondary-hover-spread) var(--ld-c-button-box-shadow-secondary-hover-color) var(--ld-c-button-box-shadow-secondary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-secondary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq):not(:disabled):active { background-color: var(--ld-c-button-secondary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-secondary-pressed-x) var(--ld-c-button-box-shadow-secondary-pressed-y) var(--ld-c-button-box-shadow-secondary-pressed-blur) var(--ld-c-button-box-shadow-secondary-pressed-spread) var(--ld-c-button-box-shadow-secondary-pressed-color) var(--ld-c-button-box-shadow-secondary-pressed-type); color: var(--ld-c-button-secondary-label); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-secondary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_secondary_DQhBJ_Yq)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-secondary-disabled-label); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj) { background: var(--ld-c-button-tertiary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-tertiary-enabled-x) var(--ld-c-button-box-shadow-tertiary-enabled-y) var(--ld-c-button-box-shadow-tertiary-enabled-blur) var(--ld-c-button-box-shadow-tertiary-enabled-spread) var(--ld-c-button-box-shadow-tertiary-enabled-color) var(--ld-c-button-box-shadow-tertiary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj) .lk_label_aBXA4brp { color: var(--ld-c-button-tertiary-label, var(--ld-c-button-tertiary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj) .lk_icon_esUINGC7 { color: var(--ld-c-button-tertiary-label, var(--ld-c-button-tertiary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-tertiary-hover-x) var(--ld-c-button-box-shadow-tertiary-hover-y) var(--ld-c-button-box-shadow-tertiary-hover-blur) var(--ld-c-button-box-shadow-tertiary-hover-spread) var(--ld-c-button-box-shadow-tertiary-hover-color) var(--ld-c-button-box-shadow-tertiary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-tertiary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj):not(:disabled):active { background-color: var(--ld-c-button-tertiary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-tertiary-pressed-x) var(--ld-c-button-box-shadow-tertiary-pressed-y) var(--ld-c-button-box-shadow-tertiary-pressed-blur) var(--ld-c-button-box-shadow-tertiary-pressed-spread) var(--ld-c-button-box-shadow-tertiary-pressed-color) var(--ld-c-button-box-shadow-tertiary-pressed-type); color: var(--ld-c-button-tertiary-label); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-tertiary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-tertiary-disabled-label); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj) { background: var(--ld-c-button-tertiary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-tertiary-enabled-x) var(--ld-c-button-box-shadow-tertiary-enabled-y) var(--ld-c-button-box-shadow-tertiary-enabled-blur) var(--ld-c-button-box-shadow-tertiary-enabled-spread) var(--ld-c-button-box-shadow-tertiary-enabled-color) var(--ld-c-button-box-shadow-tertiary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj) .lk_label_aBXA4brp { color: var(--ld-c-button-tertiary-label, var(--ld-c-button-tertiary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj) .lk_icon_esUINGC7 { color: var(--ld-c-button-tertiary-label, var(--ld-c-button-tertiary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-tertiary-hover-x) var(--ld-c-button-box-shadow-tertiary-hover-y) var(--ld-c-button-box-shadow-tertiary-hover-blur) var(--ld-c-button-box-shadow-tertiary-hover-spread) var(--ld-c-button-box-shadow-tertiary-hover-color) var(--ld-c-button-box-shadow-tertiary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-tertiary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj):not(:disabled):active { background-color: var(--ld-c-button-tertiary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-tertiary-pressed-x) var(--ld-c-button-box-shadow-tertiary-pressed-y) var(--ld-c-button-box-shadow-tertiary-pressed-blur) var(--ld-c-button-box-shadow-tertiary-pressed-spread) var(--ld-c-button-box-shadow-tertiary-pressed-color) var(--ld-c-button-box-shadow-tertiary-pressed-type); color: var(--ld-c-button-tertiary-label); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-tertiary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_tertiary_rcs_Mmuj)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-tertiary-disabled-label); } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL) { background: var(--ld-c-button-hero-primary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-hero-primary-enabled-x) var(--ld-c-button-box-shadow-hero-primary-enabled-y) var(--ld-c-button-box-shadow-hero-primary-enabled-blur) var(--ld-c-button-box-shadow-hero-primary-enabled-spread) var(--ld-c-button-box-shadow-hero-primary-enabled-color) var(--ld-c-button-box-shadow-hero-primary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL) .lk_label_aBXA4brp { color: var(--ld-c-button-hero-primary-label, var(--ld-c-button-hero-primary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL) .lk_icon_esUINGC7 { color: var(--ld-c-button-hero-primary-label, var(--ld-c-button-hero-primary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-hero-primary-hover-x) var(--ld-c-button-box-shadow-hero-primary-hover-y) var(--ld-c-button-box-shadow-hero-primary-hover-blur) var(--ld-c-button-box-shadow-hero-primary-hover-spread) var(--ld-c-button-box-shadow-hero-primary-hover-color) var(--ld-c-button-box-shadow-hero-primary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-hero-primary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL):not(:disabled):active { background-color: var(--ld-c-button-hero-primary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-hero-primary-pressed-x) var(--ld-c-button-box-shadow-hero-primary-pressed-y) var(--ld-c-button-box-shadow-hero-primary-pressed-blur) var(--ld-c-button-box-shadow-hero-primary-pressed-spread) var(--ld-c-button-box-shadow-hero-primary-pressed-color) var(--ld-c-button-box-shadow-hero-primary-pressed-type); color: var(--ld-c-button-hero-primary-label); } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-hero-primary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_hero-primary_RMvIBCCL)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-hero-primary-disabled-label); } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR) { background: var(--ld-c-button-hero-secondary-enabled-bg); border-radius: var(--ld-c-button-default, 3px); box-shadow: var(--ld-c-button-box-shadow-hero-secondary-enabled-x) var(--ld-c-button-box-shadow-hero-secondary-enabled-y) var(--ld-c-button-box-shadow-hero-secondary-enabled-blur) var(--ld-c-button-box-shadow-hero-secondary-enabled-spread) var(--ld-c-button-box-shadow-hero-secondary-enabled-color) var(--ld-c-button-box-shadow-hero-secondary-enabled-type); } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR) .lk_label_aBXA4brp { color: var(--ld-c-button-hero-secondary-label, var(--ld-c-button-hero-secondary-enabled-label)); text-align: center; } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR) .lk_icon_esUINGC7 { color: var(--ld-c-button-hero-secondary-label, var(--ld-c-button-hero-secondary-enabled-label)); } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR):hover:not(:disabled) { box-shadow: var(--ld-c-button-box-shadow-hero-secondary-hover-x) var(--ld-c-button-box-shadow-hero-secondary-hover-y) var(--ld-c-button-box-shadow-hero-secondary-hover-blur) var(--ld-c-button-box-shadow-hero-secondary-hover-spread) var(--ld-c-button-box-shadow-hero-secondary-hover-color) var(--ld-c-button-box-shadow-hero-secondary-hover-type); background-size: 200px 200px; background-image: radial-gradient(100px at center, var(--ld-c-button-hero-secondary-hover-highlight), transparent); background-repeat: no-repeat; background-position: var(--mouseX) var(--mouseY); } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR):not(:disabled):active { background-color: var(--ld-c-button-hero-secondary-pressed-bg); box-shadow: var(--ld-c-button-box-shadow-hero-secondary-pressed-x) var(--ld-c-button-box-shadow-hero-secondary-pressed-y) var(--ld-c-button-box-shadow-hero-secondary-pressed-blur) var(--ld-c-button-box-shadow-hero-secondary-pressed-spread) var(--ld-c-button-box-shadow-hero-secondary-pressed-color) var(--ld-c-button-box-shadow-hero-secondary-pressed-type); color: var(--ld-c-button-hero-secondary-label); } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR)[aria-disabled] { background-image: none; opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR)[aria-disabled] .lk_label_aBXA4brp { color: var(--ld-c-button-hero-secondary-disabled-label); opacity: var(--ld-c-button-opacity-disabled); } .lk_button_YGgjYcEm:where(.lk_hero-secondary_dgXSKTSR)[aria-disabled] .lk_icon_esUINGC7 { opacity: var(--ld-c-button-opacity-disabled); color: var(--ld-c-button-hero-secondary-disabled-label); } .lk_button_YGgjYcEm .lk_icon_esUINGC7 { height: var(--ld-c-button-icon-size); width: var(--ld-c-button-icon-size); align-items: center; display: flex; flex: none; justify-content: flex-start; } .lk_button_YGgjYcEm[aria-disabled] { cursor: not-allowed; } .lk_button_YGgjYcEm .lk_label_aBXA4brp { overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .lk_button_YGgjYcEm .lk_content_p1O0TKdL { overflow: hidden; align-items: center; } @keyframes lk_loadingAnimation_Xueb9WWC { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } .lk_button_YGgjYcEm .lk_loading_HHr6_WuG { /* stylelint-disable csstools/value-no-unknown-custom-properties */ margin-right: calc(var(--lk-private-svg-loading-spinner-width) * 0.3); min-width: var(--lk-private-svg-loading-spinner-width); height: var(--lk-private-svg-loading-spinner-height); background: var(--lk-private-svg-loading-spinner); /* stylelint-enable csstools/value-no-unknown-custom-properties */ mask-repeat: no-repeat; mask-size: contain; mask-position: center; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in; animation: lk_loadingAnimation_Xueb9WWC 1s linear infinite; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_dealerServiceButton_SVPQKkKh { margin: var(--dealer-service-button-margin); max-width: 320px !important; white-space: nowrap; width: calc(100% - var(--dealer-service-button-margin-x) * 2); } .lk_dealerServiceIcon_CkRiWYjE { fill: var(--ld-color-legacy-smoke-default); } .lk_dealerService_LzWCib_9 { display: flex; flex-direction: row; align-items: center; padding-bottom: var(--dealer-service-spacing-bottom); flex-wrap: nowrap; font-size: var(--dealer-service-font-size); line-height: var(--dealer-service-line-height); word-break: var(--dealer-service-word-break); color: var(--ld-color-legacy-smoke-default); } .lk_dealerService_LzWCib_9 a, .lk_dealerService_LzWCib_9 span { color: var(--ld-color-legacy-smoke-default); } .lk_dealerService_LzWCib_9 a:hover, .lk_dealerService_LzWCib_9 span:hover { color: var(--ld-color-legacy-smoke-default); } .lk_dealerServiceLabel_MkFrb66Y, .lk_dealerServiceHours_ihphwy0T { white-space: nowrap; } .lk_dealerServiceHours_ihphwy0T { padding-left: calc(var(--dealer-service-not-last-child-spacing-left) / 2); } .lk_dealerServiceAddress_w_J431c9 { align-items: flex-start; } .lk_dealerServiceIconContainer_elsOhO0J { display: flex; align-items: center; } .lk_dealerServiceIconContainerAddress_VErhXaF8 { display: block; padding-top: 2px; } .lk_dealerServiceIconContainerEmail_ZTiB09Yd { padding-top: 4px; } .lk_dealerService_LzWCib_9 > *:not(:first-child, .lk_dealerServiceHours_ihphwy0T) { padding-left: var(--dealer-service-not-last-child-spacing-left); } .lk_dealerServicePublicHolidayText_vqC9TwbV { font-size: var(--dealer-service-font-size); line-height: var(--dealer-service-line-height); word-break: var(--dealer-service-word-break); color: var(--ld-color-legacy-smoke-default); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_dealerOpeningHours_G1OkCuNt { width: min-content; } .lk_dealerOpeningHoursIcon_MFjRPg7a { fill: var(--ld-color-legacy-smoke-default); display: block; align-self: center; } .lk_dealerOpeningHoursItems_k2kWOcJJ { display: flex; flex-direction: row; } .lk_dealerOpeningHoursDetails_IOej1379 { font-size: var(--dealer-opening-hours-details-font-size); line-height: var(--dealer-opening-hours-details-line-height); padding-left: var(--dealer-opening-hours-details-padding-left); color: var(--ld-color-legacy-smoke-default); justify-content: space-between; } .lk_dealerOpeningHoursArrow_lAyxoRQS { padding-left: var(--dealer-opening-hours-arrow-spacing-left); align-self: center; padding-bottom: var(--dealer-service-spacing-bottom); } .lk_dealerOpeningHoursIconArrowDown_QUFmSbgL { cursor: pointer; transition: 300ms ease-in-out; transform: rotate(0deg); } .lk_dealerOpeningHoursIconArrowDownExpanded_JLrZpZZh { transform: rotate(180deg); } .lk_dealerOpeningHoursMoreDetails_XYcXDXPn { transition: max-height 300ms linear; max-height: 0; max-width: 100%; overflow: hidden; } .lk_dealerOpeningHoursMoreDetailsVisible_bFCAOUFs { max-height: var(--dealer-opening-hours-more-details-visible-max-height); padding-bottom: var(--dealer-opening-hours-more-details-visible-spacing-bottom); } .lk_dealerOpeningHoursMoreDetailsHighlight_tbVjcFWf { font-weight: var(--dealer-opening-hours-more-details-highlight-font-weight); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_dealerContactTile_WyGTX90S { --dealer-contact-tile-spacing: 40px 32px 32px; --dealer-contact-tile-tab-gap: 8px; /*stylelint cant read interpolated values so thinks this is an error */ --dealer-location-padding-top: 40px; /*stylelint cant read interpolated values so thinks this is an error */ --dealer-branch-location-name-font-size: 26px; --dealer-branch-location-name-line-height: 115%; --dealer-branch-location-name-letter-spacing: 1.3px; --dealer-branch-location-name-text-transform: uppercase; --dealer-branch-location-name-spacing-bottom: 4px; --dealer-branch-location-pin-spacing-right: 16px; --dealer-branch-location-pin-icon-position-top: 34.25px; --dealer-branch-location-pin-icon-position-left: 21.25px; --dealer-branch-location-pin-icon-font-size: 12px; --dealer-branch-location-pin-icon-line-height: 150%; --dealer-service-font-size: 18px; --dealer-service-line-height: 150%; --dealer-service-word-break: break-all; --dealer-service-spacing-bottom: 8px; --dealer-service-button-margin-x: 48px; --dealer-service-button-margin: 0 var(--dealer-service-button-margin-x) 32px; --dealer-service-not-last-child-spacing-left: 16px; --dealer-opening-hours-details-font-size: 15px; --dealer-opening-hours-details-line-height: 150%; --dealer-opening-hours-details-padding-left: 32px; --dealer-opening-hours-arrow-spacing-left: 8px; --dealer-opening-hours-more-details-visible-max-height: 500px; --dealer-opening-hours-more-details-visible-spacing-bottom: 16px; --dealer-opening-hours-more-details-highlight-font-weight: 400; padding: var(--dealer-contact-tile-spacing); } @media (min-width: 1024px) { .lk_dealerContactTile_WyGTX90S { --dealer-contact-tile-spacing: 56px 32px 32px 80px; } } @media (min-width: 1024px) { .lk_dealerContactTile_WyGTX90S { --dealer-location-gap: 80px; --dealer-location-padding-top: 0; } } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_primaryNavStaticContactUs_Cjg8ik4y { --primary-nav-static-link-item-gap: 24px 40px; position: relative; font-size: var(--primary-nav-tg-item-font-size); font-weight: var(--primary-nav-tg-item-font-weight); line-height: var(--primary-nav-tg-item-line-height); padding: 0; /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ margin-top: var(--primary-nav-footer-padding); color: var(--ld-color-legacy-lexus-brand-white); display: flex; flex-direction: column; gap: 0; } .lk_primaryNavStaticContactUs_Cjg8ik4y::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: auto; opacity: 0.5; border-top: 1px solid var(--ld-color-legacy-lexus-brand-white); } .lk_dealerNavContainer_D1j4m3m5 { background: var(--ld-color-legacy-deepblue-light); } .lk_dealerNavTitleIconContainer_t5TPjtxb { display: flex; } .lk_dealerNavTitleIcon_liiZyuie { fill: var(--ld-color-legacy-smoke-default); display: block; align-self: center; } .lk_dealerNavDetails_eDlxa7Rn { transition: max-height 300ms ease-out; max-height: 0; max-width: 100%; overflow: hidden; } .lk_dealerNavDetailsVisible_Z9XoOp92 { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ max-height: var(--primary-nav-modal-dealer-details-visible-max-height); } .lk_dealerNavTitleContainer_PTwJ6Liu { justify-content: space-between; display: flex; /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ padding: var(--primary-nav-footer-padding); cursor: pointer; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_primaryNavItems_vlJlxZWh { display: flex; flex-direction: column; align-items: flex-start; color: var(--ld-color-legacy-lexus-brand-white); } .lk_primaryNavItem_TXYDnHlM { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; color: var(--ld-color-legacy-lexus-brand-white); text-decoration: none; width: fit-content; font-size: var(--primary-nav-tg-item-font-size); font-weight: var(--primary-nav-tg-item-font-weight); line-height: var(--primary-nav-tg-item-line-height); --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; cursor: pointer; transition: opacity 0.3s ease-in-out; opacity: 1; } .lk_primaryNavItem_TXYDnHlM:hover { color: inherit; } .lk_primaryNavItem_TXYDnHlM::after { content: ""; display: block; position: absolute; border-bottom: var(--ornaments-senkei-default-line-size) solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(var(--ornaments-senkei-offset-top-default)); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; } .lk_primaryNavItem_TXYDnHlM:hover { color: var(--ld-color-legacy-lexus-brand-white); } .lk_isNavItemSelected_PD9lOEfp .lk_primaryNavItem_TXYDnHlM:not(.lk_primaryNavItemSelected_l0l9lIqS) { opacity: 0.7; } .lk_primaryNavItem_TXYDnHlM + .lk_primaryNavItem_TXYDnHlM { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ margin-top: var(--primary-nav-items-spacing-between); } .lk_primaryNavItem_TXYDnHlM:hover, .lk_primaryNavItemHovered_ScHbXekC { color: var(--ld-color-legacy-lexus-brand-white); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_primaryNavItem_TXYDnHlM:hover::after, .lk_primaryNavItemHovered_ScHbXekC::after { max-width: 100%; opacity: 1; } } .lk_primaryNavItemSelected_l0l9lIqS::after { max-width: 100%; opacity: 1; } .lk_disabled_e3OAmbYc { opacity: 0.5; pointer-events: none; } .lk_closeButtonBackground_YHih7S5h { --primary-nav-close-button-background-height: 78px; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: var(--primary-nav-close-button-background-height); pointer-events: none; } .lk_closeButtonBackgroundGradient_YedDOild, .lk_closeButtonBackgroundBlur1_N9buOMSj, .lk_closeButtonBackgroundBlur2_gXeqtj1k, .lk_closeButtonBackgroundBlur3_oGENjND1 { position: absolute; top: 0; left: 0; right: 0; } .lk_closeButtonBackgroundGradient_YedDOild { z-index: 1; height: var(--primary-nav-close-button-background-height); background: var(--ld-color-legacy-deepblue-dark); mask-image: linear-gradient(180deg, rgb(0, 0, 0) 86.48%, rgba(0, 0, 0, 0.951567) 87.54%, rgba(0, 0, 0, 0.90455) 88.51%, rgba(0, 0, 0, 0.858022) 89.42%, rgba(0, 0, 0, 0.811054) 90.28%, rgba(0, 0, 0, 0.762719) 91.09%, rgba(0, 0, 0, 0.712088) 91.88%, rgba(0, 0, 0, 0.658234) 92.66%, rgba(0, 0, 0, 0.600228) 93.43%, rgba(0, 0, 0, 0.537143) 94.23%, rgba(0, 0, 0, 0.46805) 95.04%, rgba(0, 0, 0, 0.392023) 95.9%, rgba(0, 0, 0, 0.308132) 96.81%, rgba(0, 0, 0, 0.21545) 97.79%, rgba(0, 0, 0, 0.113048) 98.85%, rgba(0, 0, 0, 0) 100%); } .lk_closeButtonBackgroundBlur1_N9buOMSj { top: calc(100% - 13px); height: 8px; backdrop-filter: blur(0.66px); } .lk_closeButtonBackgroundBlur2_gXeqtj1k { top: calc(100% - 13px); height: 12px; backdrop-filter: blur(0.66px); } .lk_closeButtonBackgroundBlur3_oGENjND1 { top: calc(100% - 13px); height: 16px; backdrop-filter: blur(0.66px); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldMenu_JSo50fwL, .lk_closeButtonContainer_lXSqmbRG { --ld-c-menu-card-min-w: 274px; /* Min-w for the decorative car cards. This min-w allows cards to fit on a 320px screenwidth with margin. */ --ld-c-menu-card-max-w: 376px; /* Max-w for these cards when in the car model menu tab. Based off the mobile 4-col max-w value. */ --ld-c-menu-filter-transition-duration: 200; /* Transition duration value for an opacity transition when swapping tabs in the car model menu. */ } .lk_primaryNavDesktopLayout_DpWj2EOa { --primary-nav-desktop-layout-grid-cell-4-col-width: calc((100% + 39px) / 12 * 4 - 39px); --primary-nav-desktop-layout-grid-cell-8-col-width: calc((100% + 39px) / 12 * 8 - 39px); flex-grow: 1; display: flex; flex-direction: column; align-items: stretch; position: relative; } .lk_closeButtonContainer_lXSqmbRG { position: fixed; left: 0; padding-left: var(--primary-nav-modal-container-padding); right: var(--primary-nav-modal-scrollbar-width-if-present); z-index: var(--lk-menu-close-button-container-z-index); } .lk_primaryNavDesktopLayoutLevels_yjJdHVqT { min-height: var(--primary-nav-desktop-layout-min-height-dynamic, calc(100vh - var(--primary-nav-bottom-dynamic))); position: relative; display: flex; flex-direction: row; } .lk_level1Layout_tCjwe4aP { display: flex; flex-direction: column; padding-top: var(--primary-nav-desktop-layout-padding-top); flex: 0 0 100%; } .lk_level1LayoutBody_RrbtAxUG { flex-grow: 1; display: flex; flex-direction: column; width: 100%; } .lk_isLevel2LayoutAvailable_lDeQtsFg .lk_level1LayoutBody_RrbtAxUG { width: var(--primary-nav-desktop-layout-grid-cell-4-col-width); } .lk_level1LayoutBody_RrbtAxUG + .lk_level1LayoutFooter_DqdY3_FH { margin-top: var(--primary-nav-desktop-layout-level-1-body-footer-spacing); } .lk_level1LayoutFooter_DqdY3_FH { margin-left: calc(-1 * var(--primary-nav-modal-container-padding)); margin-right: calc(-1 * var(--primary-nav-modal-container-padding)); display: flex; flex-direction: column; } .lk_level2Layout_kqbA6VmQ { position: absolute; width: var(--primary-nav-desktop-layout-grid-cell-8-col-width); top: 0; left: auto; right: 0; min-height: calc(100vh - var(--primary-nav-bottom-dynamic)); padding: var(--primary-nav-desktop-layout-level-2-padding); flex-grow: 1; z-index: 2; display: none; } .lk_level2Layout_kqbA6VmQ::after { content: ""; position: absolute; display: block; z-index: -1; left: 0; top: 0; bottom: 0; width: 100vw; background: var(--ld-color-legacy-deepblue-light); } .lk_level2Layout_kqbA6VmQ.lk_isPaddingSuppressed_U1JlYd7x { padding: 0; } .lk_level2Layout_kqbA6VmQ.lk_isBackgroundSuppressed__wFwRQFy::after { background: none; } .lk_level2Layout_kqbA6VmQ.lk_isIgnoringContainerPaddingRight_avPUISEl { width: calc(var(--primary-nav-desktop-layout-grid-cell-8-col-width) + var(--primary-nav-modal-container-padding)); margin-right: calc(var(--primary-nav-modal-container-padding) * -1); } .lk_level2OpenCloseEnter_JzKJTINm { opacity: 0; transform: translateX(50px); display: block; } .lk_level2OpenCloseEnterActive_FDaOMlFs { transition: opacity var(--primary-nav-modal-transition-duration) ease-in-out, transform var(--primary-nav-modal-transition-duration) ease-out; opacity: 1; transform: translateX(0); display: block; } .lk_level2OpenCloseEnterDone_TrbjnypE { display: block; } .lk_level2OpenCloseExit_BWARpaAn { opacity: 1; display: block; } .lk_level2OpenCloseExitActive_UUv6n8An { transition: opacity var(--primary-nav-modal-transition-duration) ease-in-out; opacity: 0; display: block; } .lk_level2OpenCloseExitDone_to2K0h8Q { display: none; opacity: 0; pointer-events: none; } .lk_parentIsFlexbox_ugD4jTz5 { align-self: stretch; display: flex; flex-direction: row; justify-content: center; } .lk_parentIsFlexbox_ugD4jTz5 .lk_containerInner_AuI9juaU { display: flex; flex-grow: 1; flex-direction: column; } .lk_fillParentHeight_jYLkmVJo { flex-grow: 1; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldMenu_Pw4DCp5v, .lk_closeButtonContainer_RJrs9qw3 { --ld-c-menu-card-min-w: 274px; /* Min-w for the decorative car cards. This min-w allows cards to fit on a 320px screenwidth with margin. */ --ld-c-menu-card-max-w: 376px; /* Max-w for these cards when in the car model menu tab. Based off the mobile 4-col max-w value. */ --ld-c-menu-filter-transition-duration: 200; /* Transition duration value for an opacity transition when swapping tabs in the car model menu. */ } .lk_primaryNavMobilePage_IR0eG7pc { padding-top: var(--primary-nav-mobile-page-padding-top); min-height: 100vh; display: flex; flex-direction: column; } .lk_closeButtonContainer_RJrs9qw3 { --primary-nav-mobile-page-close-button-offset-left: 24px; position: fixed; top: 0; left: 0; right: 0; padding-left: var(--primary-nav-mobile-page-close-button-offset-left); z-index: var(--lk-menu-close-button-container-z-index); } .lk_header_Q33g4ETl { padding-bottom: var(--primary-nav-mobile-page-level-2-header-padding-bottom); } .lk_childrenAndFooter_TjxbwUP3 { flex-grow: 1; display: flex; flex-direction: column; } .lk_children_ySJA3hrg { flex-grow: 1; display: flex; flex-direction: column; } .lk_childrenNoFlexGrow_UXUI4OTp { flex-grow: 0; } .lk_children_ySJA3hrg + .lk_footer_FafFcsXy { margin-top: var(--primary-nav-mobile-page-level-2-children-footer-spacing); } .lk_primaryNavMobilePage_IR0eG7pc.lk_level2_vPjcqsLr { padding-bottom: 0; } .lk_primaryNavMobilePage_IR0eG7pc.lk_level2_vPjcqsLr .lk_childrenAndFooter_TjxbwUP3 { background: var(--ld-color-legacy-deepblue-light); padding-top: var(--primary-nav-mobile-page-level-2-footer-and-children-padding-top); } .lk_quickBookButton_gHHVwFrO { flex-grow: 1; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldContainer_alIv44rO, .lk_container_czhuYRH3 { --ld-c-container-width-3col-max-w: var(--ld-s-sz-columns-3col-max-w); /* Max-width for 3 column grid layout. */ --ld-c-container-width-10col-max-w: var(--ld-s-sz-columns-10col-max-w); /* Max-width calcualted for 10 col grid layout. */ --ld-c-container-width-12col-max-w: var(--ld-s-sz-columns-12col-max-w); --ld-c-container-width-12col-min-w: var(--ld-s-sz-columns-12col-min-w); --ld-c-container-width-8col-max-w: var(--ld-s-sz-columns-8col-max-w); --ld-c-container-width-8col-min-w: var(--ld-s-sz-columns-8col-min-w); --ld-c-container-width-6col-max-w: var(--ld-s-sz-columns-6col-max-w); --ld-c-container-width-6col-min-w: var(--ld-s-sz-columns-6col-min-w); --ld-c-container-width-4col-max-w: var(--ld-s-sz-columns-4col-max-w); --ld-c-container-width-4col-min-w: var(--ld-s-sz-columns-4col-min-w); --ld-c-container-width-full-width-max-w: var(--ld-s-sz-columns-full-width-max-w); --ld-c-container-width-full-width-min-w: var(--ld-s-sz-columns-full-width-min-w); } .lk_noMaxFullWidth_dHsVa_H3 { --lk-private-max-full: 100vw; } .lk_flexContainer_nUGUGDpX { display: flex; } .lk_widthnone_U2jYBAnQ { max-width: min(100%, 100vw); } .lk_width3col_m_aDEu9I { max-width: min(var(--ld-c-container-width-3col-max-w), var(--lk-private-max-full, 100%), 100vw); } .lk_width4col__NrqD7gs { max-width: min(var(--ld-c-container-width-4col-max-w), var(--lk-private-max-full, 100%), 100vw); } .lk_width6col_b9guHlLp { max-width: min(var(--ld-c-container-width-6col-max-w), var(--lk-private-max-full, 100%), 100vw); } .lk_width8col_tyyDNFMt { max-width: min(var(--ld-c-container-width-8col-max-w), var(--lk-private-max-full, 100%), 100vw); } .lk_width10col_ls8sTgsp { max-width: min(var(--ld-c-container-width-10col-max-w), var(--lk-private-max-full, 100%), 100vw); } .lk_width12col_YZB76YSg { max-width: min(var(--ld-c-container-width-12col-max-w), var(--lk-private-max-full, 100%), 100vw); } .lk_minWidth4col_nHd34cfv { min-width: var(--ld-c-container-width-4col-min-w); } .lk_minWidth6col_xmGHUrej { min-width: var(--ld-c-container-width-6col-min-w); } .lk_minWidth8col_S3VkMLpe { min-width: var(--ld-c-container-width-8col-min-w); } .lk_minWidth12col_QSeFb8Ri { min-width: var(--ld-c-container-width-12col-min-w); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldBox_uXtCgtHl, .lk_hasMargin_ezBRxyws { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_searchInputContainer_nBoY7sHh { position: absolute; top: var(--primary-nav-navbar-height); left: 0; right: 0; background-color: var(--ld-color-legacy-deepblue-darkest); animation: lk_lk-private-slideIn_jjrDL8rE 0.5s ease forwards; } .lk_searchInputContent_Ufv7kYpp { width: 100%; margin: auto; background-color: inherit; } .lk_searchInputFormSection_e3kq8_se { background-color: inherit; } .lk_hasMargin_ezBRxyws { margin: 0 var(--ld-c-box-pad-scaled-default); } .lk_isMobile_mRnW_R3C { position: static; background-color: inherit; animation: none; } @keyframes lk_lk-private-slideIn_jjrDL8rE { from { transform: translateY(-20%); } to { transform: translateY(0); } } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_container_Su75gQY8 { padding-left: var(--primary-nav-modal-container-padding); padding-right: var(--primary-nav-modal-container-padding); } .lk_parentIsFlexbox_BtRwRKGm { align-self: stretch; display: flex; flex-direction: row; justify-content: center; } .lk_parentIsFlexbox_BtRwRKGm .lk_containerInner_bhcXsi1h { display: flex; flex-grow: 1; flex-direction: column; } .lk_fillParentHeight_ubHDqnby { flex-grow: 1; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_primaryNavStatic_u_kfNLOf { --primary-nav-static-link-item-gap: 24px 40px; position: relative; padding: var(--primary-nav-footer-padding); color: var(--ld-color-legacy-lexus-brand-white); display: flex; flex-direction: column; gap: var(--primary-nav-static-link-item-gap); } .lk_primaryNavStatic_u_kfNLOf::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: auto; opacity: 0.5; border-top: 1px solid var(--ld-color-legacy-lexus-brand-white); } .lk_primaryNavStaticHorizontal_UPbVM8i0 { /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_primaryNavStaticHorizontal_UPbVM8i0 { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-right: var(--primary-nav-static-spacing-for-small); } } .lk_primaryNavStaticItem__8glplqZ { margin-top: var(--primary-nav-static-item-spacing); width: fit-content; } .lk_primaryNavItemText_LztizAZ6 { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; font-size: var(--primary-nav-tg-static-link-font-size); line-height: var(--primary-nav-tg-static-link-line-height); letter-spacing: var(--primary-nav-tg-static-link-letter-spacing); text-transform: var(--primary-nav-tg-static-link-text-transform); text-decoration: none; display: block; cursor: pointer; --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; color: var(--ld-color-legacy-lexus-brand-white); } .lk_primaryNavItemText_LztizAZ6:hover { color: inherit; } .lk_primaryNavItemText_LztizAZ6::after { content: ""; display: block; position: absolute; border-bottom: var(--ornaments-senkei-default-line-size) solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(var(--ornaments-senkei-offset-top-default)); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; } .lk_primaryNavItemText_LztizAZ6:hover { color: var(--ld-color-legacy-lexus-brand-white); } .lk_primaryNavItemText_LztizAZ6:hover::after { max-width: 100%; opacity: 1; } .lk_primaryNavIcon_SSin0BY4 { fill: var(--ld-color-legacy-lexus-brand-white); display: block; } .lk_primaryNavIconHorizontal_Aj4lG_AB { /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_primaryNavIconHorizontal_Aj4lG_AB { display: flex; flex-direction: column; align-items: center; } } .lk_encoreSmall_eaZa0zPM { --primary-nav-modal-encore-max-width-mobile: 324px; max-width: var(--primary-nav-modal-encore-max-width-mobile); width: 100%; margin: 0 auto; } .lk_loginFormIFrame_Kw8OYT0N { --primary-nav-modal-encore-login-form-iframe-height: 560px; --primary-nav-modal-encore-login-form-iframe-max-width-desktop: 600px; width: 100%; border: 0; overflow: hidden; /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ max-width: var(--primary-nav-modal-encore-login-form-iframe-max-width-mobile); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_loginFormIFrame_Kw8OYT0N { max-width: var(--primary-nav-modal-encore-login-form-iframe-max-width-desktop); } } .lk_encoreAdvert_ilGE2SIy { --primary-nav-modal-encore-advert-margin-mobile: 24px; --primary-nav-modal-encore-advert-margin-top-mobile: 80px; --primary-nav-modal-encore-advert-margin-desktop: 117px 0 0 80px; --primary-nav-modal-encore-advert-background: radial-gradient( 85.86% 119.87% at 79.63% 18.68%, #60667e 0%, #60667e 18.23%, rgba(96, 102, 126, 0) 100% ), #313649; margin: var(--primary-nav-modal-encore-advert-margin-mobile); margin-top: var(--primary-nav-modal-encore-advert-margin-top-mobile); background: var(--primary-nav-modal-encore-advert-background); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_encoreAdvert_ilGE2SIy { margin: var(--primary-nav-modal-encore-advert-margin-desktop); display: grid; grid-template-columns: 55% 45%; } } .lk_encoreAdvertTitle_eHhJrIEV { color: var(--ld-color-legacy-lexus-brand-white); } .lk_encoreAdvertTextContainer_o47Jh7xK { --primary-nav-modal-encore-advert-text-container-max-width-desktop: 400px; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_encoreAdvertTextContainer_o47Jh7xK { max-width: var(--primary-nav-modal-encore-advert-text-container-max-width-desktop); } } .lk_encoreAdvertImageContainer_k8oiITfk { --primary-nav-modal-encore-advert-image-container-offset: 24px; --primary-nav-modal-encore-advert-image-container-margin-desktop: 0 16px; position: relative; margin-top: var(--primary-nav-modal-encore-advert-image-container-offset); grid-row: 1/3; grid-column: 2; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_encoreAdvertImageContainer_k8oiITfk { margin: var(--primary-nav-modal-encore-advert-image-container-margin-desktop); } } .lk_encoreAdvertImageContainer_k8oiITfk img { max-width: 100%; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_encoreAdvertImageContainer_k8oiITfk img { max-height: 100%; max-width: 100%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } } .lk_encoreAdvertAppIconContainer_VnTOxh5T { --primary-nav-modal-encore-advert-app-icon-container-margin-top: 16px; --primary-nav-modal-encore-advert-app-icon-container-width: 264px; display: flex; flex-direction: row; width: 100%; max-width: var(--primary-nav-modal-encore-advert-app-icon-container-width); margin-top: var(--primary-nav-modal-encore-advert-app-icon-container-margin-top); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_encoreAdvertAppIconContainer_VnTOxh5T { width: var(--primary-nav-modal-encore-advert-app-icon-container-width); max-width: auto; } } .lk_encoreAdvertAppIcon_PmRrGvc5 { --primary-nav-modal-encore-advert-app-icon-spacing: 8px; } .lk_encoreAdvertAppIcon_PmRrGvc5 + .lk_encoreAdvertAppIcon_PmRrGvc5 { margin-left: var(--primary-nav-modal-encore-advert-app-icon-spacing); } .lk_encoreAdvertAppIcon_PmRrGvc5 img { width: 100%; } .lk_encoreAdvertCtaContainer_v5ppcJTr { --primary-nav-modal-encore-advert-cta-container-margin-top-mobile: 24px; --primary-nav-modal-encore-advert-cta-container-margin-top-desktop: 40px; --primary-nav-modal-encore-advert-cta-container-width: 264px; margin-top: var(--primary-nav-modal-encore-advert-cta-container-margin-top-mobile); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_encoreAdvertCtaContainer_v5ppcJTr { width: var(--primary-nav-modal-encore-advert-cta-container-width); margin-top: var(--primary-nav-modal-encore-advert-cta-container-margin-top-desktop); } } .lk_encoreAdvertCta_y8MxH5Vu { width: 100%; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_background_oQa04FTo { flex-grow: 1; display: flex; flex-direction: column; } .lk_backLink_Jg3xwcBD { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; --primary-nav-modal-generic-back-link-offset-left: 0; --primary-nav-modal-generic-back-link-icon-label-spacing: 8px; display: flex; align-items: center; margin-left: var(--primary-nav-modal-generic-back-link-offset-left); gap: var(--primary-nav-modal-generic-back-link-icon-label-spacing); } .lk_backLink_Jg3xwcBD:hover { color: inherit; } .lk_backLinkIcon_lNorpLYd { display: flex; } .lk_backLinkLabel_lWd2Z11n { font-size: var(--primary-nav-tg-item-font-size); font-weight: var(--primary-nav-tg-item-font-weight); line-height: var(--primary-nav-tg-item-line-height); } .lk_desktopLayoutLevel2Container_Vj2UCrKD { display: flex; flex-direction: row; } .lk_desktopLayoutLevel2Content_fmM4DlJ8 { --desktop-layout-level-2-content-display: block; width: 100%; margin-right: -100%; display: none; } .lk_desktopLayoutLevel2SwitchEnter_zl_qcD8p { opacity: 0; display: var(--desktop-layout-level-2-content-display); } .lk_desktopLayoutLevel2SwitchEnterActive_ppC5uSQj { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ transition: opacity var(--primary-nav-modal-content-transition-duration) ease-in-out; opacity: 1; transform: translateX(0); display: var(--desktop-layout-level-2-content-display); } .lk_desktopLayoutLevel2SwitchEnterDone_aVBcHeqe { display: var(--desktop-layout-level-2-content-display); } .lk_desktopLayoutLevel2SwitchExit_D7pfK9k3 { opacity: 1; display: var(--desktop-layout-level-2-content-display); } .lk_desktopLayoutLevel2SwitchExitActive_ESEB5csA { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ transition: opacity var(--primary-nav-modal-content-transition-duration) ease-in-out; opacity: 0; display: var(--desktop-layout-level-2-content-display); } .lk_desktopLayoutLevel2SwitchExitDone_mRLOHKWd { display: none; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_primaryNavMobileMenuItems_gSh006DC { margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; list-style: none; display: flex; flex-direction: column; } .lk_primaryNavMobileMenuItem_O4bvs1Im { list-style: none; text-indent: 0; margin: 0; padding: 0; font-size: var(--primary-nav-tg-item-font-size); font-weight: var(--primary-nav-tg-item-font-weight); line-height: var(--primary-nav-tg-item-line-height); color: var(--ld-color-legacy-lexus-brand-white); cursor: pointer; } .lk_primaryNavMobileMenuItem_O4bvs1Im::before { content: none; } .lk_primaryNavMobileMenuItem_O4bvs1Im + .lk_primaryNavMobileMenuItem_O4bvs1Im { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ margin-top: var(--primary-nav-items-spacing-between); } .lk_ldDecorativeText_S75dYD1R, .lk_backgroundImage_iUfwwfWU { --ld-c-decorative-text-font-size: 130px; /* Custom font size for the decorative letters. */ --ld-c-decorative-text-letter-spacing: 6px; --ld-c-decorative-text-text-stroke: var(--ld-s-color-utility-modifiers-midlight); /* Color for the text-stroke border around the decorative letters to make them stand out from the background. */ } .lk_ldCell_KEaKqaAD, .lk_backgroundImage_iUfwwfWU { --ld-c-cell-min-w: 290px; /* 290px, 18em used for min-w of the cell. */ --ld-c-cell-border-radius: var(--ld-s-border-radius-medium); /* 5px border radius of individual cells. */ } .lk_container_l1nkkADO { container-type: inline-size; } .lk_backgroundImage_iUfwwfWU { --lk-private-letter-spacing-offset: 15cqw; background-clip: text; background-repeat: no-repeat; background-size: cover; background-position: left; line-height: 100%; text-align: center; font-size: calc(var(--ld-c-decorative-text-font-size) + (100cqw + 2 * var(--lk-private-letter-spacing-offset) - 1cqw - var(--ld-c-cell-min-w)) / 2); } .lk_backgroundImage_iUfwwfWU .lk_text_fRTqigaf { margin-left: calc(var(--lk-private-letter-spacing-offset) * -1); margin-right: calc((var(--lk-private-letter-spacing-offset) - 1cqw) * -1); letter-spacing: var(--ld-c-decorative-text-letter-spacing); color: transparent; text-transform: uppercase; -webkit-text-stroke: 1px var(--ld-c-decorative-text-text-stroke); font-weight: var(--ld-font-weights-regular); } .lk_ldLabelAndValues_A7mS9XtE, .lk_label_u3oVLzxP { --ld-c-label-and-values-opacity-default: var(--ld-s-opacity-75); /* 70% opacity. */ } .lk_label_u3oVLzxP { opacity: var(--ld-c-label-and-values-opacity-default); } .lk_ldBox_jbXkDUSn, .lk_container_NDri6OY8 { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldBorderRadius_TsOUO7OQ { --ld-c-border-radius-rounded: var(--ld-s-border-radius-rounded); --ld-c-border-radius-extra-large: var(--ld-s-border-radius-extra-large); --ld-c-border-radius-large: var(--ld-s-border-radius-large); --ld-c-border-radius-extra-medium: var(--ld-s-border-radius-extra-medium); --ld-c-border-radius-medium: var(--ld-s-border-radius-medium); --ld-c-border-radius-small: var(--ld-s-border-radius-small); --ld-c-border-radius-none: var(--ld-s-border-radius-none); } .lk_ldDecorativeCarCard_jyhQbnsJ, .lk_container_NDri6OY8 { --ld-c-decorative-car-card-border: 2px solid; /* Border values for the card. */ --ld-c-decorative-car-card-hover: var(--ld-s-color-utility-modifiers-midlight); /* Background and border colour for the card on hover. */ } .lk_container_NDri6OY8 { width: 100%; border: transparent var(--ld-c-decorative-car-card-border); container-type: inline-size; } .lk_container_NDri6OY8 .lk_mainContent__YMHEyqM { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; } .lk_container_NDri6OY8 .lk_mainContent__YMHEyqM:hover { color: inherit; } .lk_container_NDri6OY8 .lk_mainContent__YMHEyqM:hover .lk_image_nTVeKz56, .lk_container_NDri6OY8 .lk_mainContent__YMHEyqM:focus .lk_image_nTVeKz56 { transform: scale(1.05); } .lk_container_NDri6OY8 .lk_display_Yi_LhLvk { position: relative; justify-content: center; padding-top: 30cqw; } .lk_container_NDri6OY8 .lk_display_Yi_LhLvk .lk_decorativeText_R19oHEZi { position: absolute; inset: 0; overflow: hidden; } .lk_container_NDri6OY8 .lk_display_Yi_LhLvk .lk_image_nTVeKz56 { z-index: 1; width: 100%; transition: transform 500ms ease; } .lk_container_NDri6OY8 .lk_content_LXHMmIgc { padding-top: var(--ld-c-box-pad-static-2xs); } .lk_container_NDri6OY8 .lk_buttons_JWov19sV { padding-top: var(--ld-c-box-pad-static-m); flex-wrap: wrap; } .lk_ldStack_mkr5g3JP, .lk_tabs_Y_5TxLDW { --ld-c-stack-gap-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xl: var(--ld-s-dim-static-xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-l: var(--ld-s-dim-static-l); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-m: var(--ld-s-dim-static-m); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-s: var(--ld-s-dim-static-s); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xs: var(--ld-s-dim-static-xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-none: var(--ld-s-dim-static-none); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldTabs_EPKDoCyP, .lk_tabs_Y_5TxLDW { --ld-c-tabs-border-radius-switcher-frame: 10px; /* The border-radius for the frame around the outlined tab pair which makes up the switcher variant. */ --ld-c-tabs-min-height: 44px; /* Min height of all the tabs. */ --ld-c-tabs-opacity-disabled: 0.5; --ld-c-tabs-opacity-active: 1; /* 100% opacity for both selected and hover or focus states for both variants. */ --ld-c-tabs-opacity-unselected: 0.75; /* Unselected state opacity for both variants. */ --ld-c-tabs-border-outlined-hover-type: inset; --ld-c-tabs-border-outlined-hover-spread: 1px; --ld-c-tabs-border-outlined-hover-blur: 0; --ld-c-tabs-border-outlined-hover-y: 0; --ld-c-tabs-border-outlined-hover-x: 0; --ld-c-tabs-border-outlined-selected-type: inset; --ld-c-tabs-border-outlined-selected-spread: 1px; --ld-c-tabs-border-outlined-selected-blur: 0; --ld-c-tabs-border-outlined-selected-y: 0; --ld-c-tabs-border-outlined-selected-x: 0; --ld-c-tabs-outlined-height: 2px; /* Height of the moving indicator bar on the autolayout version of the outlined tab variant. */ --ld-c-tabs-max-w: var(--ld-s-sz-columns-3col-max-w); /* Max-width for the individual tabs. */ --ld-c-tabs-border-radius-outlined-hover: var(--ld-s-border-radius-small); --ld-c-tabs-border-radius-outlined-selected: var(--ld-s-border-radius-small); --ld-c-tabs-border-outlined-hover-color: var(--ld-s-color-utility-modifiers-midlight); --ld-c-tabs-border-outlined-selected-color: var(--ld-s-color-utility-modifiers-mid); --ld-c-tabs-gradient-fade-offset: var(--ld-s-dim-static-xs); /* Offset to make the area underneath the arrow opaque, so the gradient fade starts after the arrow width. */ --ld-c-tabs-gradient-fade-width: var(--ld-s-dim-static-xl); /* Width of the gradient that is under the arrows. Used to indicate there is hidden content. */ --ld-c-tabs-switcher-selected: var(--ld-s-color-elevation-raised-darker); /* Inset default colour for the selected state of the outlined variant. */ --ld-c-tabs-gradient-canvas-lighter: var(--ld-s-color-canvas-lighter); /* Lighter canvas colour gradient for edge arrows. */ --ld-c-tabs-gradient-canvas-darker: var(--ld-s-color-canvas-darker); /* Darker canvas colour gradient for edge arrows. */ --ld-c-tabs-gradient-canvas-default: var(--ld-s-color-canvas-default); /* Default canvas colour gradient for edge arrows. */ --ld-c-tabs-border-default-underline: 1px solid var(--ld-s-color-accent-primary-disabled); /* 1px underline base for the default tab variant. */ --ld-c-tabs-default-height: var(--ld-s-dim-static-4xs); /* 4px height for the indicator bar underneath the selected default tabs. */ --ld-c-tabs-default-selected: var(--ld-s-color-accent-secondary-default); /* Senkei line, selected state colour for the default variant. */ --ld-c-tabs-outlined-selected: var(--ld-s-color-elevation-raised-darker); /* Inset default colour for the selected state of the outlined variant. */ } .lk_tabs_Y_5TxLDW { display: flex; position: relative; overflow: hidden; } .lk_tabs_Y_5TxLDW[data-focus-visible] * { outline: none; } .lk_tabs_Y_5TxLDW[data-orientation=horizontal] { flex-direction: column; } .lk_tabs_Y_5TxLDW[data-orientation=vertical] { flex-direction: row; gap: var(--ld-c-stack-gap-static-l); } @container (max-width: 776px) { .lk_tabs_Y_5TxLDW[data-orientation=vertical] { flex-direction: column; } } @supports not (container-type: inline-size) { .lk_tabs_Y_5TxLDW { /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 776px) { .lk_tabs_Y_5TxLDW[data-orientation=vertical] { flex-direction: column; } } } .lk_tabListContainer_CiDqodXL { position: relative; } .lk_tabsList_o_h7EGRk { /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-enable csstools/value-no-unknown-custom-properties */ width: 100%; display: flex; gap: var(--ld-c-stack-gap-static-3xs); overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; min-height: var(--ld-c-tabs-min-height); mask-composite: intersect; /* Hide scrollbars in WebKit-based browsers (Chrome, Safari, Opera, and Edge Chromium) */ /* Hide scrollbars in Firefox */ scrollbar-width: none; } .lk_tabsList_o_h7EGRk.lk_overflowLeft_JAaaQPWC { mask-image: linear-gradient(to right, transparent var(--ld-c-tabs-gradient-fade-offset), var(--lk-tabs-gradient-fade, var(--lk-surface-color)) var(--ld-c-tabs-gradient-fade-width)); } .lk_tabsList_o_h7EGRk.lk_overflowRight_x8OZJ2oE { mask-image: linear-gradient(to left, transparent var(--ld-c-tabs-gradient-fade-offset), var(--lk-tabs-gradient-fade, var(--lk-surface-color)) var(--ld-c-tabs-gradient-fade-width)); } .lk_tabsList_o_h7EGRk.lk_overflowBoth_Tf4Eqj4q { mask-image: linear-gradient(to left, transparent var(--ld-c-tabs-gradient-fade-offset), var(--lk-tabs-gradient-fade, var(--lk-surface-color)) var(--ld-c-tabs-gradient-fade-width)), linear-gradient(to right, transparent var(--ld-c-tabs-gradient-fade-offset), var(--lk-tabs-gradient-fade, var(--lk-surface-color)) var(--ld-c-tabs-gradient-fade-width)); } .lk_tabsList_o_h7EGRk::-webkit-scrollbar { display: none; } .lk_tabsList_o_h7EGRk[data-orientation=vertical] { flex-direction: column; } @container (max-width: 776px) { .lk_tabsList_o_h7EGRk[data-orientation=vertical] { flex-direction: row; } .lk_tabsList_o_h7EGRk .lk_truncation_nVr_Yfvq { width: auto; max-width: var(--ld-c-tabs-max-w); } } @supports not (container-type: inline-size) { .lk_tabsList_o_h7EGRk { /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 776px) { .lk_tabsList_o_h7EGRk[data-orientation=vertical] { flex-direction: row; } .lk_tabsList_o_h7EGRk .lk_truncation_nVr_Yfvq { width: auto; max-width: var(--ld-c-tabs-max-w); } } } .lk_outlinedTabsList_K5WuDKYk { width: auto; } .lk_defaultTabsList_j8Aahg94 { border-bottom: var(--ld-c-tabs-border-default-underline); } .lk_outlinedTabsTab_LCk2chgZ, .lk_defaultTabsTab_aU46T49p { white-space: nowrap; opacity: var(--ld-c-tabs-opacity-unselected); scroll-snap-align: center; transition: border-bottom 0.3s ease; position: relative; cursor: pointer; } .lk_outlinedTabsTab_LCk2chgZ:focus-visible, .lk_defaultTabsTab_aU46T49p:focus-visible, .lk_outlinedTabsTab_LCk2chgZ:focus, .lk_defaultTabsTab_aU46T49p:focus { outline: none; } [data-focus-visible].lk_outlinedTabsTab_LCk2chgZ .lk_processedFocusOutline_eSTAXaY8, [data-focus-visible].lk_defaultTabsTab_aU46T49p .lk_processedFocusOutline_eSTAXaY8 { outline: 1px dashed; } [data-hovered].lk_outlinedTabsTab_LCk2chgZ, [data-hovered].lk_defaultTabsTab_aU46T49p, [data-selected].lk_outlinedTabsTab_LCk2chgZ, [data-selected].lk_defaultTabsTab_aU46T49p { opacity: var(--ld-c-tabs-opacity-active); } [data-disabled].lk_outlinedTabsTab_LCk2chgZ, [data-disabled].lk_defaultTabsTab_aU46T49p { opacity: var(--ld-c-tabs-opacity-disabled); cursor: not-allowed; } .lk_outlinedTabsTab_LCk2chgZ:not([data-focus-visible]) .lk_processedFocusOutline_eSTAXaY8, .lk_defaultTabsTab_aU46T49p:not([data-focus-visible]) .lk_processedFocusOutline_eSTAXaY8 { outline: none; } .lk_outlinedTabsTab_LCk2chgZ .lk_processedFocusOutline_eSTAXaY8, .lk_defaultTabsTab_aU46T49p .lk_processedFocusOutline_eSTAXaY8 { padding: var(--ld-c-stack-gap-static-2xs) var(--ld-c-stack-gap-static-xs); } .lk_defaultTabsTab_aU46T49p::after { content: ""; width: 0%; display: block; height: var(--ld-c-tabs-default-height); background-color: var(--ld-s-color-accent-secondary-default); transition: width 0.2s ease, transform 0.2s ease, opacity 0.2s ease; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; border-radius: 0; opacity: 0; } .lk_defaultTabsTab_aU46T49p[data-selected]::after { width: 100%; left: 50%; transform: translateX(-50%); opacity: 1; } .lk_outlinedTabsTab_LCk2chgZ[data-hovered] { border-radius: var(--ld-c-tabs-border-radius-outlined-hover); box-shadow: var(--ld-c-tabs-border-outlined-hover-type) var(--ld-c-tabs-border-outlined-hover-x) var(--ld-c-tabs-border-outlined-hover-y) var(--ld-c-tabs-border-outlined-hover-blur) var(--ld-c-tabs-border-outlined-hover-spread) var(--ld-c-tabs-border-outlined-hover-color); } .lk_outlinedTabsTab_LCk2chgZ[data-selected] { background-color: var(--ld-c-tabs-outlined-selected); border-radius: var(--ld-c-tabs-border-radius-outlined-selected); box-shadow: var(--ld-c-tabs-border-outlined-selected-type) var(--ld-c-tabs-border-outlined-selected-x) var(--ld-c-tabs-border-outlined-selected-y) var(--ld-c-tabs-border-outlined-selected-blur) var(--ld-c-tabs-border-outlined-selected-spread) var(--ld-c-tabs-border-outlined-selected-color); } .lk_truncation_nVr_Yfvq { overflow: hidden; text-overflow: ellipsis; width: var(--ld-c-tabs-max-w); } .lk_tabPanel_XH3uM8bV:not([data-focused]):not([data-focus-visible]) { outline: none; } .lk_isTabPanelHidden_TxA4QDJp { display: none; } .lk_rightArrow_K8y_OCVs, .lk_leftArrow_CJVqwIAH { position: absolute; z-index: 1; top: 0; bottom: 0; display: flex; align-items: center; cursor: pointer; } .lk_leftArrow_CJVqwIAH { left: 0; } .lk_rightArrow_K8y_OCVs { right: 0; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldContainer_UZAkhR55 { --ld-c-container-width-3col-max-w: var(--ld-s-sz-columns-3col-max-w); /* Max-width for 3 column grid layout. */ --ld-c-container-width-10col-max-w: var(--ld-s-sz-columns-10col-max-w); /* Max-width calcualted for 10 col grid layout. */ --ld-c-container-width-12col-max-w: var(--ld-s-sz-columns-12col-max-w); --ld-c-container-width-12col-min-w: var(--ld-s-sz-columns-12col-min-w); --ld-c-container-width-8col-max-w: var(--ld-s-sz-columns-8col-max-w); --ld-c-container-width-8col-min-w: var(--ld-s-sz-columns-8col-min-w); --ld-c-container-width-6col-max-w: var(--ld-s-sz-columns-6col-max-w); --ld-c-container-width-6col-min-w: var(--ld-s-sz-columns-6col-min-w); --ld-c-container-width-4col-max-w: var(--ld-s-sz-columns-4col-max-w); --ld-c-container-width-4col-min-w: var(--ld-s-sz-columns-4col-min-w); --ld-c-container-width-full-width-max-w: var(--ld-s-sz-columns-full-width-max-w); --ld-c-container-width-full-width-min-w: var(--ld-s-sz-columns-full-width-min-w); } .lk_ldMenu_KQuT7WPj, .lk_container_lJthfNlw { --ld-c-menu-card-min-w: 274px; /* Min-w for the decorative car cards. This min-w allows cards to fit on a 320px screenwidth with margin. */ --ld-c-menu-card-max-w: 376px; /* Max-w for these cards when in the car model menu tab. Based off the mobile 4-col max-w value. */ --ld-c-menu-filter-transition-duration: 200; /* Transition duration value for an opacity transition when swapping tabs in the car model menu. */ } .lk_container_lJthfNlw { --lk-private-legacy-filter-menu-transition-duration: 200ms; --lk-tabs-gradient-fade: var(--ld-color-legacy-deepblue-light); container-type: inline-size; } .lk_main_mGu3fI0e { width: 100%; } .lk_carContainers_OzBadXeq { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ld-c-menu-card-min-w), 100%), 1fr)); grid-gap: var(--ld-c-stack-gap-static-m); } .lk_carContainer_qyZLvtum { max-width: var(--ld-c-menu-card-max-w); } .lk_filterDesktop_qEnbZjYB { display: none; } @container (min-width: 576px) { .lk_filterDesktop_qEnbZjYB { display: block; } } @supports not (container-type: inline-size) { .lk_filterDesktop_qEnbZjYB { /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 576px) { .lk_filterDesktop_qEnbZjYB { display: block; } } } @container (min-width: 576px) { .lk_filterContainerMobile_QeKB6YXm { display: none; } } @supports not (container-type: inline-size) { .lk_filterContainerMobile_QeKB6YXm { /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 576px) { .lk_filterContainerMobile_QeKB6YXm { display: none; } } } .lk_button_y_sZNMK_ { width: 100%; } .lk_linkReset_KwgtvNX1 { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; } .lk_linkReset_KwgtvNX1:hover { color: inherit; } .lk_bodyTypeHeading_OoQulDv8:not(:empty) { margin-bottom: 0; } .lk_bodyTypeCta_hVns1ea6:not(:empty) { text-transform: uppercase; letter-spacing: 0.12em; } .lk_filterModal_iOuNatvr { --filter-modal-display: flex; --filter-padding-top: 104px; --filter-padding: 24px; display: none; height: 100%; flex-direction: column; justify-content: space-between; z-index: 10; position: fixed; margin: unset; padding: var(--filter-padding-top) var(--filter-padding) var(--filter-padding); inset: 0; } .lk_filterModalEnter_K3e_SKMC { opacity: 0; visibility: visible; transform: translateX(100%); display: var(--filter-modal-display); } .lk_filterModalEnterActive_fSgg_A9v { opacity: 1; transition: all var(--lk-private-legacy-filter-menu-transition-duration) ease-in-out; visibility: visible; transform: translateX(0); display: var(--filter-modal-display); } .lk_filterModalEnterDone_m7uixOAg { opacity: 1; display: var(--filter-modal-display); } .lk_filterModalExit_X4FmiS2y { opacity: 1; display: var(--filter-modal-display); } .lk_filterModalExitActive_W2uwS8AH { display: var(--filter-modal-display); opacity: 0; transition: all var(--lk-private-legacy-filter-menu-transition-duration); } .lk_filterModalExitDone_J0uusLlR { display: none; } .lk_vehicleEnter_IR724JgT { opacity: 0.6; display: block; } .lk_vehicleEnterActive_bIBMsPeC { opacity: 1; transition: opacity calc(var(--ld-c-menu-filter-transition-duration) * 1ms) ease-out; } .lk_vehicleEnterDone_zT_e2eIw { opacity: 1; } .lk_vehicleExit_ZlbC6j7j { opacity: 1; } .lk_vehicleExitActive_EK34r4gt { opacity: 0.6; transition: opacity calc(var(--ld-c-menu-filter-transition-duration) * 1ms) ease-out; } .lk_vehicleExitDone_QvFLwhGy { opacity: 0; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_navbar_rL1_dqav { position: relative; z-index: 1; display: flex; align-items: stretch; } .lk_navbar_rL1_dqav::after { content: ""; display: block; position: absolute; top: auto; left: 0; right: 0; bottom: 0; opacity: 0.5; border-bottom: 1px solid var(--ld-color-legacy-lexus-brand-white); } .lk_navbarContainer_el4jf4l9 { flex-grow: 1; display: flex; align-items: stretch; padding-left: var(--primary-nav-modal-container-padding); padding-right: 0; } .lk_navbarContainer_el4jf4l9.lk_enablePadding_VZttoD5m { padding-right: calc(var(--primary-nav-modal-container-padding) - var(--primary-nav-navbar-item-regular-padding-horizontal-last)); } .lk_navbarHeaderContainer_Sq2O99bb { align-self: center; flex-grow: 1; display: flex; height: 100%; align-items: center; } .lk_navbarItemsContainer_OVsQ6xv_ { position: relative; display: flex; flex-direction: row; align-items: stretch; height: var(--primary-nav-navbar-height); z-index: 1; } .lk_navbarFooterContainer_KJ_3GATu { display: flex; flex-direction: row; align-items: stretch; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_navbarItemAuthenticated_Hk5QAe1E { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; position: relative; display: flex; width: var(--primary-nav-navbar-item-special-max-width); flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: var(--primary-nav-navbar-item-special-background-transition); /*stylelint cant read interpolated values so thinks this is an error */ } .lk_navbarItemAuthenticated_Hk5QAe1E:hover { color: inherit; } .lk_navbarItemAuthenticated_Hk5QAe1E::before { content: ""; position: absolute; top: 0; left: 0; bottom: 1px; opacity: 0.5; border-left: var(--primary-nav-navbar-item-special-border-left); } .lk_navbarItemAuthenticated_Hk5QAe1E:hover { background: var(--primary-nav-navbar-item-special-background-hover); } @media (min-width: 1024px) { .lk_navbarItemAuthenticated_Hk5QAe1E.lk_isActive_iLUGviYt { background-color: var(--primary-nav-navbar-item-special-background-active); } } .lk_label_RuRPQON8 { width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: uppercase; background-color: var(--primary-nav-navbar-item-authenticated-label-background); color: var(--ld-color-legacy-deepblue-dark); font-size: 15px; font-weight: var(--ld-font-weights-bold); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldBox_RkRXfLyn { --ld-c-box-pad-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Horizontal or Vertical Padding. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-box-pad-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xl: var(--ld-s-dim-static-xl); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-l: var(--ld-s-dim-static-l); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-m: var(--ld-s-dim-static-m); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-s: var(--ld-s-dim-static-s); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-xs: var(--ld-s-dim-static-xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Pad token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-box-pad-static-none: var(--ld-s-dim-static-none); /* This is a static Padding token. Usage: Apply to Horizontal or Vertical Padding. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_navbarItemSpecialContainer_qJ_zrihz { appearance: none; padding: 0; border: 0; background: none; outline: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; position: relative; display: flex; max-width: var(--primary-nav-navbar-item-special-max-width); flex-direction: column; justify-content: center; align-items: center; text-align: center; cursor: pointer; transition: var(--primary-nav-navbar-item-special-background-transition); /*stylelint cant read interpolated values so thinks this is an error */ } .lk_navbarItemSpecialContainer_qJ_zrihz:hover { color: inherit; } .lk_navbarItemSpecialContainer_qJ_zrihz::before { content: ""; position: absolute; top: 0; left: 0; bottom: 1px; opacity: 0.5; border-left: var(--primary-nav-navbar-item-special-border-left); } .lk_navbarItemSpecialContainer_qJ_zrihz:hover { background: var(--primary-nav-navbar-item-special-background-hover); } @media (min-width: 1024px) { .lk_navbarItemSpecialContainer_qJ_zrihz.lk_isActive_afAZVNgo { background: var(--primary-nav-navbar-item-special-background-active); color: var(--ld-color-legacy-deepblue-darkest); } .lk_navbarItemSpecialContainer_qJ_zrihz.lk_isActive_afAZVNgo .lk_icon_vaXwJghv, .lk_navbarItemSpecialContainer_qJ_zrihz.lk_isActive_afAZVNgo .lk_label_CRt2wGx1 { color: var(--ld-color-legacy-deepblue-darkest); } } .lk_navbarItemSpecial_ckLT1dQU { height: 100%; } .lk_icon_vaXwJghv { display: flex; } .lk_icon_vaXwJghv + .lk_label_CRt2wGx1 { margin-top: 4px; } .lk_label_CRt2wGx1 { font-size: var(--primary-nav-tg-navbar-item-special-font-size); line-height: var(--primary-nav-tg-navbar-item-special-line-height); letter-spacing: var(--primary-nav-tg-navbar-item-special-letter-spacing); text-transform: var(--primary-nav-tg-navbar-item-special-text-transform); font-weight: var(--primary-nav-tg-navbar-item-special-font-weight); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldModalSheet_qEEDU_UP, .lk_dialogContainer_gLZqvFWp, .lk_blur_czOcNb8C, .lk_shadow__uV1iNU7, .lk_blurShadow_QJy7Ig4H { --ld-c-modal-sheet-transition-duration: 400ms; /* 400ms duration time for the modal sheet slide in transition */ --ld-c-modal-sheet-box-shadow-bottom-type: dropShadow; --ld-c-modal-sheet-box-shadow-bottom-spread: 0; --ld-c-modal-sheet-box-shadow-bottom-blur: 16px; --ld-c-modal-sheet-box-shadow-bottom-y: -8px; --ld-c-modal-sheet-box-shadow-bottom-x: 0; --ld-c-modal-sheet-box-shadow-right-type: dropShadow; --ld-c-modal-sheet-box-shadow-right-spread: 0; --ld-c-modal-sheet-box-shadow-right-blur: 16px; --ld-c-modal-sheet-box-shadow-right-y: 0; --ld-c-modal-sheet-box-shadow-right-x: -8px; --ld-c-modal-sheet-blur-default: 3px; --ld-c-modal-sheet-border: 1px solid var(--ld-s-color-utility-modifiers-midlight); /* Border values for the exposed edge of the modal sheet. */ --ld-c-modal-sheet-bottom-v-pad: var(--ld-s-dim-scaled-s-xxl); /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-c-modal-sheet-box-shadow-bottom-color: var(--ld-s-color-common-opacity-black-lightest); --ld-c-modal-sheet-box-shadow-right-color: var(--ld-s-color-common-opacity-black-lightest); --ld-c-modal-sheet-background-darker: var(--ld-s-color-elevation-raised-darker); --ld-c-modal-sheet-background-lighter: var(--ld-s-color-elevation-raised-lighter); --ld-c-modal-sheet-background-default: var(--ld-s-color-elevation-raised-default); --ld-c-modal-sheet-shadow-default: var(--ld-s-color-common-opacity-true-black-light); } @keyframes lk_lk-private-slideInFromRight_DCHmoPDp { from { transform: translateX(100%); opacity: 0; visibility: hidden; } to { transform: translateX(0); opacity: 1; visibility: visible; } } @keyframes lk_lk-private-slideInFromBottom_HIbf7P8e { from { transform: translateY(100%); opacity: 0; visibility: hidden; } to { transform: translateY(0); opacity: 1; visibility: visible; } } .lk_dialogContainer_gLZqvFWp { position: fixed; width: 100%; bottom: 0; max-height: 50dvh; z-index: var(--lk-modal-z-index); outline: none; transition: none; border-top: var(--ld-c-modal-sheet-border); } .lk_dialogContainer_gLZqvFWp.lk_boxShadow_XU52Uhhx { box-shadow: var(--ld-c-modal-sheet-box-shadow-bottom-x) var(--ld-c-modal-sheet-box-shadow-bottom-y) var(--ld-c-modal-sheet-box-shadow-bottom-blur) var(--ld-c-modal-sheet-box-shadow-bottom-spread) var(--ld-c-modal-sheet-box-shadow-bottom-color); } .lk_reserveSpace_H70_pYNA { position: sticky; } .lk_rightVariant_V3EQSig0 { position: fixed; overflow: auto; max-width: 100%; max-height: 100dvh; height: 100%; width: auto; top: 0; right: 0; border-top-style: none; border-left: var(--ld-c-modal-sheet-border); } .lk_rightVariant_V3EQSig0.lk_boxShadow_XU52Uhhx { box-shadow: var(--ld-c-modal-sheet-box-shadow-right-x) var(--ld-c-modal-sheet-box-shadow-right-y) var(--ld-c-modal-sheet-box-shadow-right-blur) var(--ld-c-modal-sheet-box-shadow-right-spread) var(--ld-c-modal-sheet-box-shadow-right-color); } .lk_overlay__FCrz83r { position: fixed; inset: 0; container-type: size; width: 100vw; height: 100dvh; z-index: var(--lk-modal-z-index); } .lk_blur_czOcNb8C { backdrop-filter: blur(var(--ld-c-modal-sheet-blur-default)); } .lk_shadow__uV1iNU7 { background: var(--ld-c-modal-sheet-shadow-default); } .lk_blurShadow_QJy7Ig4H { background: var(--ld-c-modal-sheet-shadow-default); backdrop-filter: blur(var(--ld-c-modal-sheet-blur-default)); } .lk_slideIn_XQIUuVrb { opacity: 0; visibility: hidden; } .lk_slideIn_XQIUuVrb.lk_rightAnimation_GRXlR29P { transform: translateX(100%); animation: lk_lk-private-slideInFromRight_DCHmoPDp 500ms ease-out forwards; } .lk_slideIn_XQIUuVrb.lk_bottomAnimation_jwPPTRxr { transform: translateY(100%); animation: lk_lk-private-slideInFromBottom_HIbf7P8e 500ms ease-out forwards; } .lk_globalFooter_w4axxJhJ { --global-footer-mobile-padding: 30px 0 40px; --global-footer-desktop-margin-top: 100px; --global-footer-desktop-padding: 40px 0; background: var(--ld-color-legacy-deepblue-dark); color: var(--ld-color-legacy-smoke-dark); padding: var(--global-footer-mobile-padding); display: flex; justify-content: center; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_globalFooter_w4axxJhJ { padding: var(--global-footer-desktop-padding); } } .lk_globalFooterBody_Prcyuv5a { --global-footer-max-width: 1280px; --global-footer-wrap-side-margin: 0 40px; display: flex; justify-content: space-between; flex-direction: column; text-align: center; width: 100%; max-width: var(--global-footer-max-width); margin: var(--global-footer-wrap-side-margin); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_globalFooterBody_Prcyuv5a { flex-direction: row; align-items: center; } } .lk_globalFooterBlock_WrizQgTy { --global-footer-block-line-height: 32px; line-height: var(--global-footer-block-line-height); } .lk_globalFooterLink_PuP9CDGe { --global-footer-link-margin-left: 30px; color: var(--ld-color-legacy-smoke-dark); display: block; text-decoration: none; letter-spacing: 0; /*stylelint cant read interpolated values so thinks this is an error */ } .lk_globalFooterLink_PuP9CDGe:hover { color: unset; } @media (min-width: 1024px) { .lk_globalFooterLink_PuP9CDGe { margin-top: 0; display: inline-block; --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; } .lk_globalFooterLink_PuP9CDGe::after { content: ""; display: block; position: absolute; border-bottom: 2px solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(-2px); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; } .lk_globalFooterLink_PuP9CDGe:hover::after { max-width: 100%; opacity: 1; } } .lk_globalFooterLink_PuP9CDGe + .lk_globalFooterLink_PuP9CDGe { /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_globalFooterLink_PuP9CDGe + .lk_globalFooterLink_PuP9CDGe { margin-top: 0; margin-left: var(--global-footer-link-margin-left); } } .lk_footer_FjmX2zDm { display: flex; justify-content: center; padding: 100px 0; color: var(--ld-color-legacy-smoke-default); /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_footer_FjmX2zDm { padding: 100px 0 0; } } .lk_footerWrap_yLsM3tHQ { --footer-max-width: 1280px; --footer-wrap-side-margin: 0 40px; width: 100%; display: flex; max-width: var(--footer-max-width); margin: var(--footer-wrap-side-margin); /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_footerWrap_yLsM3tHQ { flex-direction: column; width: 100%; padding: 0 20px; margin: 0; } } .lk_footerColumn_a9Pyu5Pi { width: 100%; padding: 0 10px; } .lk_footerBlock_KF4xAADH { overflow: hidden; /*stylelint cant read interpolated values so thinks this is an error */ /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_footerBlock_KF4xAADH { margin-bottom: 32px; } } @media (max-width: 1023.98px) { .lk_footerBlock_KF4xAADH:not(.lk_isPhone_Yd_FPcl0) { border-top: 1px solid var(--ld-color-legacy-deepblue-light); } } .lk_footerLinkGroup_LNCQbGvi { max-height: 1800px; transition: 0.7s ease-in-out; /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_footerLinkGroup_LNCQbGvi { max-height: 0; overflow: hidden; } } .lk_footerLinkGroupExpanded_sU4npuFl { max-height: 1080px; } .lk_divider_RVLDQmoU { /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_divider_RVLDQmoU { display: block; height: 10px; } } .lk_footerTitle_F9PrOv90 { margin-bottom: 24px; position: relative; color: var(--ld-color-legacy-smoke-default); /*stylelint cant read interpolated values so thinks this is an error */ } .lk_footerTitle_F9PrOv90 h5 { color: var(--ld-color-legacy-smoke-default); } @media (max-width: 1023.98px) { .lk_footerTitle_F9PrOv90 { margin: 0; } .lk_footerTitle_F9PrOv90 h5 { line-height: 48px; } } .lk_footerTitleChevron__lZFXGtp { display: none; fill: var(--ld-color-legacy-smoke-default); /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_footerTitleChevron__lZFXGtp { display: inline; position: absolute; right: 8px; top: 50%; transform: rotate(0) translate(0, -50%); transform-origin: top center; transition: transform 0.3s; cursor: pointer; } } .lk_footerTitleChevronExpanded_BL51QGC7 { transform: rotate(-180deg) translate(0, -50%); } .lk_linkWrapper_m1wgAcPm:last-child { /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_linkWrapper_m1wgAcPm:last-child { margin-bottom: 16px; } } .lk_telWrapper_LFKgxjut { display: flex; margin-bottom: 0; /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_telWrapper_LFKgxjut { margin-bottom: 20px; } } .lk_footerTelIcon_o9eqH9UN { fill: var(--ld-color-legacy-smoke-dark); } .lk_footerLink_xgdmV0ZG { display: inline-block; padding: 0 8px; color: var(--ld-color-legacy-smoke-dark); text-decoration: none; letter-spacing: 0; margin-bottom: 10px; font-size: var(--ld-s-typography-body1-font-size); line-height: var(--ld-s-typography-body1-line-height); /*stylelint cant read interpolated values so thinks this is an error */ } .lk_footerLink_xgdmV0ZG:hover { color: unset; } .lk_footerLink_xgdmV0ZG::first-letter { text-transform: capitalize; } @media (min-width: 1024px) { .lk_footerLink_xgdmV0ZG { padding: 0; --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; } .lk_footerLink_xgdmV0ZG::after { content: ""; display: block; position: absolute; border-bottom: 2px solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(-2px); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; } .lk_footerLink_xgdmV0ZG:hover::after { max-width: 100%; opacity: 1; } } .lk_phoneLink_llLwanm2 { margin: 0; /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_phoneLink_llLwanm2 { text-decoration: underline; } .lk_phoneLink_llLwanm2:hover { text-decoration: none; } } .lk_isPhone_Yd_FPcl0 { /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_isPhone_Yd_FPcl0 { order: 1; } } .lk_isPhone_Yd_FPcl0 .lk_footerLinkGroup_LNCQbGvi { max-height: none; } .lk_socialMedia_H6QljsOK { width: 100%; margin: 0; text-align: left; background: none; padding-top: 0; order: 4; /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1023.98px) { .lk_socialMedia_H6QljsOK { background: var(--ld-color-legacy-deepblue-dark); padding-top: 40px; margin: 40px -30px 0; text-align: center; padding-left: 16px; float: none; width: auto; } } .lk_socialMediaIconLink_F2Pfpavi { line-height: 30px; display: inline-block; margin-right: 20px; cursor: pointer; --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; } .lk_socialMediaIconLink_F2Pfpavi::after { content: ""; display: block; position: absolute; border-bottom: 2px solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(-2px); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; } .lk_socialMediaIconLink_F2Pfpavi:hover::after { max-width: 100%; opacity: 1; } .lk_socialMediaIconLink_F2Pfpavi svg { fill: var(--ld-color-legacy-smoke-default); } .lk_icon_L49xrcet { display: inline-flex; align-self: center; padding-right: 10px; } .lk_ldVerticalScroll_h73SRyu5, .lk_wrapper_YVJbiiZl { --ld-c-vertical-scroll-desktop-padding: var(--ld-s-dim-static-xs); /* Right padding only to be applied to destkop, so that vertical-scroll is not too close to the edge of the screen. */ --ld-c-vertical-scroll-bar-area-width: var(--ld-s-dim-static-xl); --ld-c-vertical-scroll-bar-active: var(--ld-s-color-accent-secondary-default); /* Active background colour for current vertical-scroll bar. */ --ld-c-vertical-scroll-bar-default: var(--ld-s-color-common-white); /* White background for the unselected vertical-scroll bars. */ --ld-c-vertical-scroll-bar-width: var(--ld-s-dim-static-4xs); /* The width of the vertical-scroll bars. */ --ld-c-vertical-scroll-bar-height: var(--ld-s-dim-static-l); /* Height of the vertical scroll bars. */ } .lk_htmlMobileMandatory_mKobO8Wl { scroll-snap-type: y mandatory; } .lk_htmlMobileProximity_KHqwzQuo { scroll-snap-type: y proximity; } .lk_bodyMobile_cJOzyH1I { scroll-snap-align: start; } /*stylelint cant read interpolated values so thinks this is an error */ @media (min-width: 1024px) { .lk_htmlDesktopMandatory_CldaCp1y { scroll-snap-type: y mandatory; } .lk_htmlDesktopProximity_vcwLXiWp { scroll-snap-type: y proximity; } .lk_bodyDesktop_cCC0oTBk { scroll-snap-align: start; } } .lk_wrapper_YVJbiiZl { position: relative; line-height: 1; } .lk_slide_PFVgiq8T { overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; } .lk_nav_axK3E6ED { align-items: center; display: flex; flex-direction: column; justify-content: center; position: fixed; right: 0; top: 50%; transform: translateY(-50%); transition: all 0.5s ease; z-index: 1; /*stylelint cant read interpolated values so thinks this is an error */ /*stylelint cant read interpolated values so thinks this is an error */ } .lk_nav_axK3E6ED.lk_navHidden_akhQponn { opacity: 0; visibility: hidden; pointer-events: none; } @media (min-width: 1024px) { .lk_nav_axK3E6ED { right: var(--ld-c-vertical-scroll-desktop-padding, 0); } } @media (max-width: 1023.98px) { .lk_nav_axK3E6ED.lk_navHiddenMobile_XETApajr { opacity: 0; visibility: hidden; pointer-events: none; } } .lk_navItemButton_YH9d4T3I { align-items: center; cursor: pointer; display: var(--lk-p-vertical-scroll-indicator-display, flex); justify-content: center; width: var(--ld-c-vertical-scroll-bar-area-width); } .lk_navItemButton_YH9d4T3I .lk_navItemBar_PkyaYTjf { display: block; height: var(--ld-c-vertical-scroll-bar-height); width: var(--ld-c-vertical-scroll-bar-width); position: relative; overflow: hidden; background-color: var(--ld-c-vertical-scroll-bar-default); } .lk_navItemButton_YH9d4T3I .lk_navItemBar_PkyaYTjf::before { content: ""; position: absolute; top: -5%; bottom: -5%; left: -1px; right: -1px; background-color: var(--ld-c-vertical-scroll-bar-active); transform: translateY(calc(var(--lk-p-vertical-scroll-indicator-progress, -1) * 100%)); } .lk_scrollIndicator_yeFto1FX { color: var(--ld-s-color-foreground-default); transition: all 0.5s ease 0.5s; } .lk_scrollIndicator_yeFto1FX.lk_scrollIndicatorHidden_Zv10AisY { opacity: 0; visibility: hidden; pointer-events: none; } .lk_portrait_CNhNmdz1 { display: none; } @container (orientation: portrait) { .lk_portrait_CNhNmdz1 { display: contents; } } @supports not (container-type: size) { .lk_portrait_CNhNmdz1 { /*stylelint cant read interpolated values so thinks this is an error */ } @media (orientation: portrait) { .lk_portrait_CNhNmdz1 { display: contents; } } } .lk_landscape_Dg2D4Vap { display: none; } @container (orientation: landscape) { .lk_landscape_Dg2D4Vap { display: contents; } } @supports not (container-type: size) { .lk_landscape_Dg2D4Vap { /*stylelint cant read interpolated values so thinks this is an error */ } @media (orientation: landscape) { .lk_landscape_Dg2D4Vap { display: contents; } } } .lk_landscapeDefault_T9AuVySi, .lk_portraitDefault_oQpbaBjy, .lk_all__ebpHdbS { display: contents; } @container (orientation: landscape) { .lk_portraitDefault_oQpbaBjy { display: none; } } @supports not (container-type: size) { /*stylelint cant read interpolated values so thinks this is an error */ @media (orientation: landscape) { .lk_portraitDefault_oQpbaBjy { display: none; } } } @container (orientation: portrait) { .lk_landscapeDefault_T9AuVySi { display: none; } } @supports not (container-type: size) { /*stylelint cant read interpolated values so thinks this is an error */ @media (orientation: portrait) { .lk_landscapeDefault_T9AuVySi { display: none; } } } @keyframes lk_slideLeft_IntEagqn { 0% { transform: translateX(-30px); } 100% { transform: translateX(0); } } @keyframes lk_slideRight_KDrlgFh2 { 0% { transform: translateX(30px); } 100% { transform: translateX(0); } } .lk_wrapper_CjF1IEQY { display: block; position: relative; transition: all 0.5s ease; } .lk_fade_t4u8hktc { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1); } .lk_fadeVisible_OzHydqal { opacity: 1; } .lk_fadeSlideInLeft_beLc6Yjv { opacity: 0; transform: translateX(-30px); transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1); } .lk_fadeSlideInLeftVisible_qCgWOfaN { opacity: 1; transform: none; } .lk_fadeSlideInRight_Fl94SzXf { opacity: 0; transform: translateX(30px); transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1); } .lk_fadeSlideInRightVisible_MJecZOvt { opacity: 1; transform: none; } .lk_aspect_mS89Uppq .lk_videoOrImage_cIaE5E4U, .lk_aspect_mS89Uppq .lk_container_DgE7vGMB { position: absolute; inset: 0; } .lk_tooltipContainer_EPVgLz3v, .lk_contentInner_MFgMaQEv { justify-self: center; } .lk_fullSize_vsPFHfOp, .lk_container_DgE7vGMB, .lk_dynamicMedia_rmi4krLj { height: 100%; width: 100%; } .lk_dynamicMedia_rmi4krLj { --hero-content-wrapper-max-width: 1360px; --hero-content-wrapper-padding: 30px; --hero-content-wrapper-padding-desktop: 60px; } .lk_dynamicMedia_rmi4krLj:not(.lk_aspect_mS89Uppq) { min-height: var(--dynamic-media-min-height-mobile, 0); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_dynamicMedia_rmi4krLj:not(.lk_aspect_mS89Uppq) { min-height: var(--dynamic-media-min-height-desktop, 0); } } .lk_container_DgE7vGMB { container-type: size; display: flex; flex-direction: column; } .lk_aspect_mS89Uppq { overflow: hidden; position: relative; height: 0; /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ padding-top: var(--dynamic-media-aspect-ratio); } .lk_videoOrImage_cIaE5E4U { width: 100%; height: 100%; overflow: hidden; } .lk_dynamicMedia_rmi4krLj:not(.lk_aspect_mS89Uppq) .lk_videoOrImage_cIaE5E4U { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ min-height: var(--dynamic-media-min-height-mobile, 0); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_dynamicMedia_rmi4krLj:not(.lk_aspect_mS89Uppq) .lk_videoOrImage_cIaE5E4U { /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */ min-height: var(--dynamic-media-min-height-desktop, 0); } } .lk_contentInner_MFgMaQEv { width: 100%; height: 100%; color: var(--ld-s-color-common-white); display: flex; pointer-events: auto; } .lk_tooltipContainer_EPVgLz3v { max-width: var(--ld-s-sz-columns-12col-max-w); padding: var(--ld-s-dim-scaled-less); /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_tooltipContainer_EPVgLz3v { padding: var(--ld-s-dim-scaled-even-more); } } .lk_footer_FsuM5viD { z-index: 1; } .lk_videoController_dHoW9p1K { margin-top: auto; } .lk_videoOrImage_vO23yRBn { --grid-max-width: 1360px; --grid-hor-padding-desk: 48px; --grid-hor-padding-mobile: 24px; position: relative; } .lk_videoOrImage_vO23yRBn.lk_static_aA4QXKbM { position: static; } .lk_videoOrImage_vO23yRBn > * { position: absolute; inset: 0; } .lk_video_VbUyr5yB { background-color: transparent; } .lk_layers_Iwhz_nHv { position: relative; display: grid; grid-template-areas: "layers"; } .lk_layers_Iwhz_nHv > * { grid-area: layers; display: flex; height: 100%; /* explicit z-index to ensure that browsers do not apply their priorities and we get priority matched to the order of children */ z-index: 0; } .lk_layers_Iwhz_nHv :where(img, video) { object-fit: cover; width: 100%; height: 100%; object-position: 50% 50%; } .lk_ldShadow_iXbgfgfS, .lk_shadow_MBAvt_Vf { --ld-c-shadow-base: var(--ld-s-color-common-true-black); --ld-c-shadow-darker: var(--ld-s-color-common-opacity-true-black-darkest); --ld-c-shadow-default: var(--ld-s-color-common-opacity-true-black-darker); } .lk_shadow_MBAvt_Vf { /* stylelint-disable csstools/value-no-unknown-custom-properties */ background-image: linear-gradient(to var(--lk-private-shadow-overlay), var(--lk-private-shadow-variant), transparent var(--lk-private-shadow-overlay-stop)); } .lk_solid_iC635g4i { background-image: none; background-color: var(--lk-private-shadow-variant); } .lk_bannerCollapsed_JVjb_ANL { overflow: hidden; display: flex; position: fixed; padding-left: 14px; left: 20px; bottom: 12px; z-index: 100; width: 46px; transition: width 0.2s; align-items: center; } .lk_bannerCollapsed_JVjb_ANL .lk_body_RrY1goXd { display: flex; align-items: center; } .lk_bannerCollapsed_JVjb_ANL .lk_content_KrArnFqv { font-size: 12px; font-weight: 700; line-height: 15px; margin: 4px 14px 3px; letter-spacing: 1.44px; white-space: nowrap; } .lk_bannerCollapsed_JVjb_ANL:hover { width: 200px; } .lk_bannerExpanded_Xbv0uPyX { overflow: hidden; } .lk_bannerExpanded_Xbv0uPyX .lk_body_RrY1goXd { display: flex; margin: 28px 24px; } .lk_bannerExpanded_Xbv0uPyX .lk_content_KrArnFqv { font-size: 13px; line-height: 19.5px; margin: 0 10px; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_bannerExpanded_Xbv0uPyX .lk_content_KrArnFqv { font-size: 19px; font-weight: 300; line-height: 28.5px; margin: 0 24px; } } .lk_bannerOverlay_mjFsApl0 { left: 20px; right: 20px; bottom: 12px; position: fixed; z-index: 100; } .lk_iconCollapsed_C97LXp61 { width: 18px; height: 18px; display: flex; } .lk_iconExpanded_J5bSkFCA { width: 24px; height: 24px; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_iconExpanded_J5bSkFCA { width: 32px; height: 32px; align-self: center; } } .lk_closeBtnCollapsed_jrPP7YpU { width: 18px; height: 18px; } .lk_closeBtn_pgyk6K9t { display: flex; cursor: pointer; justify-content: center; align-items: center; fill: #ffffff; } .lk_closeBtnExpanded_eGKzgzFI { width: 24px; height: 24px; /*stylelint cant read interpolated values so thinks this is an error */ } .lk_closeBtnExpanded_eGKzgzFI svg { width: 12px; height: 12px; } @media (min-width: 1024px) { .lk_closeBtnExpanded_eGKzgzFI { width: 32px; height: 32px; } .lk_closeBtnExpanded_eGKzgzFI svg { width: 16px; height: 16px; } } /*#region Color Theme*/ .lk_smokeDarkLighterBg_FSwf6xtI, .lk_smokeDarkBg_VPDFQqkI, .lk_smokeLightLighterBg_iUIOnyIg, .lk_smokeLightBg_E033SHQ3, .lk_smokeLighterBg_HadX9xyN, .lk_smokeBg_hza8VkMD { color: #232635; } .lk_smokeDarkLighterBg_FSwf6xtI .lk_closeBtn_pgyk6K9t, .lk_smokeDarkBg_VPDFQqkI .lk_closeBtn_pgyk6K9t, .lk_smokeLightLighterBg_iUIOnyIg .lk_closeBtn_pgyk6K9t, .lk_smokeLightBg_E033SHQ3 .lk_closeBtn_pgyk6K9t, .lk_smokeLighterBg_HadX9xyN .lk_closeBtn_pgyk6K9t, .lk_smokeBg_hza8VkMD .lk_closeBtn_pgyk6K9t { background: #cdc9bc; } .lk_deepBlueGradientLighterBg_ZKcVVR4c, .lk_deepBlueGradientBg_s8m8Yto5, .lk_deepBlueDarkLighterBg_w31aw6EM, .lk_deepBlueDarkBg_285v1wDI, .lk_deepBlueLightLighterBg_DsaaiUTh, .lk_deepBlueLightBg_wKNsRGu4, .lk_deepBlueLighterBg_SJmV880t, .lk_deepBlueBg_vsOSjtIv { color: #e4e1d7; } .lk_deepBlueGradientLighterBg_ZKcVVR4c .lk_closeBtn_pgyk6K9t, .lk_deepBlueGradientBg_s8m8Yto5 .lk_closeBtn_pgyk6K9t, .lk_deepBlueDarkLighterBg_w31aw6EM .lk_closeBtn_pgyk6K9t, .lk_deepBlueDarkBg_285v1wDI .lk_closeBtn_pgyk6K9t, .lk_deepBlueLightLighterBg_DsaaiUTh .lk_closeBtn_pgyk6K9t, .lk_deepBlueLightBg_wKNsRGu4 .lk_closeBtn_pgyk6K9t, .lk_deepBlueLighterBg_SJmV880t .lk_closeBtn_pgyk6K9t, .lk_deepBlueBg_vsOSjtIv .lk_closeBtn_pgyk6K9t { background: #0c0e1b; } .lk_inariLighterBg_SD0KOt6G, .lk_inariBg_kIWqOzG7 { color: #e4e1d7; background: #ca4b19; } .lk_inariLighterBg_SD0KOt6G .lk_closeBtn_pgyk6K9t, .lk_inariBg_kIWqOzG7 .lk_closeBtn_pgyk6K9t { background: rgba(205, 201, 188, 0.3); } /*#region DeepBlue*/ .lk_deepBlueBg_vsOSjtIv { background: #232635; } .lk_deepBlueLighterBg_SJmV880t { background: rgba(35, 38, 53, 0.8); color: #f8f6ef; } .lk_deepBlueLightBg_wKNsRGu4 { background: #313649; } .lk_deepBlueLightLighterBg_DsaaiUTh { background: rgba(49, 54, 73, 0.8); color: #f8f6ef; } .lk_deepBlueDarkBg_285v1wDI { background: #161825; } .lk_deepBlueDarkLighterBg_w31aw6EM { background: rgba(22, 24, 37, 0.8); color: #f8f6ef; } .lk_deepBlueGradientBg_s8m8Yto5 { background: linear-gradient(0deg, #151724 0%, #232635 100%); } .lk_deepBlueGradientLighterBg_ZKcVVR4c { background: linear-gradient(0deg, rgba(21, 23, 36, 0.8) 0%, rgba(35, 38, 53, 0.8) 100%); color: #f8f6ef; } /*#endregion DeepBlue*/ /*#region Inari*/ .lk_inariLighterBg_SD0KOt6G { background: rgba(202, 75, 25, 0.8); color: #f8f6ef; } /*#endregion Inari*/ /*#region Smoke*/ .lk_smokeBg_hza8VkMD { background: #e4e1d7; } .lk_smokeLighterBg_HadX9xyN { background: rgba(228, 225, 215, 0.8); } .lk_smokeLightBg_E033SHQ3 { background: #f8f6ef; } .lk_smokeLightLighterBg_iUIOnyIg { background: rgba(248, 246, 239, 0.8); } .lk_smokeDarkBg_VPDFQqkI { background: #d7d3c6; } .lk_smokeDarkLighterBg_FSwf6xtI { background: rgba(215, 211, 198, 0.8); } /*#endregion Smoke*/ /*#endregion Color Theme*/ .lk_stickyNavWrapper_CWv0UNoQ { --sticky-nav-fade-out-transition: 0.3s ease-in-out; opacity: 1; transition: opacity var(--sticky-nav-fade-out-transition); position: relative; } .lk_stickyNav_ioyvfItX { --sticky-nav-height: 58px; --sticky-nav-max-width: 1280px; --sticky-nav-border-radius: 5px; --sticky-nav-z-index: 100; --sticky-nav-padding: 24px; --sticky-nav-padding-max: 80px; --sticky-nav-gap: 16px; --sticky-nav-gap-max: 32px; --sticky-nav-max-height: 50vh; --sticky-nav-offset: 48px; --sticky-nav-scroll-transition: 0.15s ease; --sticky-nav-anchor-transition: 0.2s ease-in-out; --sticky-nav-accordion-transition: 0.3s ease-in-out; --sticky-nav-accordion-close-transition: 0.3s cubic-bezier(0, 1, 0, 1); width: 100%; position: fixed; overflow: hidden; flex-wrap: wrap; align-items: center; padding: var(--sticky-nav-padding); background-color: var(--ld-color-legacy-deepblue-light); color: var(--ld-color-core-white); z-index: var(--sticky-nav-z-index); gap: var(--sticky-nav-gap); max-height: var(--sticky-nav-max-height); filter: drop-shadow(0px -4px 8px rgba(0, 0, 0, 0.25)); margin-bottom: calc(-1 * var(--sticky-nav-offset)); /*stylelint cant read interpolated values so thinks this is an error */ /*stylelint cant read interpolated values so thinks this is an error */ } .lk_stickyNav_ioyvfItX[data-expanded=true] { margin-bottom: 0; } .lk_stickyNav_ioyvfItX[data-expanded=true] .lk_stickyNavItems_rErPriWr::after { opacity: 1; } @media (max-width: 1023.98px) { .lk_stickyNav_ioyvfItX { bottom: 0 !important; } } @media (min-width: 1024px) { .lk_stickyNav_ioyvfItX { display: flex; max-height: unset; max-width: var(--sticky-nav-max-width); width: calc(100vw - var(--sticky-nav-padding-max) * 2); border-radius: var(--sticky-nav-border-radius); box-shadow: 0 8px 8px rgba(0, 1, 18, 0.25); left: 50%; transform: translateX(-50%); padding: 0 var(--sticky-nav-padding); gap: var(--sticky-nav-gap-max); justify-content: center; height: var(--sticky-nav-height); margin-bottom: unset; bottom: var(--sticky-nav-offset); } } .lk_stickyNavItems_rErPriWr { display: flex; justify-content: space-between; gap: var(--sticky-nav-gap); position: relative; /*stylelint cant read interpolated values so thinks this is an error */ } .lk_stickyNavItems_rErPriWr::after { position: absolute; content: " "; display: block; height: 1px; background-color: rgba(255, 255, 255, 0.5); margin: 0 -24px; width: 100vw; bottom: -24px; opacity: 0; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_stickyNavItems_rErPriWr::after { display: none; } } @media (min-width: 1023.98px) { .lk_stickyNavItems_rErPriWr { justify-content: unset; margin-bottom: 0; } } .lk_stickyNavAnchor_K92zXNzC { text-transform: uppercase; font-size: 12px; letter-spacing: 1.44px; line-height: 100%; color: var(--ld-color-core-white); font-weight: 700; cursor: pointer; display: none; text-align: center; background: transparent; outline: none; border: 0; font-family: inherit; /*stylelint cant read interpolated values so thinks this is an error */ --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; } @media (min-width: 1024px) { .lk_stickyNavAnchor_K92zXNzC { display: block; } } .lk_stickyNavAnchor_K92zXNzC::after { content: ""; display: block; position: absolute; border-bottom: var(--ornaments-senkei-default-line-size) solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(18px); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; left: 50%; transform: translate(-50%, 18px); } .lk_stickyNavAnchor_K92zXNzC:hover, .lk_stickyNavAnchor_K92zXNzC:focus { outline: 0; color: lx-color(deep-blue); } .lk_stickyNavAnchor_K92zXNzC:hover::after, .lk_stickyNavAnchor_K92zXNzC:focus::after { max-width: 100%; opacity: 1; } .lk_stickyNavAnchorMobile_DQ845VUk { display: block; margin-bottom: 32px; opacity: 0.7; transition: opacity var(--sticky-nav-anchor-transition); --ornaments-senkei-border-color: var(--ld-color-legacy-senkei-inari); --ornaments-senkei-default-line-size: 4px; --ornaments-senkei-offset-top-default: 4px; --ornaments-senkei-default-transition-duration: 0.3s; position: relative; /*stylelint cant read interpolated values so thinks this is an error */ } .lk_stickyNavAnchorMobile_DQ845VUk:last-child { margin-bottom: 0; } .lk_stickyNavAnchorMobile_DQ845VUk:hover { opacity: 1; } .lk_stickyNavAnchorMobile_DQ845VUk:hover::after { max-width: 100%; opacity: 1; } .lk_stickyNavAnchorMobile_DQ845VUk::after { content: ""; display: block; position: absolute; border-bottom: var(--ornaments-senkei-default-line-size) solid var(--ornaments-senkei-border-color); height: 0; transform: translateY(4px); width: 100%; opacity: 0; max-width: 0%; transition: opacity var(--ornaments-senkei-default-transition-duration) ease-in-out, max-width 0.2s ease-in-out; left: 50%; transform: translate(-50%, 4px); } @media (min-width: 1024px) { .lk_stickyNavAnchorMobile_DQ845VUk { display: none; } } .lk_stickyNavItem_NoxHAZar { display: flex; gap: 12px; pointer-events: none; overflow: hidden; /*stylelint cant read interpolated values so thinks this is an error */ /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_stickyNavItem_NoxHAZar { pointer-events: unset; height: auto; gap: 32px; overflow: visible; } } .lk_stickyNavItem_NoxHAZar .lk_stickyNavAnchorActive_K4RL4thL::after { max-width: 100%; opacity: 1; } .lk_stickyNavItem_NoxHAZar .lk_stickyNavAnchorActive_K4RL4thL::after { display: none; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_stickyNavItem_NoxHAZar .lk_stickyNavAnchorActive_K4RL4thL::after { display: block; } } .lk_stickyNavItem_NoxHAZar .lk_stickyNavAnchorMobileActive_B0VX4U5p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_stickyNavItem_NoxHAZar .lk_stickyNavAnchorMobileActive_B0VX4U5p { overflow: visible; } } @media (min-width: 1024px) { .lk_stickyNavItem_NoxHAZar { width: 100%; justify-content: space-between; } } .lk_stickyNavMobileRight_XZlpDR2B { font-size: 12px; min-width: 94px; cursor: pointer; display: flex; gap: 6px; white-space: nowrap; flex-shrink: 0; line-height: 100%; color: inherit; background-color: transparent; outline: none; border: 0; font-family: inherit; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_stickyNavMobileRight_XZlpDR2B { display: none; } } .lk_stickyNavMobileRight_XZlpDR2B .lk_stickyNavSVG_Xr6l81wQ { transition: all var(--sticky-nav-accordion-transition); } .lk_stickyNavMobileRight_XZlpDR2B .lk_stickyNavSVG_Xr6l81wQ[aria-expanded=true] { transform: rotateX(180deg); } .lk_stickyNavMobileRight_XZlpDR2B path { fill: var(--ld-color-core-white); } .lk_stickyNavAnchorMobileActive_B0VX4U5p { display: block; } .lk_stickyNavMobileAccordion_NAO5ssg_ { flex: 0 0 100%; position: relative; max-height: calc(50vh - 12px - var(--sticky-nav-padding) * 4); transition: max-height var(--sticky-nav-accordion-transition); margin-top: 48px; overflow: auto; /* Hide scrollbars in WebKit-based browsers (Chrome, Safari, Opera, and Edge Chromium) */ /* Hide scrollbars in Firefox */ scrollbar-width: none; /*stylelint cant read interpolated values so thinks this is an error */ } .lk_stickyNavMobileAccordion_NAO5ssg_::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .lk_stickyNavMobileAccordion_NAO5ssg_ { display: none; } } .lk_stickyNavMobileAccordion_NAO5ssg_ .lk_stickyNavAnchorActive_K4RL4thL { opacity: 1; } .lk_stickyNavMobileAccordion_NAO5ssg_ .lk_stickyNavAnchorActive_K4RL4thL::after { max-width: 100%; opacity: 1; } .lk_stickyNavMobileAccordion_NAO5ssg_[aria-expanded=false] { overflow: hidden; max-height: 0; transition: max-height var(--sticky-nav-accordion-close-transition); } .lk_stickyNavInvisible_iEbx18a0 { opacity: 0; pointer-events: none; z-index: -1; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_stickyNavInvisible_iEbx18a0 { opacity: 1; pointer-events: initial; z-index: initial; } } .lk_tooltip_mSfnROwY { display: inline; } .lk_tooltip_mSfnROwY > div { display: inline; } .lk_tooltip_mSfnROwY button { vertical-align: middle; } .lk_ldVehiclePlaceholder_FQVUHkTC, .lk_vehiclePlaceholder_ZaAOgVTC { --ld-c-vehicle-placeholder-fg: var(--ld-s-color-foreground-default); /* Text colour for the vehicle placeholder. Used when there is no data for the vehicle image. */ --ld-c-vehicle-placeholder-bg: var(--ld-s-color-elevation-inset-darker); /* Background colour for the vehicle placeholder. Used when there is no data for the vehicle image. */ } .lk_vehiclePlaceholder_ZaAOgVTC { position: relative; aspect-ratio: 16/9; max-width: 100%; max-height: 100%; } .lk_vehiclePlaceholder_ZaAOgVTC svg { width: 100%; height: 100%; color: var(--ld-c-vehicle-placeholder-bg); } .lk_vehiclePlaceholder_ZaAOgVTC .lk_placeholderText_qiITscxV { position: absolute; text-overflow: ellipsis; overflow: clip; top: 45%; left: 50%; transform: translate(-50%, -50%); max-height: 40%; max-width: 60%; white-space: nowrap; z-index: 1; } .lk_ldFormSection_JllBmM4d, .lk_formSection_tQAQfvup { --ld-c-form-section-box-shadow-focus-type: var(--ld-s-box-shadow-more-type); --ld-c-form-section-box-shadow-focus-spread: var(--ld-s-box-shadow-more-spread); --ld-c-form-section-box-shadow-focus-blur: var(--ld-s-box-shadow-more-blur); --ld-c-form-section-box-shadow-focus-y: var(--ld-s-box-shadow-more-y); --ld-c-form-section-box-shadow-focus-x: var(--ld-s-box-shadow-more-x); --ld-c-form-section-border-radius: var(--ld-s-border-radius-extra-large); /* Extra-large border radius for the form section. */ --ld-c-form-section-default: 1px solid var(--ld-s-color-utility-modifiers-midlight); /* The border properties of the form section. */ --ld-c-form-section-v-pad: var(--ld-s-dim-scaled-default); /* Vertical padding for inside the form section to prevent content from touching edges of the container. */ --ld-c-form-section-h-pad: var(--ld-s-dim-scaled-default); /* Horizontal padding for inside the form section to prevent content from touching edges of the container. */ --ld-c-form-section-box-shadow-focus-color: var(--ld-s-box-shadow-more-color); --ld-c-form-section-focus: 2px solid var(--ld-s-color-accent-primary-default); /* The border will change to this when interacted with. */ --ld-c-form-section-bg: var(--ld-s-color-elevation-raised-darker); /* Elevation colour for the form section. This will make it appear like it's sitting on or above the section. */ } .lk_formSection_tQAQfvup { background: var(--ld-c-form-section-bg); color: var(--ld-s-color-foreground-default); border: var(--ld-c-form-form-section-default); } .lk_formSection_tQAQfvup:focus, .lk_formSection_tQAQfvup:focus-within { border-color: transparent; outline: var(--ld-c-form-form-section-focus); box-shadow: var(--ld-c-form-form-section-box-shadow-focus-x) var(--ld-c-form-form-section-box-shadow-focus-y) var(--ld-c-form-form-section-box-shadow-focus-blur) var(--ld-c-form-form-section-box-shadow-focus-spread) var(--ld-c-form-form-section-box-shadow-focus-color); } .lk_customSelect_j7e65JMZ { position: relative; display: flex; min-width: var(--ld-c-form-input-min-w); width: 100%; flex-direction: column; gap: var(--ld-c-stack-gap-static-3xs); } .lk_customSelect_j7e65JMZ.lk_disabled_gBq2h5Z2 { opacity: var(--ld-s-opacity-disabled); pointer-events: none; } .lk_customSelect_j7e65JMZ select { width: 100%; flex: 1; min-height: calc(var(--ld-c-form-input-container-default-min-height) + var(--ld-c-stack-gap-static-3xs)); padding: var(--ld-c-form-input-container-default-v-pad) calc(var(--ld-c-form-input-container-h-pad) + 16px + var(--ld-c-stack-gap-static-3xs)) var(--ld-c-form-input-container-default-v-pad) var(--ld-c-form-input-container-h-pad); font-family: var(--ld-c-form-text-field-body-text-font-family); font-size: var(--ld-c-form-text-field-body-text-font-size); font-weight: var(--ld-c-form-text-field-body-text-font-weight); line-height: var(--ld-c-form-input-container-default-min-height); color: var(--ld-c-form-color-enabled); background: transparent; appearance: none; cursor: pointer; overflow-y: auto; border: 0; outline: 0; margin: calc(-1 * var(--ld-c-stack-gap-static-3xs)) 0; } .lk_customSelect_j7e65JMZ select:not([multiple]) { opacity: var(--ld-s-opacity-disabled); } .lk_customSelect_j7e65JMZ select.lk_hasValue_s0xm2spb { opacity: 1; } .lk_customSelect_j7e65JMZ select optgroup { font-size: 14px; background: var(--ld-c-form-select-item-hover-bg); font-weight: var(--ld-font-weights-book); } .lk_customSelect_j7e65JMZ select option { opacity: var(--ld-s-opacity-disabled); color: var(--ld-c-form-color-enabled); background: var(--ld-c-form-select-item-hover-bg); overflow: hidden; text-overflow: ellipsis; } .lk_customSelect_j7e65JMZ select option:first-of-type { opacity: var(--ld-s-opacity-disabled); } .lk_customSelect_j7e65JMZ select option:disabled { color: #bdbdbd; } .lk_customSelect_j7e65JMZ .lk_svgContainer_VKY8x0fs { pointer-events: none; width: 16px; position: absolute; right: var(--ld-c-form-input-container-h-pad); top: 0; bottom: 0; clip-path: polygon(0 calc(var(--ld-c-form-input-container-default-min-height) / 2 - 8px), 16px calc(var(--ld-c-form-input-container-default-min-height) / 2 - 8px), 16px calc(16px + var(--ld-c-form-input-container-default-min-height) / 2 - 8px), 0 calc(16px + var(--ld-c-form-input-container-default-min-height) / 2 - 8px)); } .lk_customSelect_j7e65JMZ svg { position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; touch-action: none; fill: var(--ld-c-form-color-enabled); } .lk_ldDarkTheme_YvG_cSkh, .lk_ldTheme_g4TjtB1T { --ld-color-core-black: #171717; --ld-color-core-white: #ffffff; --ld-color-core-yellow-01: hsl(39, 100%, 60%); --ld-color-core-yellow-02: hsl(39, 80%, 50%); --ld-color-core-yellow-03: hsl(39, 60%, 40%); --ld-color-core-red-01: hsl(347, 100%, 60%); --ld-color-core-red-02: hsl(347, 80%, 50%); --ld-color-core-red-03: hsl(347, 60%, 40%); --ld-color-core-blue-01: hsl(206, 100%, 60%); --ld-color-core-blue-02: hsl(206, 80%, 50%); --ld-color-core-blue-03: hsl(206, 60%, 40%); --ld-color-core-green-01: hsl(115, 100%, 60%); --ld-color-core-green-02: hsl(115, 80%, 50%); --ld-color-core-green-03: hsl(115, 60%, 40%); --ld-color-core-gradient-linear-full: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 100%); --ld-color-core-gradient-linear-75: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 75%); --ld-color-core-gradient-linear-50: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 50%); --ld-color-core-gradient-linear-25: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 25%); --ld-color-core-opacity-white-10: rgba(255,255,255,0.1); /* 10% white. */ --ld-color-core-opacity-white-20: rgba(255,255,255,0.2); /* 20% white. */ --ld-color-core-opacity-true-black-10: rgba(0,0,0,0.1); --ld-color-core-opacity-true-black-30: rgba(0,0,0,0.3); --ld-color-core-opacity-true-black-75: rgba(0,0,0,0.75); --ld-color-core-opacity-true-black-90: rgba(0,0,0,0.9); --ld-color-core-opacity-black-10: rgba(23,23,23,0.1); --ld-color-core-opacity-black-75: rgba(23,23,23,0.75); --ld-color-core-opacity-black-90: rgba(23,23,23,0.9); --ld-color-core-true-black: #000000; --ld-color-legacy-deepblue-lightest: #4D5268; --ld-color-legacy-deepblue-light: #313649; --ld-color-legacy-deepblue-default: #232635; /* Base/Default deepblue colour */ --ld-color-legacy-deepblue-dark: #161825; --ld-color-legacy-deepblue-darkest: #0C0E1B; --ld-color-legacy-smoke-lightest: #F8F6EF; --ld-color-legacy-smoke-light: #F0EEE7; --ld-color-legacy-smoke-default: #E4E1D7; --ld-color-legacy-smoke-dark: #D7D3C6; --ld-color-legacy-smoke-darkest: #CDC9BC; --ld-color-legacy-miso-light: #796E64; --ld-color-legacy-miso-default: #5C534A; --ld-color-legacy-miso-dark: #4F443A; --ld-color-legacy-neutral-storm: #3A404A; --ld-color-legacy-neutral-stone: #CECED0; --ld-color-legacy-neutral-mortar: #BEB4B2; --ld-color-legacy-lexus-brand-white: #FFFFFF; --ld-color-legacy-lexus-brand-black: #111111; --ld-color-legacy-senkei-inari: #CA4B19; --ld-color-legacy-senkei-ochre: #BA161A; --ld-color-legacy-senkei-clay: #D5B461; --ld-color-legacy-moss-light: #656865; --ld-color-legacy-moss-default: #4B4D4B; --ld-color-legacy-moss-dark: #3B3D3B; --ld-color-legacy-iron-light: #6D6666; --ld-color-legacy-iron-default: #524C4C; --ld-color-legacy-iron-dark: #433C3C; --ld-color-legacy-ocean-light: #32333A; --ld-color-legacy-ocean-default: #232429; --ld-color-legacy-ocean-dark: #16171B; --ld-color-legacy-status-success: #1E8A15; --ld-color-legacy-status-error: #BA161A; --ld-color-legacy-status-warning: #F88F39; --ld-color-legacy-ownership-success: #1E8A15; --ld-color-legacy-ownership-error: #BA161A; --ld-color-legacy-ownership-warning: #F88F39; --ld-color-legacy-opacity-deepblue-default-75: hsla(237,100%,4%,0.75); --ld-color-legacy-opacity-deepblue-default-90: hsla(226,51%,8%,0.90); --ld-color-legacy-opacity-deepblue-default-95: hsla(231,30%,13%,0.95); --ld-color-legacy-opacity-deepblue-dark-75: hsla(232,25%,12%,0.75); --ld-color-legacy-opacity-deepblue-dark-90: hsla(232,25%,12%,0.90); --ld-color-legacy-opacity-deepblue-dark-95: hsla(232,25%,12%,0.50); --ld-color-legacy-opacity-smoke-default-75: hsla(46,19%,87%,0.75); --ld-color-legacy-opacity-smoke-default-90: hsla(46,19%,87%,0.90); --ld-color-legacy-opacity-smoke-default-95: hsla(46,19%,87%,0.95); --ld-color-legacy-opacity-smoke-dark-75: hsla(46,18%,81%,0.75); --ld-color-legacy-opacity-smoke-dark-90: hsla(46,18%,81%,0.90); --ld-color-legacy-opacity-smoke-dark-95: hsla(46,18%,81%,0.95); --ld-color-lexus-deepblue-50: #6E727E; /* 30% white on top of the 100 deepblue colour. */ --ld-color-lexus-deepblue-100: #303547; --ld-color-lexus-deepblue-200: #2E3243; --ld-color-lexus-deepblue-300: #2B2F3E; --ld-color-lexus-deepblue-400: #272A39; --ld-color-lexus-deepblue-500: #232632; --ld-color-lexus-deepblue-600: #1E212B; --ld-color-lexus-deepblue-700: #1B1D25; --ld-color-lexus-deepblue-800: #181A20; --ld-color-lexus-deepblue-900: #15171D; --ld-color-lexus-deepblue-opacity-30: rgba(35,38,50,0.3); /* 30% of the 500 color. */ --ld-color-lexus-deepblue-opacity-50: rgba(35,38,50,0.5); /* 50% of the accent default colour. */ --ld-color-lexus-smoke-100: #FAFAF9; --ld-color-lexus-smoke-200: #F6F5F3; --ld-color-lexus-smoke-300: #F1F0EC; --ld-color-lexus-smoke-400: #EDEBE6; --ld-color-lexus-smoke-500: #E8E6E0; --ld-color-lexus-smoke-600: #E3E1DA; --ld-color-lexus-smoke-700: #DFDCD4; --ld-color-lexus-smoke-800: #DAD8CE; --ld-color-lexus-smoke-900: #D6D3C8; --ld-color-lexus-smoke-1000: #B6B6B5; /* Created with 30% black on top of smoke 100. */ --ld-color-lexus-smoke-opacity-30: rgba(232,230,224,0.3); /* 30% of the 500 colour. */ --ld-color-lexus-smoke-opacity-50: rgba(232,230,224,0.5); /* 50% of the accent default colour. */ --ld-color-lexus-inari-100: #f8d2c3; --ld-color-lexus-inari-200: #f5bfa9; --ld-color-lexus-inari-300: #f0a384; --ld-color-lexus-inari-400: #ea7b50; --ld-color-lexus-inari-500: #cc4c19; --ld-color-lexus-inari-600: #8f3511; --ld-color-lexus-inari-700: #64250c; --ld-color-lexus-inari-800: #461a08; --ld-color-lexus-inari-900: #311206; --ld-color-lexus-ochre-100: #f8bfc0; --ld-color-lexus-ochre-200: #f5a3a5; --ld-color-lexus-ochre-300: #f07c7d; --ld-color-lexus-ochre-400: #e94345; --ld-color-lexus-ochre-500: #bb1619; --ld-color-lexus-ochre-600: #830f11; --ld-color-lexus-ochre-700: #5c0a0c; --ld-color-lexus-ochre-800: #400708; --ld-color-lexus-ochre-900: #2d0506; --ld-color-lexus-clay-100: #f8e7bf; --ld-color-lexus-clay-200: #f5dda3; --ld-color-lexus-clay-300: #f0ce7c; --ld-color-lexus-clay-400: #e9b943; --ld-color-lexus-clay-500: #bb8c16; --ld-color-lexus-clay-600: #83620f; --ld-color-lexus-clay-700: #5c440a; --ld-color-lexus-clay-800: #403007; --ld-color-lexus-clay-900: #2d2205; --ld-hue-core-red: 347; --ld-hue-core-green: 115; --ld-hue-core-blue: 206; --ld-hue-core-yellow: 39; --ld-hue-lexus-inari: 17; --ld-hue-lexus-deepblue: 230; --ld-hue-lexus-smoke: 46; --ld-hue-lexus-ochre: 359; --ld-hue-lexus-clay: 43; --ld-documentation-swatch-outline: #ffffff; --ld-utility-color-modifier-10: .1; /* 10% color modifier increments */ --ld-utility-color-modifier-15: .15; /* 15% color modifier increments */ --ld-utility-color-modifier-20: .20; /* 20% color modifier increments */ --ld-utility-color-modifier-30: .30; /* 30% color modifier increments */ --ld-utility-color-modifier-40: .40; /* 40% color modifier increments */ --ld-utility-color-modifier-50: .50; /* 50% color modifier increments */ --ld-utility-color-modifier-80: .80; /* 80% color modifier increments */ --ld-utility-color-modifier-05: .05; /* 5% color modifier increments */ --ld-utility-color-modifier-active: .30; /* active color modifier */ --ld-utility-color-modifier-smoke-lighten: .50; /* active color modifier */ --ld-utility-color-modifier-smoke-darken: .05; /* active color modifier */ --ld-utility-color-modifier-deepblue-lighten: .1; /* active color modifier */ --ld-utility-color-modifier-deepblue-darken: .1; /* active color modifier */ --ld-utility-base: 16; --ld-utility-multiplier: 1.25; --ld-utility-scale-dimension: .5; --ld-font-size-xs: 16px; --ld-font-size-sm: 18px; --ld-font-size-md: 20px; --ld-font-size-lg: 23px; --ld-font-size-xl: 26px; --ld-font-size-2xl: 29px; --ld-font-size-3xl: 33px; --ld-font-size-4xl: 37px; --ld-font-size-5xl: 42px; --ld-font-size-6xl: 47px; --ld-font-size-7xl: 53px; --ld-font-size-8xl: 60px; --ld-font-size-9xl: 68px; --ld-font-size-base: 16px; --ld-font-size-multiplier: 1.125; --ld-font-size-static-xs: 12px; --ld-font-size-static-sm: 13px; --ld-font-size-static-md: 15px; --ld-font-size-static-lg: 16px; /* Equivalent with scaled base value. */ --ld-font-size-static-xl: 19px; --ld-font-size-banner: 13px; --ld-font-families-headlines: Nobel, arial, sans-serif; --ld-font-families-body: Nobel, arial, sans-serif; --ld-line-heights-headlines-sm: 1.3; --ld-line-heights-headlines-default: 1; --ld-line-heights-headlines-lg: 1.15; --ld-line-heights-headlines-xl: 1.25; --ld-line-heights-body-default: 1.5; --ld-line-heights-body-relaxed: 1.75; --ld-line-heights-button-default: 16px; --ld-font-weights-book: 300; --ld-font-weights-regular: 400; --ld-font-weights-bold: 700; --ld-letter-spacing-body: 0; --ld-letter-spacing-headlines: 0.05; --ld-letter-spacing-smaller-headlines: 0.02; --ld-letter-spacing-buttons: 0.12; --ld-letter-spacing-captions: 0.0; --ld-letter-spacing-subtitles: 0.0125; --ld-paragraph-spacing-headings: 16px; --ld-paragraph-spacing-body: 32px; --ld-text-case-none: none; --ld-text-case-uppercase: uppercase; --ld-text-decoration-none: none; --ld-text-decoration-underline: underline; --ld-scale-minor-second: 1.067; --ld-scale-major-second: 1.125; --ld-scale-minor-third: 1.200; --ld-scale-major-third: 1.250; --ld-scale-perfect-fourth: 1.333; --ld-scale-augmented-fourth: 1.414; --ld-scale-perfect-fifth: 1.500; --ld-scale-golden-ratio: 1.618; --ld-scale-desktop: 1.175; --ld-prim-dim-0: 0px; --ld-prim-dim-4: 4px; --ld-prim-dim-8: 8px; --ld-prim-dim-12: 12px; --ld-prim-dim-16: 16px; --ld-prim-dim-20: 20px; --ld-prim-dim-24: 24px; --ld-prim-dim-32: 32px; --ld-prim-dim-40: 40px; --ld-prim-dim-48: 48px; --ld-prim-dim-56: 56px; --ld-prim-dim-64: 64px; --ld-prim-dim-80: 80px; --ld-prim-dim-96: 96px; --ld-prim-dim-120: 120px; --ld-prim-b-r-xm: 6px; --ld-prim-b-r-lg: 7px; --ld-prim-b-r-sm: 3px; --ld-prim-b-r-md: 5px; --ld-prim-b-r-xl: 8px; --ld-prim-b-r-rounded: 999px; --ld-prim-b-r-none: 0; --ld-prim-box-shadow-0: 0; --ld-prim-box-shadow-1: 1; --ld-prim-box-shadow-2: 2; --ld-prim-box-shadow-4: 4; --ld-prim-box-shadow-8: 8; --ld-prim-box-shadow-12: 12; --ld-prim-box-shadow-16: 16; --ld-prim-box-shadow-24: 24; --ld-prim-box-shadow-32: 32; --ld-prim-box-shadow-64: 64; --ld-prim-box-shadow-none-x: 0; --ld-prim-box-shadow-none-y: 0; --ld-prim-box-shadow-none-blur: 0; --ld-prim-box-shadow-none-spread: 0; --ld-prim-box-shadow-none-type: dropShadow; --ld-prim-box-shadow-none-color: #17171726; --ld-prim-box-shadow-number-15: 26; /* These are used to add alpha to the shadows instead of using static values */ --ld-prim-box-shadow-number-10: 1a; /* These are used to add alpha to the shadows instead of using static values */ --ld-prim-box-shadow-0-1-2-x: 0; --ld-prim-box-shadow-0-1-2-y: 1px; --ld-prim-box-shadow-0-1-2-blur: 2px; --ld-prim-box-shadow-0-1-2-spread: 0; --ld-prim-box-shadow-0-1-2-type: dropShadow; --ld-prim-box-shadow-0-1-2-color: #17171726; --ld-prim-box-shadow-0-4-8-x: 0; --ld-prim-box-shadow-0-4-8-y: 4px; --ld-prim-box-shadow-0-4-8-blur: 8px; --ld-prim-box-shadow-0-4-8-spread: 0; --ld-prim-box-shadow-0-4-8-type: dropShadow; --ld-prim-box-shadow-0-4-8-color: #17171726; --ld-prim-box-shadow-0-8-16-x: 0; --ld-prim-box-shadow-0-8-16-y: 8px; --ld-prim-box-shadow-0-8-16-blur: 16px; --ld-prim-box-shadow-0-8-16-spread: 0; --ld-prim-box-shadow-0-8-16-type: dropShadow; --ld-prim-box-shadow-0-8-16-color: #17171726; --ld-prim-box-shadow-0-12-24-x: 0; --ld-prim-box-shadow-0-12-24-y: 12px; --ld-prim-box-shadow-0-12-24-blur: 24px; --ld-prim-box-shadow-0-12-24-spread: 0; --ld-prim-box-shadow-0-12-24-type: dropShadow; --ld-prim-box-shadow-0-12-24-color: #17171726; --ld-prim-box-shadow-0-32-64-x: 0; --ld-prim-box-shadow-0-32-64-y: 32px; --ld-prim-box-shadow-0-32-64-blur: 64px; --ld-prim-box-shadow-0-32-64-spread: 0; --ld-prim-box-shadow-0-32-64-type: dropShadow; --ld-prim-box-shadow-0-32-64-color: #17171726; --ld-prim-box-shadow-color-default: #17171726; --ld-prim-timings-100: 100; /* 100ms */ --ld-prim-timings-200: 200; /* 200ms */ --ld-prim-timings-300: 300; /* 300ms */ --ld-prim-timings-500: 500; /* 500ms */ --ld-prim-timings-1000: 1000; /* 1000ms = 1s */ --ld-prim-timings-2000: 2000; /* 2000ms = 2s */ --ld-dimension-0: 0px; --ld-dimension-1: 1px; --ld-dimension-2: 2px; --ld-dimension-4: 4px; --ld-dimension-8: 8px; --ld-dimension-12: 12px; --ld-dimension-13: 13px; --ld-dimension-16: 16px; --ld-dimension-19: 19px; --ld-dimension-24: 24px; --ld-dimension-32: 32px; --ld-dimension-40: 40px; --ld-dimension-48: 48px; --ld-dimension-56: 56px; --ld-dimension-64: 64px; --ld-dimension-72: 72px; --ld-dimension-80: 80px; --ld-dimension-88: 88px; --ld-dimension-96: 96px; --ld-dimension-104: 104px; --ld-dimension-112: 112px; --ld-dimension-120: 120px; --ld-sizing-xxs: 16px; --ld-sizing-xs: 24px; --ld-sizing-sm: 32px; --ld-sizing-md: 40px; --ld-sizing-lg: 48px; --ld-sizing-xl: 64px; --ld-s-sz-screen-min-w: 360px; --ld-s-sz-screen-def-w: 375px; /* This acts as a default mobile size that design team uses. Mainly for Figma */ --ld-s-sz-screen-max-w: 1023px; --ld-s-sz-columns-4col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-4col-max-w: 376px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-6col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-6col-max-w: 576px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-8col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-8col-max-w: 776px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-12col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-12col-max-w: 1176px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-full-width-min-w: 360px; --ld-s-sz-columns-full-width-def-w: 375px; --ld-s-sz-columns-full-width-max-w: 1023px; --ld-s-sz-columns-10col-max-w: 976px; /* Calculated max-width for 10 col Mobile (this will scale). */ --ld-s-sz-columns-3col-max-w: 276px; /* Calculated max-width for Mobile. (This will scale). */ --ld-s-sz-util-min-w: 328px; /* This is calculates the minwidth of 12col at 1024 viewport width */ --ld-s-sz-util-max-w: 992px; /* This is where you set your max-width of standard/default (excluding full-width) */ --ld-s-sz-util-col-min: calc((328px - (5 * 16px)) / 6); /* Find a way to import the 6 properly. Static atm */ --ld-s-sz-util-col-max: calc((992px - (5 * 16px)) / 6); /* This prolly moves into the columns formula */ --ld-s-sz-util-gutter: 16px; --ld-s-sz-util-margin: 16px; --ld-s-sz-util-breakpoint: 1024px; --ld-s-sz-util-viewport-min: 360px; --ld-s-sz-util-viewport-max: 1024px; --ld-s-dim-d-0: 0px; --ld-s-dim-d-1: 4px; --ld-s-dim-d-2: 8px; --ld-s-dim-d-3: 12px; --ld-s-dim-d-4: 16px; --ld-s-dim-d-5: 24px; --ld-s-dim-d-6: 32px; --ld-s-dim-d-7: 40px; --ld-s-dim-d-8: 48px; --ld-s-dim-d-9: 64px; --ld-s-dim-d-10: 80px; --ld-s-dim-d-11: 96px; --ld-s-dim-d-12: 120px; --ld-s-dim-scale-d-0: 0px; --ld-s-dim-scale-d-1: 8px; --ld-s-dim-scale-d-2: 16px; --ld-s-dim-scale-d-3: 20px; --ld-s-dim-scale-d-4: 24px; --ld-s-dim-scale-d-5: 32px; --ld-s-dim-scale-d-6: 40px; --ld-s-dim-scale-d-7: 48px; --ld-s-dim-scale-d-8: 64px; --ld-s-dim-scale-24-80: 24px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-dim-static-none: 0px; --ld-s-dim-static-4xs: 4px; --ld-s-dim-static-3xs: 8px; --ld-s-dim-static-2xs: 12px; --ld-s-dim-static-xs: 16px; --ld-s-dim-static-s: 24px; --ld-s-dim-static-m: 32px; --ld-s-dim-static-l: 40px; --ld-s-dim-static-xl: 48px; --ld-s-dim-static-2xl: 64px; --ld-s-dim-static-3xl: 80px; --ld-s-dim-static-4xl: 96px; --ld-s-dim-static-5xl: 120px; --ld-s-dim-scaled-none: 0px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-least: 8px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-even-less: 16px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-less: 20px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-default: 24px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-more: 32px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-even-more: 40px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-most: 48px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-beyond-most: 64px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-s-xxl: 24px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-util-max-col: 2; --ld-s-box-shadow-none-x: 0; --ld-s-box-shadow-none-y: 0; --ld-s-box-shadow-none-blur: 0; --ld-s-box-shadow-none-spread: 0; --ld-s-box-shadow-none-type: dropShadow; --ld-s-box-shadow-none-color: #17171726; --ld-s-box-shadow-even-less-x: 0; --ld-s-box-shadow-even-less-y: 1px; --ld-s-box-shadow-even-less-blur: 2px; --ld-s-box-shadow-even-less-spread: 0; --ld-s-box-shadow-even-less-type: dropShadow; --ld-s-box-shadow-even-less-color: #17171726; --ld-s-box-shadow-less-x: 0; --ld-s-box-shadow-less-y: 4px; --ld-s-box-shadow-less-blur: 8px; --ld-s-box-shadow-less-spread: 0; --ld-s-box-shadow-less-type: dropShadow; --ld-s-box-shadow-less-color: #17171726; --ld-s-box-shadow-default-x: 0; --ld-s-box-shadow-default-y: 8px; --ld-s-box-shadow-default-blur: 16px; --ld-s-box-shadow-default-spread: 0; --ld-s-box-shadow-default-type: dropShadow; --ld-s-box-shadow-default-color: #17171726; --ld-s-box-shadow-more-x: 0; --ld-s-box-shadow-more-y: 12px; --ld-s-box-shadow-more-blur: 24px; --ld-s-box-shadow-more-spread: 0; --ld-s-box-shadow-more-type: dropShadow; --ld-s-box-shadow-more-color: #17171726; --ld-s-box-shadow-even-more-x: 0; --ld-s-box-shadow-even-more-y: 32px; --ld-s-box-shadow-even-more-blur: 64px; --ld-s-box-shadow-even-more-spread: 0; --ld-s-box-shadow-even-more-type: dropShadow; --ld-s-box-shadow-even-more-color: #17171726; --ld-s-border-radius-rounded: 999px; --ld-s-border-radius-small: 3px; --ld-s-border-radius-medium: 5px; --ld-s-border-radius-extra-large: 8px; --ld-s-border-radius-extra-medium: 6px; --ld-s-border-radius-large: 7px; --ld-s-border-radius-none: 0; --ld-s-min-w-default: 190px; /* This is the first reusable min-w token. Add more tokens to this group if patterns surface */ --ld-s-min-w-more: 220px; /* Currently: Min-width for individual buttons. */ --ld-s-transition-easing-ease-out: ease-out; --ld-s-transition-duration-fast: 150ms; --ld-s-transition-duration-default: 300ms; --ld-s-transition-duration-slow: 600ms; --ld-s-image-ratio-16-9: calc(16 / 9); --ld-s-image-ratio-1-1: calc(1 / 1); --ld-s-duration-fastest: 100; /* Duration for hover effects. */ --ld-s-duration-fast: 200; /* Default duration for small transitions */ --ld-s-duration-moderate: 300; /* Slightly longer durations */ --ld-s-duration-moderate-slow: 500; /* Slow duration for more complex animations */ --ld-s-duration-slowest: 2000; /* Duration for long animations like indicator lines. */ --ld-s-duration-slow: 1000; --ld-s-delay-default: 500; /* Default delay duration for between animations within a sequence. */ --ld-s-delay-long: 1000; /* A longer delay duration before an automatic animation sequence begins. */ --ld-s-easings-ease-out: ease-out; --ld-s-easings-linear: linear; --ld-s-easings-ease: ease; /* Easings for hover animations. */ --ld-s-color-accent-primary-lighter: #EDEBE6; --ld-s-color-accent-primary-default: #E8E6E0; --ld-s-color-accent-primary-darker: #E3E1DA; --ld-s-color-accent-primary-disabled: rgba(232,230,224,0.5); --ld-s-color-accent-primary-opacity-default-lighter: rgba(232,230,224,0.3); --ld-s-color-accent-secondary-lighter: #ea7b50; --ld-s-color-accent-secondary-default: #cc4c19; --ld-s-color-accent-secondary-darker: #8f3511; --ld-s-color-accent-secondary-disabled: #cc4c19; --ld-s-color-accent-electrified-default: #2468ff; --ld-s-color-foreground-lighter: #EDEBE6; --ld-s-color-foreground-default: #E8E6E0; --ld-s-color-foreground-darker: #E3E1DA; --ld-s-color-foreground-disabled: #E8E6E0; --ld-s-color-foreground-on-accent: #232632; --ld-s-color-foreground-on-disabled: #232632; --ld-s-color-foreground-opacity-on-accent-lighter: rgba(35,38,50,0.3); --ld-s-color-elevation-raised-lighter: #303547; --ld-s-color-elevation-raised-default: #2E3243; --ld-s-color-elevation-raised-darker: #2B2F3E; --ld-s-color-elevation-inset-lighter: #1B1D25; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-default: #181A20; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-darker: #15171D; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-lighter: #272A39; --ld-s-color-canvas-default: #232632; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-darker: #1E212B; /* This can be used if the page needs some variance in background colour */ --ld-s-color-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-utility-error-disabled: hsl(347, 80%, 50%); --ld-s-color-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-utility-success-disabled: hsl(115, 80%, 50%); --ld-s-color-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-utility-modifiers-midlight: #ffffff1a; --ld-s-color-utility-modifiers-mid: rgba(255,255,255,0.3); --ld-s-color-common-white: #ffffff; --ld-s-color-common-black: #171717; --ld-s-color-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-common-true-black: #000000; --ld-s-color-common-inherit-theme-default: #ffffff; --ld-s-color-common-inherit-theme-inverse: #171717; --ld-screen-width: 375px; --ld-width-default: 327px; --ld-width-less: 327px; --ld-width-even-less: 327px; --ld-grid-min-w: 488px; /* This may change later, dynamic value used for the grid-layout component. */ --ld-s-color-default-accent-primary-lighter: #EDEBE6; --ld-s-color-default-accent-primary-default: #E8E6E0; --ld-s-color-default-accent-primary-darker: #E3E1DA; --ld-s-color-default-accent-primary-disabled: rgba(232,230,224,0.5); /* Pointing to the primitive opacity smoke colour token. */ --ld-s-color-default-accent-primary-opacity-default-lighter: rgba(232,230,224,0.3); --ld-s-color-default-accent-secondary-lighter: #ea7b50; --ld-s-color-default-accent-secondary-default: #cc4c19; --ld-s-color-default-accent-secondary-darker: #8f3511; --ld-s-color-default-accent-secondary-disabled: #cc4c19; --ld-s-color-default-accent-electrified-default: #2468ff; --ld-s-color-default-foreground-lighter: #EDEBE6; --ld-s-color-default-foreground-default: #E8E6E0; --ld-s-color-default-foreground-darker: #E3E1DA; --ld-s-color-default-foreground-disabled: #E8E6E0; --ld-s-color-default-foreground-on-accent: #232632; --ld-s-color-default-foreground-on-disabled: #232632; --ld-s-color-default-foreground-opacity-on-accent-lighter: rgba(35,38,50,0.3); --ld-s-color-default-elevation-raised-lighter: #303547; --ld-s-color-default-elevation-raised-default: #2E3243; --ld-s-color-default-elevation-raised-darker: #2B2F3E; --ld-s-color-default-elevation-inset-lighter: #1B1D25; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-default-elevation-inset-default: #181A20; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-default-elevation-inset-darker: #15171D; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-default-highlight-default: #6E727E; --ld-s-color-default-canvas-lighter: #272A39; --ld-s-color-default-canvas-default: #232632; --ld-s-color-default-canvas-darker: #1E212B; --ld-s-color-default-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-default-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-default-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-default-utility-error-disabled: hsl(347, 80%, 50%); --ld-s-color-default-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-default-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-default-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-default-utility-success-disabled: hsl(115, 80%, 50%); --ld-s-color-default-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-default-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-default-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-default-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-default-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-default-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-default-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-default-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-default-utility-modifiers-midlight: #ffffff1a; --ld-s-color-default-utility-modifiers-mid: rgba(255,255,255,0.3); --ld-s-color-default-common-white: #ffffff; --ld-s-color-default-common-black: #171717; --ld-s-color-default-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-default-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-default-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-default-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-default-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-default-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-default-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-default-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-default-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-default-common-true-black: #000000; --ld-s-color-default-common-inherit-theme-default: #ffffff; --ld-s-color-default-common-inherit-theme-inverse: #171717; --ld-s-color-alt-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-alt-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-alt-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-alt-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-alt-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-alt-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-alt-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-alt-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-alt-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-alt-common-white: #ffffff; --ld-s-color-alt-common-black: #171717; --ld-s-color-alt-common-true-black: #000000; --ld-s-color-alt-common-inherit-theme-default: #ffffff; --ld-s-color-alt-common-inherit-theme-inverse: #171717; --ld-s-color-alt-accent-primary-lighter: #EDEBE6; --ld-s-color-alt-accent-primary-default: #E8E6E0; --ld-s-color-alt-accent-primary-darker: #E3E1DA; --ld-s-color-alt-accent-primary-disabled: rgba(232,230,224,0.5); /* Pointing to the smoke primitive opacity token. */ --ld-s-color-alt-accent-primary-opacity-default-lighter: rgba(232,230,224,0.3); --ld-s-color-alt-accent-secondary-lighter: #ea7b50; --ld-s-color-alt-accent-secondary-default: #cc4c19; --ld-s-color-alt-accent-secondary-darker: #8f3511; --ld-s-color-alt-accent-secondary-disabled: #cc4c19; --ld-s-color-alt-accent-electrified-default: #2468ff; --ld-s-color-alt-foreground-lighter: #EDEBE6; --ld-s-color-alt-foreground-default: #E8E6E0; --ld-s-color-alt-foreground-darker: #E3E1DA; --ld-s-color-alt-foreground-disabled: #E8E6E0; --ld-s-color-alt-foreground-on-accent: #232632; --ld-s-color-alt-foreground-on-disabled: #232632; --ld-s-color-alt-foreground-opacity-on-accent-lighter: rgba(35,38,50,0.3); --ld-s-color-alt-elevation-raised-lighter: #303547; --ld-s-color-alt-elevation-raised-default: #2E3243; --ld-s-color-alt-elevation-raised-darker: #2B2F3E; --ld-s-color-alt-elevation-inset-lighter: #1B1D25; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-alt-elevation-inset-default: #181A20; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-alt-elevation-inset-darker: #15171D; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-alt-highlight-default: #6E727E; --ld-s-color-alt-canvas-lighter: #272A39; --ld-s-color-alt-canvas-default: #232632; --ld-s-color-alt-canvas-darker: #1E212B; --ld-s-color-alt-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-alt-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-alt-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-alt-utility-error-disabled: hsl(347, 80%, 50%); --ld-s-color-alt-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-alt-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-alt-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-alt-utility-success-disabled: hsl(115, 80%, 50%); --ld-s-color-alt-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-alt-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-alt-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-alt-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-alt-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-alt-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-alt-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-alt-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-alt-utility-modifiers-midlight: #ffffff1a; --ld-s-color-alt-utility-modifiers-mid: rgba(255,255,255,0.3); --ld-s-typography-heading1-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading1-font-weight: 300; --ld-s-typography-heading1-line-height: 1.15; --ld-s-typography-heading1-font-size: 37px; --ld-s-typography-heading1-letter-spacing: 1.85px; --ld-s-typography-heading1-paragraph-spacing: 16px; --ld-s-typography-heading1-text-case: uppercase; --ld-s-typography-heading2-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading2-font-weight: 300; --ld-s-typography-heading2-line-height: 1.15; --ld-s-typography-heading2-font-size: 33px; --ld-s-typography-heading2-letter-spacing: 1.65px; --ld-s-typography-heading2-paragraph-spacing: 16px; --ld-s-typography-heading2-text-case: uppercase; --ld-s-typography-heading3-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading3-font-weight: 300; --ld-s-typography-heading3-line-height: 1.15; --ld-s-typography-heading3-font-size: 29px; --ld-s-typography-heading3-letter-spacing: 1.45px; --ld-s-typography-heading3-paragraph-spacing: 16px; --ld-s-typography-heading3-text-case: uppercase; --ld-s-typography-heading4-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading4-font-weight: 300; --ld-s-typography-heading4-line-height: 1.15; --ld-s-typography-heading4-font-size: 26px; --ld-s-typography-heading4-letter-spacing: 1.3px; --ld-s-typography-heading4-paragraph-spacing: 16px; --ld-s-typography-heading4-text-case: uppercase; --ld-s-typography-heading5-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading5-font-weight: 300; --ld-s-typography-heading5-line-height: 1.15; --ld-s-typography-heading5-font-size: 23px; --ld-s-typography-heading5-letter-spacing: 1.15px; --ld-s-typography-heading5-paragraph-spacing: 16px; --ld-s-typography-heading5-text-case: uppercase; --ld-s-typography-heading6-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading6-font-weight: 300; --ld-s-typography-heading6-line-height: 1.15; --ld-s-typography-heading6-font-size: 18px; --ld-s-typography-heading6-letter-spacing: 1px; --ld-s-typography-heading6-paragraph-spacing: 16px; --ld-s-typography-heading6-text-case: uppercase; --ld-s-typography-subtitle1-font-family: Nobel, arial, sans-serif; --ld-s-typography-subtitle1-font-weight: 300; --ld-s-typography-subtitle1-line-height: 1.5; --ld-s-typography-subtitle1-font-size: 20px; --ld-s-typography-subtitle1-letter-spacing: 0.25px; --ld-s-typography-subtitle1-paragraph-spacing: 16px; --ld-s-typography-subtitle1-text-case: none; --ld-s-typography-subtitle2-font-family: Nobel, arial, sans-serif; --ld-s-typography-subtitle2-font-weight: 300; --ld-s-typography-subtitle2-line-height: 1.5; --ld-s-typography-subtitle2-font-size: 18px; --ld-s-typography-subtitle2-letter-spacing: 0.225px; --ld-s-typography-subtitle2-paragraph-spacing: 16px; --ld-s-typography-subtitle2-text-case: none; --ld-s-typography-body1-font-family: Nobel, arial, sans-serif; --ld-s-typography-body1-font-weight: 300; --ld-s-typography-body1-line-height: 1.5; --ld-s-typography-body1-font-size: 19px; --ld-s-typography-body1-letter-spacing: 0px; --ld-s-typography-body1-paragraph-spacing: 32px; --ld-s-typography-body1-text-case: none; --ld-s-typography-body2-font-family: Nobel, arial, sans-serif; --ld-s-typography-body2-font-weight: 300; --ld-s-typography-body2-line-height: 1.5; --ld-s-typography-body2-font-size: 16px; --ld-s-typography-body2-letter-spacing: 0px; --ld-s-typography-body2-paragraph-spacing: 32px; --ld-s-typography-body2-text-case: none; --ld-s-typography-caption1-font-family: Nobel, arial, sans-serif; --ld-s-typography-caption1-font-weight: 300; --ld-s-typography-caption1-line-height: 1.5; --ld-s-typography-caption1-font-size: 15px; --ld-s-typography-caption1-letter-spacing: 0px; --ld-s-typography-caption1-paragraph-spacing: 32px; --ld-s-typography-caption1-text-case: none; --ld-s-typography-disclaimer1-font-family: Nobel, arial, sans-serif; --ld-s-typography-disclaimer1-font-weight: 300; --ld-s-typography-disclaimer1-line-height: 1.5; --ld-s-typography-disclaimer1-font-size: 15px; --ld-s-typography-disclaimer1-letter-spacing: 0px; --ld-s-typography-disclaimer1-paragraph-spacing: 32px; --ld-s-typography-disclaimer1-text-case: none; --ld-s-typography-price1-font-family: Nobel, arial, sans-serif; --ld-s-typography-price1-font-weight: 300; --ld-s-typography-price1-line-height: 1.5; --ld-s-typography-price1-font-size: 13px; --ld-s-typography-price1-letter-spacing: 0px; --ld-s-typography-price1-paragraph-spacing: 32px; --ld-s-typography-price1-text-case: none; --ld-s-typography-label1-font-family: Nobel, arial, sans-serif; --ld-s-typography-label1-font-weight: 700; --ld-s-typography-label1-line-height: 1; --ld-s-typography-label1-font-size: 12px; --ld-s-typography-label1-letter-spacing: 1.44px; --ld-s-typography-label1-paragraph-spacing: 32px; --ld-s-typography-label1-text-case: uppercase; --ld-s-typography-banner-font-family: Nobel, arial, sans-serif; --ld-s-typography-banner-font-weight: 300; --ld-s-typography-banner-line-height: 1.5; --ld-s-typography-banner-font-size: 13px; --ld-s-typography-banner-letter-spacing: 1.44px; --ld-s-typography-banner-paragraph-spacing: 32px; --ld-s-typography-banner-text-case: none; --ld-s-typography-label2-font-family: Nobel, arial, sans-serif; --ld-s-typography-label2-font-weight: 400; --ld-s-typography-label2-line-height: 1.3; --ld-s-typography-label2-font-size: 12px; --ld-s-typography-label2-letter-spacing: 1.44px; --ld-s-typography-label2-paragraph-spacing: 32px; --ld-s-typography-label2-text-case: uppercase; --ld-s-opacity-25: 0.25; --ld-s-opacity-overlay: .80; --ld-s-opacity-disabled: 0.5; } @media (min-width: 1024px) { .lk_ldDarkTheme_YvG_cSkh, .lk_ldTheme_g4TjtB1T { --ld-utility-scale-dimension: 1; --ld-font-size-sm: 19px; --ld-font-size-md: 22px; --ld-font-size-lg: 26px; --ld-font-size-xl: 31px; --ld-font-size-2xl: 36px; --ld-font-size-3xl: 42px; --ld-font-size-4xl: 49px; --ld-font-size-5xl: 58px; --ld-font-size-6xl: 68px; --ld-font-size-7xl: 80px; --ld-font-size-8xl: 94px; --ld-font-size-9xl: 110px; --ld-font-size-multiplier: 1.175; --ld-font-size-banner: 19px; --ld-s-sz-screen-min-w: 1024px; --ld-s-sz-screen-def-w: 1440px; /* This acts as a default mobile size that design team uses. Mainly for Figma */ --ld-s-sz-screen-max-w: 1920px; --ld-s-sz-columns-4col-min-w: 330px; /* Rework math in when needed */ --ld-s-sz-columns-4col-max-w: 400px; /* Originally 416px, updated in 2024. */ --ld-s-sz-columns-6col-min-w: 504px; /* Rework math in when needed */ --ld-s-sz-columns-6col-max-w: 620px; /* Originally 632px, updated value in 2024. */ --ld-s-sz-columns-8col-min-w: 678px; /* Add math when can */ --ld-s-sz-columns-8col-max-w: 840px; /* Originally 848px, updated value in 2024. */ --ld-s-sz-columns-12col-min-w: 1024px; /* Rework math in when needed */ --ld-s-sz-columns-12col-max-w: 1280px; /* Rework math in when needed */ --ld-s-sz-columns-full-width-min-w: 1024px; --ld-s-sz-columns-full-width-def-w: 1440px; --ld-s-sz-columns-full-width-max-w: 1920px; --ld-s-sz-columns-10col-max-w: 1060px; /* Calculated max-width for desktop (this will scale) */ --ld-s-sz-columns-3col-max-w: 290px; /* Calculated max-width for desktop. (This will scale). */ --ld-s-sz-util-min-w: 992px; /* This is calculates the minwidth of 12col at 1024 viewport width */ --ld-s-sz-util-max-w: 1280px; /* This is where you set your max-width of standard/default (excluding full-width) */ --ld-s-sz-util-col-min: calc((992px - (11 * 16px)) / 12); /* This prolly moves into the columns formula */ --ld-s-sz-util-col-max: calc((1280px - (11 * 16px)) / 12); /* This prolly moves into the columns formula */ --ld-s-sz-util-viewport-min: 1024px; --ld-s-sz-util-viewport-max: 1440px; --ld-s-dim-scale-d-1: 16px; --ld-s-dim-scale-d-2: 24px; --ld-s-dim-scale-d-3: 32px; --ld-s-dim-scale-d-4: 40px; --ld-s-dim-scale-d-5: 56px; --ld-s-dim-scale-d-6: 64px; --ld-s-dim-scale-d-7: 80px; --ld-s-dim-scale-d-8: 96px; --ld-s-dim-scale-24-80: 80px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-dim-scaled-least: 16px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-even-less: 24px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-less: 32px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-default: 40px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-more: 56px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-even-more: 64px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-most: 80px; /* This token is used for TS > Figma Variables */ --ld-s-dim-scaled-beyond-most: 96px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-s-xxl: 80px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-util-max-col: 3; /* WIP, math needs to be reworked as a helper when wrapping is needed */ --ld-screen-width: 1440px; --ld-grid-min-w: 472px; /* This may change later, dynamic value used for the grid-layout component. */ --ld-s-typography-heading1-font-size: 49px; --ld-s-typography-heading1-letter-spacing: 2.45px; --ld-s-typography-heading2-font-size: 42px; --ld-s-typography-heading2-letter-spacing: 2.1px; --ld-s-typography-heading3-font-size: 36px; --ld-s-typography-heading3-letter-spacing: 1.8px; --ld-s-typography-heading4-font-size: 31px; --ld-s-typography-heading4-letter-spacing: 1.55px; --ld-s-typography-heading5-font-size: 26px; --ld-s-typography-heading5-letter-spacing: 1.3px; --ld-s-typography-heading6-font-size: 19px; --ld-s-typography-heading6-letter-spacing: 1.1px; --ld-s-typography-subtitle1-font-size: 22px; --ld-s-typography-subtitle1-letter-spacing: 0.275px; --ld-s-typography-subtitle2-font-size: 19px; --ld-s-typography-subtitle2-letter-spacing: 0.238px; --ld-s-typography-banner-font-size: 19px; } } .lk_ldDarkTheme_YvG_cSkh.lk_ldVariantDefault_ey1t_tf3, .lk_ldDarkTheme_YvG_cSkh .lk_ldVariantDefault_ey1t_tf3, .lk_ldTheme_g4TjtB1T.lk_ldVariantDefault_ey1t_tf3, .lk_ldTheme_g4TjtB1T .lk_ldVariantDefault_ey1t_tf3 { --ld-s-color-accent-primary-lighter: #EDEBE6; --ld-s-color-accent-primary-default: #E8E6E0; --ld-s-color-accent-primary-darker: #E3E1DA; --ld-s-color-accent-primary-disabled: rgba(232,230,224,0.5); --ld-s-color-accent-primary-opacity-default-lighter: rgba(232,230,224,0.3); --ld-s-color-accent-secondary-lighter: #ea7b50; --ld-s-color-accent-secondary-default: #cc4c19; --ld-s-color-accent-secondary-darker: #8f3511; --ld-s-color-accent-secondary-disabled: #cc4c19; --ld-s-color-accent-electrified-default: #2468ff; --ld-s-color-foreground-lighter: #EDEBE6; --ld-s-color-foreground-default: #E8E6E0; --ld-s-color-foreground-darker: #E3E1DA; --ld-s-color-foreground-disabled: #E8E6E0; --ld-s-color-foreground-on-accent: #232632; --ld-s-color-foreground-on-disabled: #232632; --ld-s-color-foreground-opacity-on-accent-lighter: rgba(35,38,50,0.3); --ld-s-color-elevation-raised-lighter: #303547; --ld-s-color-elevation-raised-default: #2E3243; --ld-s-color-elevation-raised-darker: #2B2F3E; --ld-s-color-elevation-inset-lighter: #1B1D25; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-default: #181A20; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-darker: #15171D; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-lighter: #272A39; --ld-s-color-canvas-default: #232632; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-darker: #1E212B; /* This can be used if the page needs some variance in background colour */ --ld-s-color-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-utility-error-disabled: hsl(347, 80%, 50%); --ld-s-color-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-utility-success-disabled: hsl(115, 80%, 50%); --ld-s-color-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-utility-modifiers-midlight: #ffffff1a; --ld-s-color-utility-modifiers-mid: rgba(255,255,255,0.3); --ld-s-color-common-white: #ffffff; --ld-s-color-common-black: #171717; --ld-s-color-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-common-true-black: #000000; --ld-s-color-common-inherit-theme-default: #ffffff; --ld-s-color-common-inherit-theme-inverse: #171717; } .lk_ldDarkTheme_YvG_cSkh.lk_ldVariantAlt_vpN1ye7b, .lk_ldDarkTheme_YvG_cSkh .lk_ldVariantAlt_vpN1ye7b, .lk_ldTheme_g4TjtB1T.lk_ldVariantAlt_vpN1ye7b, .lk_ldTheme_g4TjtB1T .lk_ldVariantAlt_vpN1ye7b { --ld-s-color-accent-primary-lighter: #EDEBE6; --ld-s-color-accent-primary-default: #E8E6E0; --ld-s-color-accent-primary-darker: #E3E1DA; --ld-s-color-accent-primary-disabled: rgba(232,230,224,0.5); --ld-s-color-accent-primary-opacity-default-lighter: rgba(232,230,224,0.3); --ld-s-color-accent-secondary-lighter: #ea7b50; --ld-s-color-accent-secondary-default: #cc4c19; --ld-s-color-accent-secondary-darker: #8f3511; --ld-s-color-accent-secondary-disabled: #cc4c19; --ld-s-color-accent-electrified-default: #2468ff; --ld-s-color-foreground-lighter: #EDEBE6; --ld-s-color-foreground-default: #E8E6E0; --ld-s-color-foreground-darker: #E3E1DA; --ld-s-color-foreground-disabled: #E8E6E0; --ld-s-color-foreground-on-accent: #232632; --ld-s-color-foreground-on-disabled: #232632; --ld-s-color-foreground-opacity-on-accent-lighter: rgba(35,38,50,0.3); --ld-s-color-elevation-raised-lighter: #303547; --ld-s-color-elevation-raised-default: #2E3243; --ld-s-color-elevation-raised-darker: #2B2F3E; --ld-s-color-elevation-inset-lighter: #1B1D25; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-default: #181A20; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-darker: #15171D; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-lighter: #272A39; --ld-s-color-canvas-default: #232632; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-darker: #1E212B; /* This can be used if the page needs some variance in background colour */ --ld-s-color-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-utility-error-disabled: hsl(347, 80%, 50%); --ld-s-color-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-utility-success-disabled: hsl(115, 80%, 50%); --ld-s-color-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-utility-modifiers-midlight: #ffffff1a; --ld-s-color-utility-modifiers-mid: rgba(255,255,255,0.3); --ld-s-color-common-white: #ffffff; --ld-s-color-common-black: #171717; --ld-s-color-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-common-true-black: #000000; --ld-s-color-common-inherit-theme-default: #ffffff; --ld-s-color-common-inherit-theme-inverse: #171717; } .lk_ldLightTheme_MQPtVRrY, .lk_ldTheme_UvPl22Sb { --ld-color-core-black: #171717; --ld-color-core-white: #ffffff; --ld-color-core-yellow-01: hsl(39, 100%, 60%); --ld-color-core-yellow-02: hsl(39, 80%, 50%); --ld-color-core-yellow-03: hsl(39, 60%, 40%); --ld-color-core-red-01: hsl(347, 100%, 60%); --ld-color-core-red-02: hsl(347, 80%, 50%); --ld-color-core-red-03: hsl(347, 60%, 40%); --ld-color-core-blue-01: hsl(206, 100%, 60%); --ld-color-core-blue-02: hsl(206, 80%, 50%); --ld-color-core-blue-03: hsl(206, 60%, 40%); --ld-color-core-green-01: hsl(115, 100%, 60%); --ld-color-core-green-02: hsl(115, 80%, 50%); --ld-color-core-green-03: hsl(115, 60%, 40%); --ld-color-core-gradient-linear-full: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 100%); --ld-color-core-gradient-linear-75: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 75%); --ld-color-core-gradient-linear-50: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 50%); --ld-color-core-gradient-linear-25: linear-gradient(0deg, rgba(23, 23, 23, 0.75) 0%, rgba(23, 23, 23, 0) 25%); --ld-color-core-opacity-white-10: rgba(255,255,255,0.1); /* 10% white. */ --ld-color-core-opacity-white-20: rgba(255,255,255,0.2); /* 20% white. */ --ld-color-core-opacity-true-black-10: rgba(0,0,0,0.1); --ld-color-core-opacity-true-black-30: rgba(0,0,0,0.3); --ld-color-core-opacity-true-black-75: rgba(0,0,0,0.75); --ld-color-core-opacity-true-black-90: rgba(0,0,0,0.9); --ld-color-core-opacity-black-10: rgba(23,23,23,0.1); --ld-color-core-opacity-black-75: rgba(23,23,23,0.75); --ld-color-core-opacity-black-90: rgba(23,23,23,0.9); --ld-color-core-true-black: #000000; --ld-color-legacy-deepblue-lightest: #4D5268; --ld-color-legacy-deepblue-light: #313649; --ld-color-legacy-deepblue-default: #232635; /* Base/Default deepblue colour */ --ld-color-legacy-deepblue-dark: #161825; --ld-color-legacy-deepblue-darkest: #0C0E1B; --ld-color-legacy-smoke-lightest: #F8F6EF; --ld-color-legacy-smoke-light: #F0EEE7; --ld-color-legacy-smoke-default: #E4E1D7; --ld-color-legacy-smoke-dark: #D7D3C6; --ld-color-legacy-smoke-darkest: #CDC9BC; --ld-color-legacy-miso-light: #796E64; --ld-color-legacy-miso-default: #5C534A; --ld-color-legacy-miso-dark: #4F443A; --ld-color-legacy-neutral-storm: #3A404A; --ld-color-legacy-neutral-stone: #CECED0; --ld-color-legacy-neutral-mortar: #BEB4B2; --ld-color-legacy-lexus-brand-white: #FFFFFF; --ld-color-legacy-lexus-brand-black: #111111; --ld-color-legacy-senkei-inari: #CA4B19; --ld-color-legacy-senkei-ochre: #BA161A; --ld-color-legacy-senkei-clay: #D5B461; --ld-color-legacy-moss-light: #656865; --ld-color-legacy-moss-default: #4B4D4B; --ld-color-legacy-moss-dark: #3B3D3B; --ld-color-legacy-iron-light: #6D6666; --ld-color-legacy-iron-default: #524C4C; --ld-color-legacy-iron-dark: #433C3C; --ld-color-legacy-ocean-light: #32333A; --ld-color-legacy-ocean-default: #232429; --ld-color-legacy-ocean-dark: #16171B; --ld-color-legacy-status-success: #1E8A15; --ld-color-legacy-status-error: #BA161A; --ld-color-legacy-status-warning: #F88F39; --ld-color-legacy-ownership-success: #1E8A15; --ld-color-legacy-ownership-error: #BA161A; --ld-color-legacy-ownership-warning: #F88F39; --ld-color-legacy-opacity-deepblue-default-75: hsla(237,100%,4%,0.75); --ld-color-legacy-opacity-deepblue-default-90: hsla(226,51%,8%,0.90); --ld-color-legacy-opacity-deepblue-default-95: hsla(231,30%,13%,0.95); --ld-color-legacy-opacity-deepblue-dark-75: hsla(232,25%,12%,0.75); --ld-color-legacy-opacity-deepblue-dark-90: hsla(232,25%,12%,0.90); --ld-color-legacy-opacity-deepblue-dark-95: hsla(232,25%,12%,0.50); --ld-color-legacy-opacity-smoke-default-75: hsla(46,19%,87%,0.75); --ld-color-legacy-opacity-smoke-default-90: hsla(46,19%,87%,0.90); --ld-color-legacy-opacity-smoke-default-95: hsla(46,19%,87%,0.95); --ld-color-legacy-opacity-smoke-dark-75: hsla(46,18%,81%,0.75); --ld-color-legacy-opacity-smoke-dark-90: hsla(46,18%,81%,0.90); --ld-color-legacy-opacity-smoke-dark-95: hsla(46,18%,81%,0.95); --ld-color-lexus-deepblue-50: #6E727E; /* 30% white on top of the 100 deepblue colour. */ --ld-color-lexus-deepblue-100: #303547; --ld-color-lexus-deepblue-200: #2E3243; --ld-color-lexus-deepblue-300: #2B2F3E; --ld-color-lexus-deepblue-400: #272A39; --ld-color-lexus-deepblue-500: #232632; --ld-color-lexus-deepblue-600: #1E212B; --ld-color-lexus-deepblue-700: #1B1D25; --ld-color-lexus-deepblue-800: #181A20; --ld-color-lexus-deepblue-900: #15171D; --ld-color-lexus-deepblue-opacity-30: rgba(35,38,50,0.3); /* 30% of the 500 color. */ --ld-color-lexus-deepblue-opacity-50: rgba(35,38,50,0.5); /* 50% of the accent default colour. */ --ld-color-lexus-smoke-100: #FAFAF9; --ld-color-lexus-smoke-200: #F6F5F3; --ld-color-lexus-smoke-300: #F1F0EC; --ld-color-lexus-smoke-400: #EDEBE6; --ld-color-lexus-smoke-500: #E8E6E0; --ld-color-lexus-smoke-600: #E3E1DA; --ld-color-lexus-smoke-700: #DFDCD4; --ld-color-lexus-smoke-800: #DAD8CE; --ld-color-lexus-smoke-900: #D6D3C8; --ld-color-lexus-smoke-1000: #B6B6B5; /* Created with 30% black on top of smoke 100. */ --ld-color-lexus-smoke-opacity-30: rgba(232,230,224,0.3); /* 30% of the 500 colour. */ --ld-color-lexus-smoke-opacity-50: rgba(232,230,224,0.5); /* 50% of the accent default colour. */ --ld-color-lexus-inari-100: #f8d2c3; --ld-color-lexus-inari-200: #f5bfa9; --ld-color-lexus-inari-300: #f0a384; --ld-color-lexus-inari-400: #ea7b50; --ld-color-lexus-inari-500: #cc4c19; --ld-color-lexus-inari-600: #8f3511; --ld-color-lexus-inari-700: #64250c; --ld-color-lexus-inari-800: #461a08; --ld-color-lexus-inari-900: #311206; --ld-color-lexus-ochre-100: #f8bfc0; --ld-color-lexus-ochre-200: #f5a3a5; --ld-color-lexus-ochre-300: #f07c7d; --ld-color-lexus-ochre-400: #e94345; --ld-color-lexus-ochre-500: #bb1619; --ld-color-lexus-ochre-600: #830f11; --ld-color-lexus-ochre-700: #5c0a0c; --ld-color-lexus-ochre-800: #400708; --ld-color-lexus-ochre-900: #2d0506; --ld-color-lexus-clay-100: #f8e7bf; --ld-color-lexus-clay-200: #f5dda3; --ld-color-lexus-clay-300: #f0ce7c; --ld-color-lexus-clay-400: #e9b943; --ld-color-lexus-clay-500: #bb8c16; --ld-color-lexus-clay-600: #83620f; --ld-color-lexus-clay-700: #5c440a; --ld-color-lexus-clay-800: #403007; --ld-color-lexus-clay-900: #2d2205; --ld-hue-core-red: 347; --ld-hue-core-green: 115; --ld-hue-core-blue: 206; --ld-hue-core-yellow: 39; --ld-hue-lexus-inari: 17; --ld-hue-lexus-deepblue: 230; --ld-hue-lexus-smoke: 46; --ld-hue-lexus-ochre: 359; --ld-hue-lexus-clay: 43; --ld-documentation-swatch-outline: #ffffff; --ld-utility-color-modifier-10: .1; /* 10% color modifier increments */ --ld-utility-color-modifier-15: .15; /* 15% color modifier increments */ --ld-utility-color-modifier-20: .20; /* 20% color modifier increments */ --ld-utility-color-modifier-30: .30; /* 30% color modifier increments */ --ld-utility-color-modifier-40: .40; /* 40% color modifier increments */ --ld-utility-color-modifier-50: .50; /* 50% color modifier increments */ --ld-utility-color-modifier-80: .80; /* 80% color modifier increments */ --ld-utility-color-modifier-05: .05; /* 5% color modifier increments */ --ld-utility-color-modifier-active: .30; /* active color modifier */ --ld-utility-color-modifier-smoke-lighten: .50; /* active color modifier */ --ld-utility-color-modifier-smoke-darken: .05; /* active color modifier */ --ld-utility-color-modifier-deepblue-lighten: .1; /* active color modifier */ --ld-utility-color-modifier-deepblue-darken: .1; /* active color modifier */ --ld-utility-base: 16; --ld-utility-multiplier: 1.25; --ld-utility-scale-dimension: .5; --ld-font-size-xs: 16px; --ld-font-size-sm: 18px; --ld-font-size-md: 20px; --ld-font-size-lg: 23px; --ld-font-size-xl: 26px; --ld-font-size-2xl: 29px; --ld-font-size-3xl: 33px; --ld-font-size-4xl: 37px; --ld-font-size-5xl: 42px; --ld-font-size-6xl: 47px; --ld-font-size-7xl: 53px; --ld-font-size-8xl: 60px; --ld-font-size-9xl: 68px; --ld-font-size-base: 16px; --ld-font-size-multiplier: 1.125; --ld-font-size-static-xs: 12px; --ld-font-size-static-sm: 13px; --ld-font-size-static-md: 15px; --ld-font-size-static-lg: 16px; /* Equivalent with scaled base value. */ --ld-font-size-static-xl: 19px; --ld-font-size-banner: 13px; --ld-font-families-headlines: Nobel, arial, sans-serif; --ld-font-families-body: Nobel, arial, sans-serif; --ld-line-heights-headlines-sm: 1.3; --ld-line-heights-headlines-default: 1; --ld-line-heights-headlines-lg: 1.15; --ld-line-heights-headlines-xl: 1.25; --ld-line-heights-body-default: 1.5; --ld-line-heights-body-relaxed: 1.75; --ld-line-heights-button-default: 16px; --ld-font-weights-book: 300; --ld-font-weights-regular: 400; --ld-font-weights-bold: 700; --ld-letter-spacing-body: 0; --ld-letter-spacing-headlines: 0.05; --ld-letter-spacing-smaller-headlines: 0.02; --ld-letter-spacing-buttons: 0.12; --ld-letter-spacing-captions: 0.0; --ld-letter-spacing-subtitles: 0.0125; --ld-paragraph-spacing-headings: 16px; --ld-paragraph-spacing-body: 32px; --ld-text-case-none: none; --ld-text-case-uppercase: uppercase; --ld-text-decoration-none: none; --ld-text-decoration-underline: underline; --ld-scale-minor-second: 1.067; --ld-scale-major-second: 1.125; --ld-scale-minor-third: 1.200; --ld-scale-major-third: 1.250; --ld-scale-perfect-fourth: 1.333; --ld-scale-augmented-fourth: 1.414; --ld-scale-perfect-fifth: 1.500; --ld-scale-golden-ratio: 1.618; --ld-scale-desktop: 1.175; --ld-prim-dim-0: 0px; --ld-prim-dim-4: 4px; --ld-prim-dim-8: 8px; --ld-prim-dim-12: 12px; --ld-prim-dim-16: 16px; --ld-prim-dim-20: 20px; --ld-prim-dim-24: 24px; --ld-prim-dim-32: 32px; --ld-prim-dim-40: 40px; --ld-prim-dim-48: 48px; --ld-prim-dim-56: 56px; --ld-prim-dim-64: 64px; --ld-prim-dim-80: 80px; --ld-prim-dim-96: 96px; --ld-prim-dim-120: 120px; --ld-prim-b-r-xm: 6px; --ld-prim-b-r-lg: 7px; --ld-prim-b-r-sm: 3px; --ld-prim-b-r-md: 5px; --ld-prim-b-r-xl: 8px; --ld-prim-b-r-rounded: 999px; --ld-prim-b-r-none: 0; --ld-prim-box-shadow-0: 0; --ld-prim-box-shadow-1: 1; --ld-prim-box-shadow-2: 2; --ld-prim-box-shadow-4: 4; --ld-prim-box-shadow-8: 8; --ld-prim-box-shadow-12: 12; --ld-prim-box-shadow-16: 16; --ld-prim-box-shadow-24: 24; --ld-prim-box-shadow-32: 32; --ld-prim-box-shadow-64: 64; --ld-prim-box-shadow-none-x: 0; --ld-prim-box-shadow-none-y: 0; --ld-prim-box-shadow-none-blur: 0; --ld-prim-box-shadow-none-spread: 0; --ld-prim-box-shadow-none-type: dropShadow; --ld-prim-box-shadow-none-color: #17171726; --ld-prim-box-shadow-number-15: 26; /* These are used to add alpha to the shadows instead of using static values */ --ld-prim-box-shadow-number-10: 1a; /* These are used to add alpha to the shadows instead of using static values */ --ld-prim-box-shadow-0-1-2-x: 0; --ld-prim-box-shadow-0-1-2-y: 1px; --ld-prim-box-shadow-0-1-2-blur: 2px; --ld-prim-box-shadow-0-1-2-spread: 0; --ld-prim-box-shadow-0-1-2-type: dropShadow; --ld-prim-box-shadow-0-1-2-color: #17171726; --ld-prim-box-shadow-0-4-8-x: 0; --ld-prim-box-shadow-0-4-8-y: 4px; --ld-prim-box-shadow-0-4-8-blur: 8px; --ld-prim-box-shadow-0-4-8-spread: 0; --ld-prim-box-shadow-0-4-8-type: dropShadow; --ld-prim-box-shadow-0-4-8-color: #17171726; --ld-prim-box-shadow-0-8-16-x: 0; --ld-prim-box-shadow-0-8-16-y: 8px; --ld-prim-box-shadow-0-8-16-blur: 16px; --ld-prim-box-shadow-0-8-16-spread: 0; --ld-prim-box-shadow-0-8-16-type: dropShadow; --ld-prim-box-shadow-0-8-16-color: #17171726; --ld-prim-box-shadow-0-12-24-x: 0; --ld-prim-box-shadow-0-12-24-y: 12px; --ld-prim-box-shadow-0-12-24-blur: 24px; --ld-prim-box-shadow-0-12-24-spread: 0; --ld-prim-box-shadow-0-12-24-type: dropShadow; --ld-prim-box-shadow-0-12-24-color: #17171726; --ld-prim-box-shadow-0-32-64-x: 0; --ld-prim-box-shadow-0-32-64-y: 32px; --ld-prim-box-shadow-0-32-64-blur: 64px; --ld-prim-box-shadow-0-32-64-spread: 0; --ld-prim-box-shadow-0-32-64-type: dropShadow; --ld-prim-box-shadow-0-32-64-color: #17171726; --ld-prim-box-shadow-color-default: #17171726; --ld-prim-timings-100: 100; /* 100ms */ --ld-prim-timings-200: 200; /* 200ms */ --ld-prim-timings-300: 300; /* 300ms */ --ld-prim-timings-500: 500; /* 500ms */ --ld-prim-timings-1000: 1000; /* 1000ms = 1s */ --ld-prim-timings-2000: 2000; /* 2000ms = 2s */ --ld-dimension-0: 0px; --ld-dimension-1: 1px; --ld-dimension-2: 2px; --ld-dimension-4: 4px; --ld-dimension-8: 8px; --ld-dimension-12: 12px; --ld-dimension-13: 13px; --ld-dimension-16: 16px; --ld-dimension-19: 19px; --ld-dimension-24: 24px; --ld-dimension-32: 32px; --ld-dimension-40: 40px; --ld-dimension-48: 48px; --ld-dimension-56: 56px; --ld-dimension-64: 64px; --ld-dimension-72: 72px; --ld-dimension-80: 80px; --ld-dimension-88: 88px; --ld-dimension-96: 96px; --ld-dimension-104: 104px; --ld-dimension-112: 112px; --ld-dimension-120: 120px; --ld-sizing-xxs: 16px; --ld-sizing-xs: 24px; --ld-sizing-sm: 32px; --ld-sizing-md: 40px; --ld-sizing-lg: 48px; --ld-sizing-xl: 64px; --ld-s-sz-screen-min-w: 360px; --ld-s-sz-screen-def-w: 375px; /* This acts as a default mobile size that design team uses. Mainly for Figma */ --ld-s-sz-screen-max-w: 1023px; --ld-s-sz-columns-4col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-4col-max-w: 376px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-6col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-6col-max-w: 576px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-8col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-8col-max-w: 776px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-12col-min-w: 328px; /* Rework math in when needed */ --ld-s-sz-columns-12col-max-w: 1176px; /* Originally 100%, updated in 2024. */ --ld-s-sz-columns-full-width-min-w: 360px; --ld-s-sz-columns-full-width-def-w: 375px; --ld-s-sz-columns-full-width-max-w: 1023px; --ld-s-sz-columns-10col-max-w: 976px; /* Calculated max-width for 10 col Mobile (this will scale). */ --ld-s-sz-columns-3col-max-w: 276px; /* Calculated max-width for Mobile. (This will scale). */ --ld-s-sz-util-min-w: 328px; /* This is calculates the minwidth of 12col at 1024 viewport width */ --ld-s-sz-util-max-w: 992px; /* This is where you set your max-width of standard/default (excluding full-width) */ --ld-s-sz-util-col-min: calc((328px - (5 * 16px)) / 6); /* Find a way to import the 6 properly. Static atm */ --ld-s-sz-util-col-max: calc((992px - (5 * 16px)) / 6); /* This prolly moves into the columns formula */ --ld-s-sz-util-gutter: 16px; --ld-s-sz-util-margin: 16px; --ld-s-sz-util-breakpoint: 1024px; --ld-s-sz-util-viewport-min: 360px; --ld-s-sz-util-viewport-max: 1024px; --ld-s-dim-d-0: 0px; --ld-s-dim-d-1: 4px; --ld-s-dim-d-2: 8px; --ld-s-dim-d-3: 12px; --ld-s-dim-d-4: 16px; --ld-s-dim-d-5: 24px; --ld-s-dim-d-6: 32px; --ld-s-dim-d-7: 40px; --ld-s-dim-d-8: 48px; --ld-s-dim-d-9: 64px; --ld-s-dim-d-10: 80px; --ld-s-dim-d-11: 96px; --ld-s-dim-d-12: 120px; --ld-s-dim-scale-d-0: 0px; --ld-s-dim-scale-d-1: 8px; --ld-s-dim-scale-d-2: 16px; --ld-s-dim-scale-d-3: 20px; --ld-s-dim-scale-d-4: 24px; --ld-s-dim-scale-d-5: 32px; --ld-s-dim-scale-d-6: 40px; --ld-s-dim-scale-d-7: 48px; --ld-s-dim-scale-d-8: 64px; --ld-s-dim-scale-24-80: 24px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-dim-static-none: 0px; /* This is the most upto date static token set */ --ld-s-dim-static-4xs: 4px; /* This is the most upto date static token set */ --ld-s-dim-static-3xs: 8px; /* This is the most upto date static token set */ --ld-s-dim-static-2xs: 12px; /* This is the most upto date static token set */ --ld-s-dim-static-xs: 16px; /* This is the most upto date static token set */ --ld-s-dim-static-s: 24px; /* This is the most upto date static token set */ --ld-s-dim-static-m: 32px; /* This is the most upto date static token set */ --ld-s-dim-static-l: 40px; /* This is the most upto date static token set */ --ld-s-dim-static-xl: 48px; /* This is the most upto date static token set */ --ld-s-dim-static-2xl: 64px; /* This is the most upto date static token set */ --ld-s-dim-static-3xl: 80px; /* This is the most upto date static token set */ --ld-s-dim-static-4xl: 96px; /* This is the most upto date static token set */ --ld-s-dim-static-5xl: 120px; /* This is the most upto date static token set */ --ld-s-dim-scaled-none: 0px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-least: 8px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-even-less: 16px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-less: 20px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-default: 24px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-more: 32px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-even-more: 40px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-most: 48px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-beyond-most: 64px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-s-xxl: 24px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-util-max-col: 2; --ld-s-box-shadow-none-x: 0; --ld-s-box-shadow-none-y: 0; --ld-s-box-shadow-none-blur: 0; --ld-s-box-shadow-none-spread: 0; --ld-s-box-shadow-none-type: dropShadow; --ld-s-box-shadow-none-color: #17171726; --ld-s-box-shadow-even-less-x: 0; --ld-s-box-shadow-even-less-y: 1px; --ld-s-box-shadow-even-less-blur: 2px; --ld-s-box-shadow-even-less-spread: 0; --ld-s-box-shadow-even-less-type: dropShadow; --ld-s-box-shadow-even-less-color: #17171726; --ld-s-box-shadow-less-x: 0; --ld-s-box-shadow-less-y: 4px; --ld-s-box-shadow-less-blur: 8px; --ld-s-box-shadow-less-spread: 0; --ld-s-box-shadow-less-type: dropShadow; --ld-s-box-shadow-less-color: #17171726; --ld-s-box-shadow-default-x: 0; --ld-s-box-shadow-default-y: 8px; --ld-s-box-shadow-default-blur: 16px; --ld-s-box-shadow-default-spread: 0; --ld-s-box-shadow-default-type: dropShadow; --ld-s-box-shadow-default-color: #17171726; --ld-s-box-shadow-more-x: 0; --ld-s-box-shadow-more-y: 12px; --ld-s-box-shadow-more-blur: 24px; --ld-s-box-shadow-more-spread: 0; --ld-s-box-shadow-more-type: dropShadow; --ld-s-box-shadow-more-color: #17171726; --ld-s-box-shadow-even-more-x: 0; --ld-s-box-shadow-even-more-y: 32px; --ld-s-box-shadow-even-more-blur: 64px; --ld-s-box-shadow-even-more-spread: 0; --ld-s-box-shadow-even-more-type: dropShadow; --ld-s-box-shadow-even-more-color: #17171726; --ld-s-border-radius-rounded: 999px; --ld-s-border-radius-small: 3px; --ld-s-border-radius-medium: 5px; --ld-s-border-radius-extra-large: 8px; --ld-s-border-radius-extra-medium: 6px; --ld-s-border-radius-large: 7px; --ld-s-border-radius-none: 0; --ld-s-min-w-default: 190px; /* This is the first reusable min-w token. Add more tokens to this group if patterns surface */ --ld-s-min-w-more: 220px; /* Currently: Min-width used for individual buttons */ --ld-s-transition-easing-ease-out: ease-out; --ld-s-transition-duration-fast: 150ms; --ld-s-transition-duration-default: 300ms; --ld-s-transition-duration-slow: 600ms; --ld-s-image-ratio-16-9: calc(16 / 9); --ld-s-image-ratio-1-1: calc(1 / 1); --ld-s-duration-fastest: 100; /* Duration for hover effects. */ --ld-s-duration-fast: 200; /* Default duration for small transitions */ --ld-s-duration-moderate: 300; /* Slightly longer durations */ --ld-s-duration-moderate-slow: 500; /* Slow duration for more complex animations */ --ld-s-duration-slowest: 2000; /* Duration for long animations like indicator lines. */ --ld-s-duration-slow: 1000; --ld-s-delay-default: 500; /* Default delay duration for between animations within a sequence. */ --ld-s-delay-long: 1000; /* A longer delay duration before an automatic animation sequence begins. */ --ld-s-easings-ease-out: ease-out; --ld-s-easings-linear: linear; --ld-s-easings-ease: ease; /* Easings for hover animations. */ --ld-s-color-accent-primary-lighter: #272A39; --ld-s-color-accent-primary-default: #232632; --ld-s-color-accent-primary-darker: #1E212B; --ld-s-color-accent-primary-disabled: rgba(35,38,50,0.5); --ld-s-color-accent-primary-opacity-default-lighter: rgba(35,38,50,0.3); --ld-s-color-accent-secondary-lighter: #ea7b50; --ld-s-color-accent-secondary-default: #cc4c19; --ld-s-color-accent-secondary-darker: #8f3511; --ld-s-color-accent-secondary-disabled: #cc4c19; --ld-s-color-accent-electrified-default: #2468ff; --ld-s-color-foreground-lighter: #272A39; --ld-s-color-foreground-default: #232632; --ld-s-color-foreground-darker: #1E212B; --ld-s-color-foreground-disabled: #232632; --ld-s-color-foreground-on-accent: #E8E6E0; --ld-s-color-foreground-on-disabled: #E8E6E0; --ld-s-color-foreground-opacity-on-accent-lighter: rgba(232,230,224,0.3); --ld-s-color-elevation-raised-lighter: #FAFAF9; --ld-s-color-elevation-raised-default: #F6F5F3; --ld-s-color-elevation-raised-darker: #F1F0EC; --ld-s-color-elevation-inset-lighter: #DFDCD4; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-default: #DAD8CE; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-darker: #D6D3C8; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-lighter: #E8E6E0; --ld-s-color-canvas-default: #E3E1DA; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-darker: #DFDCD4; /* This can be used if the page needs some variance in background colour */ --ld-s-color-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-utility-error-disabled: hsl(347, 60%, 40%); --ld-s-color-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-utility-success-disabled: hsl(115, 60%, 40%); --ld-s-color-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-utility-modifiers-midlight: #1717171a; --ld-s-color-utility-modifiers-mid: rgba(23,23,23,0.3); --ld-s-color-common-white: #ffffff; --ld-s-color-common-black: #171717; --ld-s-color-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-common-true-black: #000000; --ld-s-color-common-inherit-theme-default: #171717; --ld-s-color-common-inherit-theme-inverse: #ffffff; --ld-screen-width: 375px; --ld-width-default: 327px; --ld-width-less: 327px; --ld-width-even-less: 327px; --ld-grid-min-w: 488px; /* This may change later, dynamic value used for the grid-layout component. */ --ld-s-typography-heading1-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading1-font-weight: 300; --ld-s-typography-heading1-line-height: 1.15; --ld-s-typography-heading1-font-size: 37px; --ld-s-typography-heading1-letter-spacing: 1.85px; --ld-s-typography-heading1-paragraph-spacing: 16px; --ld-s-typography-heading1-text-case: uppercase; --ld-s-typography-heading2-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading2-font-weight: 300; --ld-s-typography-heading2-line-height: 1.15; --ld-s-typography-heading2-font-size: 33px; --ld-s-typography-heading2-letter-spacing: 1.65px; --ld-s-typography-heading2-paragraph-spacing: 16px; --ld-s-typography-heading2-text-case: uppercase; --ld-s-typography-heading3-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading3-font-weight: 300; --ld-s-typography-heading3-line-height: 1.15; --ld-s-typography-heading3-font-size: 29px; --ld-s-typography-heading3-letter-spacing: 1.45px; --ld-s-typography-heading3-paragraph-spacing: 16px; --ld-s-typography-heading3-text-case: uppercase; --ld-s-typography-heading4-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading4-font-weight: 300; --ld-s-typography-heading4-line-height: 1.15; --ld-s-typography-heading4-font-size: 26px; --ld-s-typography-heading4-letter-spacing: 1.3px; --ld-s-typography-heading4-paragraph-spacing: 16px; --ld-s-typography-heading4-text-case: uppercase; --ld-s-typography-heading5-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading5-font-weight: 300; --ld-s-typography-heading5-line-height: 1.15; --ld-s-typography-heading5-font-size: 23px; --ld-s-typography-heading5-letter-spacing: 1.15px; --ld-s-typography-heading5-paragraph-spacing: 16px; --ld-s-typography-heading5-text-case: uppercase; --ld-s-typography-heading6-font-family: Nobel, arial, sans-serif; --ld-s-typography-heading6-font-weight: 400; --ld-s-typography-heading6-line-height: 1.15; --ld-s-typography-heading6-font-size: 18px; --ld-s-typography-heading6-letter-spacing: calc(20px* 0.02); --ld-s-typography-heading6-paragraph-spacing: 16px; --ld-s-typography-heading6-text-case: uppercase; --ld-s-typography-subtitle1-font-family: Nobel, arial, sans-serif; --ld-s-typography-subtitle1-font-weight: 300; --ld-s-typography-subtitle1-line-height: 1.5; --ld-s-typography-subtitle1-font-size: 20px; --ld-s-typography-subtitle1-letter-spacing: 0.25px; --ld-s-typography-subtitle1-paragraph-spacing: 16px; --ld-s-typography-subtitle1-text-case: none; --ld-s-typography-subtitle2-font-family: Nobel, arial, sans-serif; --ld-s-typography-subtitle2-font-weight: 300; --ld-s-typography-subtitle2-line-height: 1.5; --ld-s-typography-subtitle2-font-size: 18px; --ld-s-typography-subtitle2-letter-spacing: 0.225px; --ld-s-typography-subtitle2-paragraph-spacing: 16px; --ld-s-typography-subtitle2-text-case: none; --ld-s-typography-body1-font-family: Nobel, arial, sans-serif; --ld-s-typography-body1-font-weight: 300; --ld-s-typography-body1-line-height: 1.5; --ld-s-typography-body1-font-size: 19px; --ld-s-typography-body1-letter-spacing: 0px; --ld-s-typography-body1-paragraph-spacing: 32px; --ld-s-typography-body1-text-case: none; --ld-s-typography-body2-font-family: Nobel, arial, sans-serif; --ld-s-typography-body2-font-weight: 300; --ld-s-typography-body2-line-height: 1.5; --ld-s-typography-body2-font-size: 16px; --ld-s-typography-body2-letter-spacing: 0px; --ld-s-typography-body2-paragraph-spacing: 32px; --ld-s-typography-body2-text-case: none; --ld-s-typography-caption1-font-family: Nobel, arial, sans-serif; --ld-s-typography-caption1-font-weight: 300; --ld-s-typography-caption1-line-height: 1.5; --ld-s-typography-caption1-font-size: 15px; --ld-s-typography-caption1-letter-spacing: 0px; --ld-s-typography-caption1-paragraph-spacing: 32px; --ld-s-typography-caption1-text-case: none; --ld-s-typography-disclaimer1-font-family: Nobel, arial, sans-serif; --ld-s-typography-disclaimer1-font-weight: 300; --ld-s-typography-disclaimer1-line-height: 1.5; --ld-s-typography-disclaimer1-font-size: 15px; --ld-s-typography-disclaimer1-letter-spacing: 0px; --ld-s-typography-disclaimer1-paragraph-spacing: 32px; --ld-s-typography-disclaimer1-text-case: none; --ld-s-typography-price1-font-family: Nobel, arial, sans-serif; --ld-s-typography-price1-font-weight: 300; --ld-s-typography-price1-line-height: 1.5; --ld-s-typography-price1-font-size: 13px; --ld-s-typography-price1-letter-spacing: 0px; --ld-s-typography-price1-paragraph-spacing: 32px; --ld-s-typography-price1-text-case: none; --ld-s-typography-label1-font-family: Nobel, arial, sans-serif; --ld-s-typography-label1-font-weight: 700; --ld-s-typography-label1-line-height: 1; --ld-s-typography-label1-font-size: 12px; --ld-s-typography-label1-letter-spacing: 1.44px; --ld-s-typography-label1-paragraph-spacing: 32px; --ld-s-typography-label1-text-case: uppercase; --ld-s-typography-label2-font-family: Nobel, arial, sans-serif; --ld-s-typography-label2-font-weight: 400; --ld-s-typography-label2-line-height: 1.3; --ld-s-typography-label2-font-size: 12px; --ld-s-typography-label2-letter-spacing: 1.44px; --ld-s-typography-label2-paragraph-spacing: 32px; --ld-s-typography-label2-text-case: uppercase; --ld-s-typography-banner-font-family: Nobel, arial, sans-serif; --ld-s-typography-banner-font-weight: 300; --ld-s-typography-banner-line-height: 1.5; --ld-s-typography-banner-font-size: 13px; --ld-s-typography-banner-letter-spacing: 1.44px; --ld-s-typography-banner-paragraph-spacing: 32px; --ld-s-typography-banner-text-case: none; --ld-s-opacity-25: 0.25; --ld-s-opacity-75: 0.7; --ld-s-opacity-disabled: 0.5; --ld-s-opacity-overlay: .80; --ld-s-color-default-accent-primary-lighter: #272A39; --ld-s-color-default-accent-primary-default: #232632; --ld-s-color-default-accent-primary-darker: #1E212B; --ld-s-color-default-accent-primary-disabled: rgba(35,38,50,0.5); /* Pointing to the primitive opacity deepblue colour token. */ --ld-s-color-default-accent-primary-opacity-default-lighter: rgba(35,38,50,0.3); --ld-s-color-default-accent-secondary-lighter: #ea7b50; --ld-s-color-default-accent-secondary-default: #cc4c19; --ld-s-color-default-accent-secondary-darker: #8f3511; --ld-s-color-default-accent-secondary-disabled: #cc4c19; --ld-s-color-default-accent-electrified-default: #2468ff; --ld-s-color-default-foreground-lighter: #272A39; --ld-s-color-default-foreground-default: #232632; --ld-s-color-default-foreground-darker: #1E212B; --ld-s-color-default-foreground-disabled: #232632; --ld-s-color-default-foreground-on-accent: #E8E6E0; --ld-s-color-default-foreground-on-disabled: #E8E6E0; --ld-s-color-default-foreground-opacity-on-accent-lighter: rgba(232,230,224,0.3); --ld-s-color-default-elevation-raised-lighter: #FAFAF9; --ld-s-color-default-elevation-raised-default: #F6F5F3; --ld-s-color-default-elevation-raised-darker: #F1F0EC; --ld-s-color-default-elevation-inset-lighter: #DFDCD4; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-default-elevation-inset-default: #DAD8CE; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-default-elevation-inset-darker: #D6D3C8; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-default-highlight-default: #B6B6B5; --ld-s-color-default-canvas-lighter: #E8E6E0; --ld-s-color-default-canvas-default: #E3E1DA; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-default-canvas-darker: #DFDCD4; /* This can be used if the page needs some variance in background colour */ --ld-s-color-default-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-default-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-default-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-default-utility-error-disabled: hsl(347, 60%, 40%); --ld-s-color-default-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-default-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-default-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-default-utility-success-disabled: hsl(115, 60%, 40%); --ld-s-color-default-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-default-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-default-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-default-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-default-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-default-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-default-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-default-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-default-utility-modifiers-midlight: #1717171a; --ld-s-color-default-utility-modifiers-mid: rgba(23,23,23,0.3); --ld-s-color-default-common-white: #ffffff; --ld-s-color-default-common-black: #171717; --ld-s-color-default-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-default-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-default-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-default-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-default-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-default-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-default-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-default-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-default-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-default-common-true-black: #000000; --ld-s-color-default-common-inherit-theme-default: #171717; /* This black will be black in default theme and swap to white in alt theme. */ --ld-s-color-default-common-inherit-theme-inverse: #ffffff; --ld-s-color-alt-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-alt-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-alt-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-alt-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-alt-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-alt-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-alt-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-alt-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-alt-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-alt-common-white: #ffffff; --ld-s-color-alt-common-black: #171717; --ld-s-color-alt-common-true-black: #000000; --ld-s-color-alt-common-inherit-theme-default: #ffffff; /* This black will be black in default theme and swap to white in alt theme. */ --ld-s-color-alt-common-inherit-theme-inverse: #171717; --ld-s-color-alt-accent-primary-lighter: #EDEBE6; --ld-s-color-alt-accent-primary-default: #E8E6E0; --ld-s-color-alt-accent-primary-darker: #E3E1DA; --ld-s-color-alt-accent-primary-disabled: rgba(232,230,224,0.5); /* Pointing to the primitive opacity smoke colour token. */ --ld-s-color-alt-accent-primary-opacity-default-lighter: rgba(232,230,224,0.3); --ld-s-color-alt-accent-secondary-lighter: #ea7b50; --ld-s-color-alt-accent-secondary-default: #cc4c19; --ld-s-color-alt-accent-secondary-darker: #8f3511; --ld-s-color-alt-accent-secondary-disabled: #cc4c19; --ld-s-color-alt-accent-electrified-default: #2468ff; --ld-s-color-alt-foreground-lighter: #EDEBE6; --ld-s-color-alt-foreground-default: #E8E6E0; --ld-s-color-alt-foreground-darker: #E3E1DA; --ld-s-color-alt-foreground-disabled: #E8E6E0; --ld-s-color-alt-foreground-on-accent: #232632; --ld-s-color-alt-foreground-on-disabled: #232632; --ld-s-color-alt-foreground-opacity-on-accent-lighter: rgba(35,38,50,0.3); --ld-s-color-alt-elevation-raised-lighter: #303547; --ld-s-color-alt-elevation-raised-default: #2E3243; --ld-s-color-alt-elevation-raised-darker: #2B2F3E; --ld-s-color-alt-elevation-inset-lighter: #1B1D25; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-alt-elevation-inset-default: #181A20; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-alt-elevation-inset-darker: #15171D; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-alt-highlight-default: #6E727E; --ld-s-color-alt-canvas-lighter: #272A39; --ld-s-color-alt-canvas-default: #232632; --ld-s-color-alt-canvas-darker: #1E212B; --ld-s-color-alt-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-alt-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-alt-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-alt-utility-error-disabled: hsl(347, 60%, 40%); --ld-s-color-alt-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-alt-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-alt-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-alt-utility-success-disabled: hsl(115, 60%, 40%); --ld-s-color-alt-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-alt-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-alt-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-alt-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-alt-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-alt-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-alt-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-alt-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-alt-utility-modifiers-midlight: #ffffff1a; --ld-s-color-alt-utility-modifiers-mid: rgba(255,255,255,0.3); } @media (min-width: 1024px) { .lk_ldLightTheme_MQPtVRrY, .lk_ldTheme_UvPl22Sb { --ld-utility-scale-dimension: 1; --ld-font-size-sm: 19px; --ld-font-size-md: 22px; --ld-font-size-lg: 26px; --ld-font-size-xl: 31px; --ld-font-size-2xl: 36px; --ld-font-size-3xl: 42px; --ld-font-size-4xl: 49px; --ld-font-size-5xl: 58px; --ld-font-size-6xl: 68px; --ld-font-size-7xl: 80px; --ld-font-size-8xl: 94px; --ld-font-size-9xl: 110px; --ld-font-size-multiplier: 1.175; --ld-font-size-banner: 19px; --ld-s-sz-screen-min-w: 1024px; --ld-s-sz-screen-def-w: 1440px; /* This acts as a default mobile size that design team uses. Mainly for Figma */ --ld-s-sz-screen-max-w: 1920px; --ld-s-sz-columns-4col-min-w: 330px; /* Rework math in when needed */ --ld-s-sz-columns-4col-max-w: 400px; /* Originally 416px, updated in 2024. */ --ld-s-sz-columns-6col-min-w: 504px; /* Rework math in when needed */ --ld-s-sz-columns-6col-max-w: 620px; /* Originally 632px, updated value in 2024. */ --ld-s-sz-columns-8col-min-w: 678px; /* Add math when can */ --ld-s-sz-columns-8col-max-w: 840px; /* Originally 848px, updated value in 2024. */ --ld-s-sz-columns-12col-min-w: 1024px; /* Rework math in when needed */ --ld-s-sz-columns-12col-max-w: 1280px; /* Rework math in when needed */ --ld-s-sz-columns-full-width-min-w: 1024px; --ld-s-sz-columns-full-width-def-w: 1440px; --ld-s-sz-columns-full-width-max-w: 1920px; --ld-s-sz-columns-10col-max-w: 1060px; /* Calculated max-width for desktop (this will scale) */ --ld-s-sz-columns-3col-max-w: 290px; /* Calculated max-width for desktop. (This will scale). */ --ld-s-sz-util-min-w: 992px; /* This is calculates the minwidth of 12col at 1024 viewport width */ --ld-s-sz-util-max-w: 1280px; /* This is where you set your max-width of standard/default (excluding full-width) */ --ld-s-sz-util-col-min: calc((992px - (11 * 16px)) / 12); /* This prolly moves into the columns formula */ --ld-s-sz-util-col-max: calc((1280px - (11 * 16px)) / 12); /* This prolly moves into the columns formula */ --ld-s-sz-util-viewport-min: 1024px; --ld-s-sz-util-viewport-max: 1440px; --ld-s-dim-scale-d-1: 16px; --ld-s-dim-scale-d-2: 24px; --ld-s-dim-scale-d-3: 32px; --ld-s-dim-scale-d-4: 40px; --ld-s-dim-scale-d-5: 56px; --ld-s-dim-scale-d-6: 64px; --ld-s-dim-scale-d-7: 80px; --ld-s-dim-scale-d-8: 96px; --ld-s-dim-scale-24-80: 80px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-dim-scaled-least: 16px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-even-less: 24px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-less: 32px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-default: 40px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-more: 56px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-even-more: 64px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-most: 80px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-beyond-most: 96px; /* This is the most upto date scaled token set */ --ld-s-dim-scaled-s-xxl: 80px; /* A larger scaled value between 80px on desktop to 24px on mobile. */ --ld-s-util-max-col: 3; /* WIP, math needs to be reworked as a helper when wrapping is needed */ --ld-screen-width: 1440px; --ld-grid-min-w: 472px; /* This may change later, dynamic value used for the grid-layout component. */ --ld-s-typography-heading1-font-size: 49px; --ld-s-typography-heading1-letter-spacing: 2.45px; --ld-s-typography-heading2-font-size: 42px; --ld-s-typography-heading2-letter-spacing: 2.1px; --ld-s-typography-heading3-font-size: 36px; --ld-s-typography-heading3-letter-spacing: 1.8px; --ld-s-typography-heading4-font-size: 31px; --ld-s-typography-heading4-letter-spacing: 1.55px; --ld-s-typography-heading5-font-size: 26px; --ld-s-typography-heading5-letter-spacing: 1.3px; --ld-s-typography-heading6-font-size: 19px; --ld-s-typography-heading6-letter-spacing: calc(22px* 0.02); --ld-s-typography-subtitle1-font-size: 22px; --ld-s-typography-subtitle1-letter-spacing: 0.275px; --ld-s-typography-subtitle2-font-size: 19px; --ld-s-typography-subtitle2-letter-spacing: 0.238px; --ld-s-typography-banner-font-size: 19px; } } .lk_ldLightTheme_MQPtVRrY.lk_ldVariantDefault_b0cNPd0h, .lk_ldLightTheme_MQPtVRrY .lk_ldVariantDefault_b0cNPd0h, .lk_ldTheme_UvPl22Sb.lk_ldVariantDefault_b0cNPd0h, .lk_ldTheme_UvPl22Sb .lk_ldVariantDefault_b0cNPd0h { --ld-s-color-accent-primary-lighter: #272A39; --ld-s-color-accent-primary-default: #232632; --ld-s-color-accent-primary-darker: #1E212B; --ld-s-color-accent-primary-disabled: rgba(35,38,50,0.5); --ld-s-color-accent-primary-opacity-default-lighter: rgba(35,38,50,0.3); --ld-s-color-accent-secondary-lighter: #ea7b50; --ld-s-color-accent-secondary-default: #cc4c19; --ld-s-color-accent-secondary-darker: #8f3511; --ld-s-color-accent-secondary-disabled: #cc4c19; --ld-s-color-accent-electrified-default: #2468ff; --ld-s-color-foreground-lighter: #272A39; --ld-s-color-foreground-default: #232632; --ld-s-color-foreground-darker: #1E212B; --ld-s-color-foreground-disabled: #232632; --ld-s-color-foreground-on-accent: #E8E6E0; --ld-s-color-foreground-on-disabled: #E8E6E0; --ld-s-color-foreground-opacity-on-accent-lighter: rgba(232,230,224,0.3); --ld-s-color-elevation-raised-lighter: #FAFAF9; --ld-s-color-elevation-raised-default: #F6F5F3; --ld-s-color-elevation-raised-darker: #F1F0EC; --ld-s-color-elevation-inset-lighter: #DFDCD4; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-default: #DAD8CE; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-darker: #D6D3C8; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-lighter: #E8E6E0; --ld-s-color-canvas-default: #E3E1DA; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-darker: #DFDCD4; /* This can be used if the page needs some variance in background colour */ --ld-s-color-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-utility-error-disabled: hsl(347, 60%, 40%); --ld-s-color-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-utility-success-disabled: hsl(115, 60%, 40%); --ld-s-color-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-utility-modifiers-midlight: #1717171a; --ld-s-color-utility-modifiers-mid: rgba(23,23,23,0.3); --ld-s-color-common-white: #ffffff; --ld-s-color-common-black: #171717; --ld-s-color-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-common-true-black: #000000; --ld-s-color-common-inherit-theme-default: #171717; --ld-s-color-common-inherit-theme-inverse: #ffffff; } .lk_ldLightTheme_MQPtVRrY.lk_ldVariantAlt_v9pqqIYu, .lk_ldLightTheme_MQPtVRrY .lk_ldVariantAlt_v9pqqIYu, .lk_ldTheme_UvPl22Sb.lk_ldVariantAlt_v9pqqIYu, .lk_ldTheme_UvPl22Sb .lk_ldVariantAlt_v9pqqIYu { --ld-s-color-accent-primary-lighter: #EDEBE6; --ld-s-color-accent-primary-default: #E8E6E0; --ld-s-color-accent-primary-darker: #E3E1DA; --ld-s-color-accent-primary-disabled: rgba(232,230,224,0.5); --ld-s-color-accent-primary-opacity-default-lighter: rgba(232,230,224,0.3); --ld-s-color-accent-secondary-lighter: #ea7b50; --ld-s-color-accent-secondary-default: #cc4c19; --ld-s-color-accent-secondary-darker: #8f3511; --ld-s-color-accent-secondary-disabled: #cc4c19; --ld-s-color-accent-electrified-default: #2468ff; --ld-s-color-foreground-lighter: #EDEBE6; --ld-s-color-foreground-default: #E8E6E0; --ld-s-color-foreground-darker: #E3E1DA; --ld-s-color-foreground-disabled: #E8E6E0; --ld-s-color-foreground-on-accent: #232632; --ld-s-color-foreground-on-disabled: #232632; --ld-s-color-foreground-opacity-on-accent-lighter: rgba(35,38,50,0.3); --ld-s-color-elevation-raised-lighter: #303547; --ld-s-color-elevation-raised-default: #2E3243; --ld-s-color-elevation-raised-darker: #2B2F3E; --ld-s-color-elevation-inset-lighter: #1B1D25; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-default: #181A20; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-elevation-inset-darker: #15171D; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-lighter: #272A39; --ld-s-color-canvas-default: #232632; /* This is used as the base level of the page (For variance to break up the page, canvas-alt exists too) */ --ld-s-color-canvas-darker: #1E212B; /* This can be used if the page needs some variance in background colour */ --ld-s-color-utility-error-lighter: hsl(347, 100%, 60%); --ld-s-color-utility-error-default: hsl(347, 60%, 40%); --ld-s-color-utility-error-darker: hsl(347, 60%, 40%); --ld-s-color-utility-error-disabled: hsl(347, 60%, 40%); --ld-s-color-utility-success-lighter: hsl(115, 100%, 60%); --ld-s-color-utility-success-default: hsl(115, 60%, 40%); --ld-s-color-utility-success-darker: hsl(115, 60%, 40%); --ld-s-color-utility-success-disabled: hsl(115, 60%, 40%); --ld-s-color-utility-warning-lighter: hsl(39, 100%, 60%); --ld-s-color-utility-warning-default: hsl(39, 80%, 50%); --ld-s-color-utility-warning-darker: hsl(39, 60%, 40%); --ld-s-color-utility-warning-disabled: hsl(39, 80%, 50%); --ld-s-color-utility-information-lighter: hsl(206, 100%, 60%); --ld-s-color-utility-information-default: hsl(206, 80%, 50%); --ld-s-color-utility-information-darker: hsl(206, 60%, 40%); --ld-s-color-utility-information-disabled: hsl(206, 80%, 50%); --ld-s-color-utility-modifiers-midlight: #ffffff1a; --ld-s-color-utility-modifiers-mid: rgba(255,255,255,0.3); --ld-s-color-common-white: #ffffff; --ld-s-color-common-black: #171717; --ld-s-color-common-opacity-white-lightest: rgba(255,255,255,0.1); --ld-s-color-common-opacity-white-lighter: rgba(255,255,255,0.2); --ld-s-color-common-opacity-true-black-darker: rgba(0,0,0,0.75); --ld-s-color-common-opacity-true-black-darkest: rgba(0,0,0,0.9); --ld-s-color-common-opacity-true-black-light: rgba(0,0,0,0.3); --ld-s-color-common-opacity-true-black-lightest: rgba(0,0,0,0.1); --ld-s-color-common-opacity-black-darker: rgba(23,23,23,0.75); --ld-s-color-common-opacity-black-darkest: rgba(23,23,23,0.9); --ld-s-color-common-opacity-black-lightest: rgba(23,23,23,0.1); --ld-s-color-common-true-black: #000000; --ld-s-color-common-inherit-theme-default: #ffffff; --ld-s-color-common-inherit-theme-inverse: #171717; } .lk_ldSection_ZKY2Px9x, .lk_section_Glkla9NX { --ld-c-section-default-text-case: var(--ld-s-typography-body1-text-case); --ld-c-section-default-paragraph-spacing: var(--ld-s-typography-body1-paragraph-spacing); --ld-c-section-default-letter-spacing: var(--ld-s-typography-body1-letter-spacing); --ld-c-section-default-font-size: var(--ld-s-typography-body1-font-size); --ld-c-section-default-line-height: var(--ld-s-typography-body1-line-height); --ld-c-section-default-font-weight: var(--ld-s-typography-body1-font-weight); --ld-c-section-default-font-family: var(--ld-s-typography-body1-font-family); --ld-c-section-color-lighter: var(--ld-s-color-canvas-lighter); --ld-c-section-color-default: var(--ld-s-color-canvas-default); --ld-c-section-color-darker: var(--ld-s-color-canvas-darker); --ld-c-section-pad-even-less-v-pad: var(--ld-s-dim-static-s); /* Using static so it's not going to scale on mobile. */ --ld-c-section-pad-even-less-h-pad: var(--ld-s-dim-static-s); /* Using static so it's not going to scale on mobile. */ --ld-c-section-pad-full-width-v-pad: var(--ld-s-dim-static-none); --ld-c-section-pad-full-width-h-pad: var(--ld-s-dim-static-none); --ld-c-section-pad-more-v-pad: var(--ld-s-dim-scaled-beyond-most); --ld-c-section-pad-more-h-pad: var(--ld-s-dim-scaled-default); --ld-c-section-pad-default-v-pad: var(--ld-s-dim-scaled-even-more); --ld-c-section-pad-default-h-pad: var(--ld-s-dim-scaled-default); --ld-c-section-pad-less-v-pad: var(--ld-s-dim-scaled-default); --ld-c-section-pad-less-h-pad: var(--ld-s-dim-scaled-default); } .lk_section_Glkla9NX { color: var(--ld-s-color-foreground-default); max-width: 100%; contain: content; } .lk_sectionBox__JLuTupJ { display: flex; flex-direction: column; align-items: center; justify-content: stretch; width: 100%; padding: var(--lk-c-section-padding-v, 40px) var(--lk-c-section-padding-h, 24px); gap: var(--lk-c-section-gap, 40px); } @supports not (contain: content) { .lk_sectionBox__JLuTupJ { overflow-x: hidden; } } .lk_container_StIC4C0r { container-type: inline-size; container-name: section; } .lk_nonePadding_rkQdX5kh { --lk-c-section-padding-v: var(--ld-c-section-pad-full-width-v-pad); --lk-c-section-padding-h: var(--ld-c-section-pad-full-width-h-pad); --lk-c-section-gap: var(--ld-c-section-pad-full-width-v-pad); } .lk_morePadding_AfzKjq_8 { --lk-c-section-padding-v: var(--ld-c-section-pad-more-v-pad); --lk-c-section-padding-h: var(--ld-c-section-pad-more-h-pad); --lk-c-section-gap: var(--ld-c-section-pad-more-v-pad); } .lk_defaultPadding_HsyBvCnb { --lk-c-section-padding-v: var(--ld-c-section-pad-default-v-pad); --lk-c-section-padding-h: var(--ld-c-section-pad-default-h-pad); --lk-c-section-gap: var(--ld-c-section-pad-default-v-pad); } .lk_lessPadding_rA5r6gYN { --lk-c-section-padding-v: var(--ld-c-section-pad-less-v-pad); --lk-c-section-padding-h: var(--ld-c-section-pad-less-h-pad); --lk-c-section-gap: var(--ld-c-section-pad-less-v-pad); } .lk_fullWidthContainer_CzGmcf3I { width: 100%; } .lk_ldStepper_yCFFJ6u3, .lk_divider_TjgxRY4e, .lk_progressStep__KxyuX7Y { --ld-c-stepper-label: var(--ld-s-color-foreground-default); /* Label for both active and inactive states. */ --ld-c-stepper-line: var(--ld-s-color-accent-primary-disabled); /* Colour of the divider lines between the stepper chips. */ --ld-c-stepper-step-label-width: var(--ld-s-dim-static-3xl); --ld-c-stepper-step-width: var(--ld-s-dim-static-l); } .lk_progressStepper_BGW5SDhX { width: 100%; /* Hide scrollbars in WebKit-based browsers (Chrome, Safari, Opera, and Edge Chromium) */ /* Hide scrollbars in Firefox */ scrollbar-width: none; } .lk_progressStepper_BGW5SDhX::-webkit-scrollbar { display: none; } .lk_divider_TjgxRY4e { flex: 1; height: var(--ld-c-stepper-step-width); display: flex; justify-content: center; align-items: center; } .lk_divider_TjgxRY4e:last-child { display: none; } .lk_progressStep__KxyuX7Y:first-child .lk_chipContainer_MYxAdJ2e::before { background: transparent; } .lk_progressStep__KxyuX7Y:nth-last-child(2) .lk_chipContainer_MYxAdJ2e::after { background: transparent; } .lk_chip_vFBpSKLt { width: var(--ld-c-stepper-step-width); padding: 0 !important; align-items: center; justify-content: center; } .lk_chipContainer_MYxAdJ2e { min-width: var(--ld-c-stepper-step-label-width); min-height: var(--ld-c-stepper-step-width); display: flex; justify-content: center; align-items: center; } .lk_chipContainer_MYxAdJ2e::after, .lk_chipContainer_MYxAdJ2e::before { width: calc(var(--ld-c-stepper-step-width) / 2); content: ""; height: 1px; background-color: var(--ld-c-stepper-line); } .lk_progressStepperInner_UM3GspVd { width: var(--ld-c-stepper-step-label-width); } .lk_text_m4h0SPf8 { width: var(--ld-c-stepper-step-label-width); display: flex; justify-content: center; } .lk_text_m4h0SPf8 > span { text-align: center; } .lk_disabled_PxUWe5Tr { opacity: var(--ld-c-form-disabled); } @charset "UTF-8"; .lk_ldCardWithHeader_pg7QXFxD, .lk_card_xDaPg5gN { --ld-c-card-with-header-top-color-electrified: #787D9D; /* The colour used specifically for Encore Platinum Electrified level membership. */ --ld-c-card-with-header-top-color-elevate: #858280; /* The colour used specifically for the Encore Elevate level membership. */ --ld-c-card-with-header-top-color-encore: #7B663E; /* The colour used specifically for the Encore (base) level membership. */ --ld-c-card-with-header-top-color-platinum: var(--ld-color-legacy-deepblue-default); /* The colour used specifically for the Encore Platinum level membership. */ --ld-c-card-with-header-col-gap: var(--ld-s-dim-static-m); /* The gap value for columns – for use when cards internal elements are in a horizontal stack/auto-ed to horizontal. There is no gap value for row. */ --ld-c-card-with-header-footer-color-text: var(--ld-s-color-foreground-default); /* The colour of the disclaimer text within the footer box (bottom of the cardwithheader component/layout). */ --ld-c-card-with-header-footer-color-background: var(--ld-s-color-elevation-raised-darker); /* The colour for the background of the footer (bottom) box of the cardwithheader component/layout. */ --ld-c-card-with-header-content-minimal-v-pad: var(--ld-s-dim-static-2xs); /* v-pad for the CardWithHeader content. This value is used for the cards used within the Gallery component. */ --ld-c-card-with-header-content-minimal-h-pad: var(--ld-s-dim-static-none); /* 0px h-pad for the CardWithHeader content. This is to be used when we require content to be flush with the cardwithheader top left and right edges. */ --ld-c-card-with-header-content-small-v-pad: var(--ld-s-dim-static-m); /* v-pad for the CardWithHeader content. This value is used for the cards used within the CardGridLayout. */ --ld-c-card-with-header-content-small-h-pad: var(--ld-s-dim-static-none); /* 0px h-pad for the CardWithHeader content. This is to be used when we require content to be flush with the cardwithheader top left and right edges. */ --ld-c-card-with-header-content-default-v-pad: var(--ld-s-dim-static-l); /* v-pad for CardWithHeader content. This is the value used for the Encore membership guide/table. */ --ld-c-card-with-header-content-default-h-pad: var(--ld-s-dim-static-s); /* h-pad for CardWithHeader content. This is the value used for the Encore membership guide/table. */ --ld-c-card-with-header-content-color-text: var(--ld-s-color-foreground-default); /* The colour of the list-text (the Encore benefits listed text items) and label-text (the subheadings). */ --ld-c-card-with-header-content-color-background: var(--ld-s-color-elevation-raised-darker); /* The colour for the background of the content box (middle) box of the cardwithheader component/layout. */ --ld-c-card-with-header-top-none-v-pad: var(--ld-s-dim-static-none); /* 0 pad for the v-pad of CardWithHeader top. Used when background image is applied. */ --ld-c-card-with-header-top-none-h-pad: var(--ld-s-dim-static-none); /* 0 pad for the h-pad of CardWithHeader top. Used when background image is applied. */ --ld-c-card-with-header-top-default-v-pad: var(--ld-s-dim-static-l); /* v-pad for the CardWithHeader top. */ --ld-c-card-with-header-top-default-h-pad: var(--ld-s-dim-static-s); /* h-pad for the CardWithHeader top. */ --ld-c-card-with-header-top-color-logo: var(--ld-s-color-common-white); /* The cardwithheader logos should be white. */ } .lk_card_xDaPg5gN { background: var(--ld-c-card-with-header-content-color-background); width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: unset; } .lk_card_xDaPg5gN .lk_cardTop_zlmee4HG { display: flex; justify-content: center; color: var(--ld-c-card-with-header-content-color-background); } .lk_card_xDaPg5gN .lk_cardContent_Nt0p_3U2 { width: 100%; height: 100%; } .lk_topElevate_QZDl2wWQ { background: var(--ld-c-card-with-header-top-color-elevate); } .lk_topEncore_l8swfBdI { background: var(--ld-c-card-with-header-top-color-encore); } .lk_topPlatinum_i_R7IdDm { background: var(--ld-c-card-with-header-top-color-platinum); } .lk_topElectrified_BhyB8MFF { background: var(--ld-c-card-with-header-top-color-electrified); } .lk_noBackground_fioERX4h { background: none; } .lk_horizontal_At97EUPw { flex-direction: row; gap: var(--ld-c-card-with-header-col-gap); } .lk_auto_oUxMAm10 { flex-direction: column; gap: 0; } @media only screen and (orientation: landscape) { .lk_auto_oUxMAm10 { /*stylelint cant read interpolated values so thinks this is an error */ } } @media only screen and (orientation: landscape) and (max-width: 1023.98px) { .lk_auto_oUxMAm10 { gap: var(--ld-c-card-with-header-col-gap); flex-direction: row; } } .lk_noHorizontalGap_r6ha0ii5 { gap: unset; } .lk_ldGridLayout_I4323jYF, .lk_grid_Kk8CIX_s { --ld-c-grid-layout-min-w: var(--ld-grid-min-w); /* Desktop min-width for the cards within the card-grid-layout component. This value may change later. */ --ld-c-grid-layout-gap: var(--ld-s-dim-scaled-default); /* Use this value for both the ROW and COL gaps. */ } .lk_grid_Kk8CIX_s > * { min-width: min(var(--ld-c-grid-layout-min-w) - var(--ld-c-grid-layout-gap) / 2, 100%); flex-grow: 1; /*stylelint cant read interpolated values so thinks this is an error */ } @media (min-width: 1024px) { .lk_grid_Kk8CIX_s > * { max-width: calc(50% - var(--ld-c-grid-layout-gap) / 2); } } .lk_ldCardTable_OiQuYrbp, .lk_cardTable_n2sfUBWA { --ld-c-card-table-dimension-gap: 1px; /* The 1px gap between the cardwithheader columns/rows that reveals the background of the cardtable and creates a 1px divider line. */ --ld-c-card-table-color-stroke: var(--ld-s-color-default-utility-modifiers-midlight); --ld-c-card-table-color-background: var(--ld-s-color-default-utility-modifiers-midlight); /* Background colour which allows for the 1px gap between the cardwithheaders to appear as divider lines. */ --ld-c-card-table-dimension-radius: var(--ld-s-border-radius-large); /* The set border radius for the cardtable is always this token. */ } .lk_cardTable_n2sfUBWA { display: flex; overflow: hidden; height: 100%; max-width: 100vw; gap: var(--ld-c-card-table-dimension-gap); border: var(--ld-c-card-table-dimension-gap) solid var(--ld-c-card-table-color-stroke); background: var(--ld-c-card-table-color-background); } @container (max-width: 1024px) { .lk_cardTable_n2sfUBWA { flex-direction: column; align-items: flex-start; } } @supports not (container-type: inline-size) { .lk_cardTable_n2sfUBWA { /*stylelint cant read interpolated values so thinks this is an error */ } @media (max-width: 1024px) { .lk_cardTable_n2sfUBWA { flex-direction: column; align-items: flex-start; } } } .lk_container_e3ONLXFV { container-type: inline-size; } .lk_header_o3yzbqZ2 { text-align: center; } .lk_ldStack_wOFQX_lf, .lk_dynamicPriceBarContainer_EyWwJu4R, .lk_legendContainer_RnmNIrQx { --ld-c-stack-gap-scaled-most: var(--ld-s-dim-scaled-most); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-more: var(--ld-s-dim-scaled-even-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-more: var(--ld-s-dim-scaled-more); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-default: var(--ld-s-dim-scaled-default); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-less: var(--ld-s-dim-scaled-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-even-less: var(--ld-s-dim-scaled-even-less); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-scaled-least: var(--ld-s-dim-scaled-least); /* This token will scale based on which "2 - Screen" set is active. Usage: Apply to Gap or Row Gap. Note: Because the value adapts we can use semantic names eg "scaled.less". */ --ld-c-stack-gap-static-5xl: var(--ld-s-dim-static-5xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xl: var(--ld-s-dim-static-4xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xl: var(--ld-s-dim-static-3xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xl: var(--ld-s-dim-static-2xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xl: var(--ld-s-dim-static-xl); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-l: var(--ld-s-dim-static-l); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-m: var(--ld-s-dim-static-m); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-s: var(--ld-s-dim-static-s); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-xs: var(--ld-s-dim-static-xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-2xs: var(--ld-s-dim-static-2xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-3xs: var(--ld-s-dim-static-3xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-4xs: var(--ld-s-dim-static-4xs); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ --ld-c-stack-gap-static-none: var(--ld-s-dim-static-none); /* This is a static Gap token. Usage: Apply to Row or Row Gap. Note: We use T-Shirt sizing to specify the static scale eg. "2xs". */ } .lk_ldBarGraph_ijAQsysC, .lk_dynamicPriceBarContainer_EyWwJu4R, .lk_legendContainer_RnmNIrQx { --ld-c-bar-graph-dimension-height: 40px; /* The fixed height of the bar within the bar-graph component. */ --ld-c-bar-graph-dimension-gap: 1px; /* Gap between the bargraph percentage blocks. */ --ld-c-bar-graph-dimension-circle: 16; /* The dimensions of the circles used for the key colour indicators. */ --ld-c-bar-graph-opacity-end: 0.15; /* 15% */ --ld-c-bar-graph-opacity-start: 1; /* 100% opacity */ --ld-c-bar-graph-dimension-radius: var(--ld-s-border-radius-extra-large); /* The radius of the bargraph frame. */ --ld-c-bar-graph-color-stroke: var(--ld-s-color-utility-modifiers-midlight); /* The stroke outline colour of the bargraph frame. */ --ld-c-bar-graph-color-shade: var(--ld-s-color-accent-primary-default); /* The color that goes on top of the base. The opacity will control the shades for the different measurements. */ --ld-c-bar-graph-color-base: var(--ld-s-color-elevation-raised-default); /* The base colour on the background of the bargraph frame element. */ } .lk_dynamicPriceBarContainer_EyWwJu4R { margin-bottom: var(--ld-c-stack-gap-static-xs); } .lk_dynamicPriceBarContainer_EyWwJu4R .lk_chart_aYcLWHGk { width: 0%; animation: lk_expand_O4NgDMC5 1.5s ease forwards; animation-delay: 0.4s; display: flex; flex-direction: row; background-color: var(--ld-c-bar-graph-color-base); outline: 1px solid var(--ld-c-bar-graph-color-stroke); overflow: hidden; } .lk_dynamicPriceBarContainer_EyWwJu4R .lk_block_qiH4Mjqc { height: var(--ld-c-bar-graph-dimension-height); display: flex; flex-direction: row; opacity: 1; transition: opacity, 0.3s ease; background-color: var(--ld-c-bar-graph-color-shade); } .lk_dynamicPriceBarContainer_EyWwJu4R .lk_block_qiH4Mjqc:not(:last-child) { margin-right: var(--ld-c-bar-graph-dimension-gap); } .lk_legendContainer_RnmNIrQx { opacity: 0; animation: lk_fadeInFromBottom_cZFBS6h5 0.4s ease forwards 1.5s; } .lk_legendContainer_RnmNIrQx .lk_legend_VwnLcyb4 { display: flex; flex-direction: row; flex-wrap: wrap; flex: 0 0 auto; column-gap: var(--ld-c-stack-gap-scaled-even-less); row-gap: var(--ld-c-stack-gap-static-4xs); list-style: none; padding: 0; margin: 0; } .lk_legendContainer_RnmNIrQx .lk_legend_VwnLcyb4 .lk_legendItem_vO_0dVP4 { display: flex; align-items: center; } .lk_legendContainer_RnmNIrQx .lk_legend_VwnLcyb4 .lk_indicator_eHz7b2_v { min-width: calc(var(--ld-c-bar-graph-dimension-circle) * 1px); min-height: calc(var(--ld-c-bar-graph-dimension-circle) * 1px); background-color: var(--ld-c-bar-graph-color-shade); outline: 1px solid var(--ld-c-bar-graph-color-stroke); } .lk_legendContainer_RnmNIrQx .lk_legend_VwnLcyb4 .lk_emptyStateIndicator_tIT8F_Qe { background-color: var(--ld-c-bar-graph-color-base); } .lk_legendContainer_RnmNIrQx .lk_legend_VwnLcyb4 .lk_label_eegOBG6g { margin-left: var(--ld-c-stack-gap-static-3xs); } @keyframes lk_expand_O4NgDMC5 { from { width: 0%; } to { width: 100%; } } @keyframes lk_fadeInFromBottom_cZFBS6h5 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_imageWithTooltip_lKziNYvV { height: 100%; width: 100%; position: relative; } .lk_imageWithTooltip_lKziNYvV .lk_imageWrapper_gWQctqvy { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .lk_imageWithTooltip_lKziNYvV.lk_aspect_EaxXkxkn .lk_imageWrapper_gWQctqvy { container-type: size; } .lk_imageWithTooltip_lKziNYvV.lk_aspect_EaxXkxkn .lk_spaceHolder_TZmYhPL6 { pointer-events: none; aspect-ratio: var(--image-with-tooltip-aspect-ratio); width: 100%; height: auto; } .lk_toolTipContainer_RdMWuvGm { position: absolute; line-height: 0; } .lk_toolTipContainer_RdMWuvGm.lk_topRight_ijhPjO9q { top: 0; right: 0; } .lk_toolTipContainer_RdMWuvGm.lk_bottomRight_LNLfg4FW { bottom: 0; right: 0; } .lk_toolTipContainer_RdMWuvGm.lk_bottomLeft_BYKFQhq5 { bottom: 0; left: 0; } .lk_portraitContainer_CqKlWc1F, .lk_landscapeContainer_ZcWq6WhC { width: 100%; height: 100%; } .lk_portraitContainer_CqKlWc1F > img, .lk_landscapeContainer_ZcWq6WhC > img { width: 100%; height: 100%; object-fit: cover; } .lk_portraitContainer_CqKlWc1F > img { object-position: var(--lk-private-pt-horizontal-focal-point) var(--lk-private-pt-vertical-focal-point); } .lk_landscapeContainer_ZcWq6WhC > img { object-position: var(--lk-private-ls-horizontal-focal-point) var(--lk-private-ls-vertical-focal-point); } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldCarouselLayout_ABRlOOAS, .lk_carousel_nzjV0jKC { --ld-c-carousel-layout-vertical-h: 1px; /* 1px above and below the carousel to allow for focus outlines on the cards. */ --ld-c-carousel-layout-card-width: 628px; /* The width value for the cards within the carousel-layout component. To be used on larger screens, preventing too much resizing. */ --ld-c-carousel-layout-card-min-w-small: 290px; /* 290px min-width for cards within the carousel-layout component that has 4 cards or more in future in the visible container area. */ --ld-c-carousel-layout-card-min-w-default: 312px; /* 312px min-width for cards within the carousel-layout component. This is the smallest the cards get before the caculation kicks in. */ --ld-c-carousel-layout-h-margin: var(--ld-s-dim-scaled-default); /* Scaled horizontal margin for the carosuel component. This will scale between mobile and desktop. */ --ld-c-carousel-layout-gap: var(--ld-s-dim-scaled-even-less); /* Value for the gap between card items. This will scale between desktop and mobile. */ } .lk_carousel_nzjV0jKC { gap: var(--ld-c-carousel-layout-gap); width: 100vw; display: flex; align-items: stretch; white-space: nowrap; transition: all 0.2s; will-change: transform; user-select: none; cursor: grab; scroll-snap-type: x mandatory; scroll-behavior: smooth; overflow-x: scroll; max-width: 100vw; padding: var(--ld-c-carousel-layout-vertical-h) calc((100vw - 100%) / 2); margin: 0 calc(-1 * (100vw - 100%) / 2); /* Hide scrollbars in WebKit-based browsers (Chrome, Safari, Opera, and Edge Chromium) */ /* Hide scrollbars in Firefox */ scrollbar-width: none; } @supports (container-type: inline-size) { .lk_carousel_nzjV0jKC { margin: 0 calc(-1 * (100cqw - 100%) / 2); padding: var(--ld-c-carousel-layout-vertical-h) calc((100cqw - 100%) / 2); } } .lk_carousel_nzjV0jKC::-webkit-scrollbar { display: none; } .lk_dragging_S95E4NaS { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .lk_slide_gizEXe_T { scroll-snap-align: center; flex: 0 0 min(100% / var(--lk-private-carousel-max-items) - var(--ld-c-carousel-layout-gap) / var(--lk-private-carousel-max-items) * (var(--lk-private-carousel-max-items) - 1), var(--ld-c-carousel-layout-card-width)); min-width: min(var(--ld-c-carousel-layout-card-min-w-default), 100%); white-space: normal; } .lk_minWidthSmall_ByOhfbda { min-width: min(var(--ld-c-carousel-layout-card-min-w-small), 100%); } @charset "UTF-8"; /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldDotStack_TowaH5Ij, .lk_dotStackContainer_c6PFd3Dh { --ld-c-dot-stack-transition-timing-function: ease-out; /* Need to update to this – sem.easings.ease-out */ --ld-c-dot-stack-transition-duration: 200; /* Duration time for scale and opacity animation of the dot-stack. - need to update to this sem.duration.fast when fixed. */ --ld-c-dot-stack-overlaid-border: 1px solid var(--ld-s-color-utility-modifiers-midlight); /* Border of the overlaid on image variant of the dot-stack. */ --ld-c-dot-stack-gradient-fade: var(--ld-s-dim-static-xs); /* 16px spread for the gradient on the edges of the dot-stack when it overflows. */ --ld-c-dot-stack-default: var(--ld-s-color-accent-primary-opacity-default-lighter); --ld-c-dot-stack-gradient-canvas-darker: linear-gradient(0deg, rgba( var(--ld-s-color-canvas-darker), 100) 0%, rgba( var(--ld-s-color-canvas-darker), 0) 100%); /* Canvas darker gradient */ --ld-c-dot-stack-gradient-canvas-lighter: linear-gradient(0deg, rgba( var(--ld-s-color-canvas-lighter), 100) 0%, rgba( var(--ld-s-color-canvas-lighter), 0) 100%); /* Canvas lighter gradient */ --ld-c-dot-stack-gradient-canvas-default: linear-gradient(0deg, rgba( var(--ld-s-color-canvas-default), 100) 0%, rgba( var(--ld-s-color-canvas-default), 0) 100%); /* Canvas default gradient */ --ld-c-dot-stack-overlaid-bg: var(--ld-s-color-foreground-on-accent); /* Background color for the frame around the dots for the overlaid variant of the dot-stack. This would be 70% opacity. */ --ld-c-dot-stack-active: var(--ld-s-color-accent-primary-default); /* The color of the dots or animated bar background is this colour with the 30% opacity token applied, and the selected is this colour at 100%. */ --ld-c-dot-stack-height: var(--ld-s-dim-static-3xs); /* Height for the default dot. */ --ld-c-dot-stack-width-selected: var(--ld-s-dim-static-l); /* 40px width for the selected/highlighted bar. */ --ld-c-dot-stack-width-default: var(--ld-s-dim-static-3xs); /* Width for the default dot. */ } .lk_dotStackContainer_c6PFd3Dh { overflow: auto; /* Hide scrollbars in WebKit-based browsers (Chrome, Safari, Opera, and Edge Chromium) */ /* Hide scrollbars in Firefox */ scrollbar-width: none; mask-composite: intersect; } .lk_dotStackContainer_c6PFd3Dh::-webkit-scrollbar { display: none; } .lk_dotStackContainer_c6PFd3Dh.lk_overlayLeft_SgoWyhwg { mask-image: linear-gradient(to right, transparent 0%, var(--lk-surface-color) var(--ld-c-dot-stack-gradient-fade)); } .lk_dotStackContainer_c6PFd3Dh.lk_overlayRight_hPw9iWLS { mask-image: linear-gradient(to left, transparent 0%, var(--lk-surface-color) var(--ld-c-dot-stack-gradient-fade)); } .lk_dotStackContainer_c6PFd3Dh.lk_overlayBoth_LvGdTPb5 { mask-image: linear-gradient(to left, transparent 0%, var(--lk-surface-color) var(--ld-c-dot-stack-gradient-fade)), linear-gradient(to right, transparent 0%, var(--lk-surface-color) var(--ld-c-dot-stack-gradient-fade)); } .lk_dot_sZPrSnfz { height: var(--ld-c-dot-stack-height); width: var(--ld-c-dot-stack-width-default); flex-shrink: 0; background-color: var(--ld-c-dot-stack-default); transition: width 300ms ease-in-out; } .lk_selectedDot_xqP0WcaJ { width: var(--ld-c-dot-stack-width-selected); } .lk_progressDot_zTEH5vfd { height: inherit; background-color: var(--ld-c-dot-stack-active); animation: lk_fillProgress_BfMbKydi linear forwards; } @keyframes lk_fillProgress_BfMbKydi { from { width: var(--ld-c-dot-stack-width-default); } to { width: 100%; } } .lk_fill_ncd_F0Z3 { animation: none; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldRow_E4anNcd5, .lk_row_pQmgt6Yf { --ld-c-row-border-radius: var(--ld-s-border-radius-extra-large); /* 8px default border radius for the row component. */ --ld-c-row-gap: var(--ld-s-dim-scaled-default); /* 40px gap. With scaling to match grid col gaps. */ } .lk_ldCell_mUrDkIRX, .lk_cellContainer_glaxIFRU { --ld-c-cell-min-w: 290px; /* 290px, 18em used for min-w of the cell. */ --ld-c-cell-border-radius: var(--ld-s-border-radius-medium); /* 5px border radius of individual cells. */ } .lk_row_pQmgt6Yf { --lk-private-default-gap: var(--ld-c-row-gap); --lk-private-column-gap: var(--lk-private-default-gap); --lk-private-row-gap: var(--lk-private-column-gap); container-type: inline-size; display: flex; gap: var(--lk-private-row-gap) var(--lk-private-column-gap); flex-direction: row; flex-wrap: wrap; overflow: hidden; } .lk_row_pQmgt6Yf > div[class*=_cell_], .lk_row_pQmgt6Yf > div[class*=cellContainer], .lk_row_pQmgt6Yf > div[class*=cellContainer] > div[class*=_cell_] { --lk-private-cell-min-w: max(var(--ld-c-cell-min-w), 18em); --lk-private-alignment: 0px; --lk-private-base-cell-size: ( 100% - (var(--lk-private-cells-in-row) - 1) * var(--lk-private-column-gap) ) / var(--lk-private-cells-in-row); --lk-private-column-gap-offset: var(--lk-private-column-gap) * calc(var(--lk-private-cells-in-section) - 1); --lk-private-base-min-width: var(--lk-private-cells-in-section) * var(--lk-private-cell-min-w); width: 100%; min-width: min(100%, var(--lk-private-base-min-width) + var(--lk-private-column-gap-offset)); flex: var(--lk-private-cells-in-section) 0 calc(var(--lk-private-base-cell-size) * var(--lk-private-cells-in-section) + var(--lk-private-column-gap-offset) - var(--lk-private-alignment)); } .lk_cellContainer_glaxIFRU { display: flex; gap: var(--lk-private-row-gap) var(--lk-private-column-gap); flex-direction: row; flex-wrap: wrap; overflow: hidden; width: 100%; } .lk_cellContainer_glaxIFRU.lk_double_dGhc6P6I { --lk-private-cells-in-section: 2; } .lk_cellContainer_glaxIFRU.lk_triple_DkivuZ8p { --lk-private-cells-in-section: 3; } .lk_cellContainer_glaxIFRU.lk_forceTwoCellRowToWrap_bwMpG9WP:not(:empty) > div[class*=_cell_] { /* Works if 1% > 1px */ min-width: calc(51% - 1vw + 1px - var(--lk-private-column-gap) / 2); /* Fallback */ min-width: calc(51% - 1cqw + 1px - var(--lk-private-column-gap) / 2); /* Wraps at 896px */ /* 51% = 580px*0.51=295.8px */ /* 1cqw = 896px*0.01=8.96px */ /* Total min-width: 51% - 1cqw = 286.84px; 286.84px + 1px - 12px = 275.84 */ /* 1 cell = 278px before wrapping */ /* Magic is with 1cqw, it will be equal 1% after group wraps, so 51% - 1cqw = 50%, with addition of 1px it makes it impossible to fit 2 cells on one row as it is (50% + 1px) * 2 > 100% */ } .lk_isReversed_UF_SxOty { flex-wrap: wrap-reverse; } .lk_noGap_RCsm6AxV { --lk-private-column-gap: 0px; } .lk_noRowGap_bc4gcE9K { --lk-private-row-gap: 0px; } .lk_ldCell_zIjp1lLH, .lk_cell_ihg7i4I7 { --ld-c-cell-min-w: 290px; /* 290px, 18em used for min-w of the cell. */ --ld-c-cell-border-radius: var(--ld-s-border-radius-medium); /* 5px border radius of individual cells. */ } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_cell_ihg7i4I7 { --lk-private-cells-in-section: 1; display: flex; flex-grow: inherit; max-height: 100%; overflow: hidden; } .lk_cell_ihg7i4I7.lk_alignToEdge_NLhXpU7G:not(:empty) { --lk-private-alignment: var(--lk-private-default-gap); } .lk_cell_ihg7i4I7.lk_alignToCenter_g9bxYh2F:not(:empty) { --lk-private-alignment: calc(var(--lk-private-default-gap) / 2); } .lk_cell_ihg7i4I7.lk_double_rn6xUSqQ { --lk-private-cells-in-section: 2; } .lk_cell_ihg7i4I7.lk_triple_Z1i9ZYlG { --lk-private-cells-in-section: 3; } /* stylelint-disable csstools/value-no-unknown-custom-properties */ .lk_ldAccordion_Y_3C9ZRb, .lk_labelContainer_iBZ9IX_T { --ld-c-accordion-default: 1; --ld-c-accordion-hover: 0.7; --ld-c-accordion-icon-size: var(--ld-prim-dim-16); --ld-c-accordion-dividers: 1px solid var(--ld-s-color-accent-primary-disabled); /* Top and bottom border for the first accordion item and bottom border for anything after. */ } .lk_labelContainer_iBZ9IX_T { display: flex; cursor: pointer; } .lk_labelContainer_iBZ9IX_T > p { pointer-events: none; } .lk_labelContainer_iBZ9IX_T:hover { opacity: var(--ld-c-accordion-hover); } .lk_arrowIconDetails_thAtYP7A { display: inline-flex; justify-content: center; transition: transform 0.3s ease; width: var(--ld-c-accordion-icon-size); height: var(--ld-c-accordion-icon-size); } .lk_detailsContainer_DG6zA2nH[open] .lk_arrowIconDetails_thAtYP7A { transform: rotate(180deg); } .lk_detailsContainer_DG6zA2nH[open] .lk_add_jzZWUwu4 { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .lk_detailsContainer_DG6zA2nH[open] .lk_subtract_vVO9Pnpb { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } .lk_detailsContainer_DG6zA2nH > summary { list-style: none; justify-content: space-between; } .lk_detailsContainer_DG6zA2nH > summary.lk_adjacent_sjKRHbAa { justify-content: flex-start; } .lk_detailsContainer_DG6zA2nH > summary::marker, .lk_detailsContainer_DG6zA2nH > summary::-webkit-details-marker { display: none; } .lk_add_jzZWUwu4 { opacity: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } .lk_subtract_vVO9Pnpb { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } .lk_equationContainer_OXpbB785 { display: inline-flex; position: relative; width: var(--ld-c-accordion-icon-size); height: var(--ld-c-accordion-icon-size); } .lk_accordionGroupContainer_ZlGqOZsk { width: 100%; } .lk_popoverPortal_raJzPzza { z-index: var(--lk-popover-z-index, 1); } .lk_slideShowInner_v_kV8Jer { display: flex; height: 100%; width: 100%; overflow-x: scroll; scroll-snap-type: x mandatory; /* Hide scrollbars in WebKit-based browsers (Chrome, Safari, Opera, and Edge Chromium) */ /* Hide scrollbars in Firefox */ scrollbar-width: none; } .lk_slideShowInner_v_kV8Jer::-webkit-scrollbar { display: none; } .lk_slideShowInnerContent_R9djECYF { width: 100%; height: 100%; flex: 0 0 100%; scroll-snap-align: center; } .lk_ldProgressBar_rr6uOroz, .lk_progressBar_TLUS7lyt { --ld-c-progress-bar-indicator: var(--ld-s-color-accent-secondary-default); /* Colour used to indicate progress. */ --ld-c-progress-bar-base: var(--ld-s-color-elevation-raised-default); /* Base colour of the progress-bar. */ --ld-c-progress-bar-height: var(--ld-s-dim-static-4xs); /* Height of the progress bar. In future may make 2px in order to align with Toyota. */ } .lk_progressBar_TLUS7lyt { display: flex; height: var(--ld-c-progress-bar-height); width: 100%; background-color: var(--ld-c-progress-bar-base); } .lk_progressBar_TLUS7lyt .lk_progress_meN8sb7b { height: 100%; transition: width 0.5s; background-color: var(--ld-c-progress-bar-indicator); }