{"version":3,"sources":["../../../../theme/variables/fresh_4px.scss%23sass"],"names":[],"mappings":"AACQ,yFAAA","file":"fresh_4px.css","sourcesContent":["@use 'tokens/theme_fresh_light_4px' as tokens;\n@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');\n/*  Name convention  */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n\n@mixin fresh-variables {\n    --uui-font: 'Lexend', serif;\n    --uui-font-mono: 'Roboto Mono', monospace;\n\n    /* shadows */\n    --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);\n    --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n    --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);\n\n    @include tokens.theme-tokens;\n\n\n    & {\n        --uui-border-radius: 3px;\n        scrollbar-color: var(--uui-neutral-40) transparent;\n    }\n\n    /* begin color classes */\n\n    .uui-color-grass {\n        --uui-color-5: var(--uui-accent-5);\n        --uui-color-10: var(--uui-accent-10);\n        --uui-color-20: var(--uui-accent-20);\n        --uui-color-50: var(--uui-accent-50);\n        --uui-color-60: var(--uui-accent-60);\n        --uui-color-70: var(--uui-accent-70);\n        --uui-color-contrast: var(--uui-accent-contrast);\n    }\n\n    .uui-color-sky {\n        --uui-color-5: var(--uui-primary-5);\n        --uui-color-10: var(--uui-primary-10);\n        --uui-color-20: var(--uui-primary-20);\n        --uui-color-50: var(--uui-primary-50);\n        --uui-color-60: var(--uui-primary-60);\n        --uui-color-70: var(--uui-primary-70);\n        --uui-color-contrast: var(--uui-primary-contrast);\n    }\n\n    .uui-color-fire {\n        --uui-color-5: var(--uui-critical-5);\n        --uui-color-10: var(--uui-critical-10);\n        --uui-color-20: var(--uui-critical-20);\n        --uui-color-50: var(--uui-critical-50);\n        --uui-color-60: var(--uui-critical-60);\n        --uui-color-70: var(--uui-critical-70);\n        --uui-color-contrast: var(--uui-critical-contrast);\n    }\n\n    .uui-color-night100 {\n        --uui-color-5: var(--white);\n        --uui-color-10: var(--white);\n        --uui-color-20: var(--night50);\n        --uui-color-50: var(--night100);\n        --uui-color-60: var(--uui-color-night100-800);\n        --uui-color-70: var(--uui-color-night100-900);\n        --uui-color-contrast: var(--uui-neutral-70);\n    }\n\n    .uui-color-night300 {\n        --uui-color-5: var(--night50);\n        --uui-color-10: var(--night100);\n        --uui-color-20: var(--night200);\n        --uui-color-50: var(--night300);\n        --uui-color-60: var(--night400);\n        --uui-color-70: var(--night500);\n        --uui-color-contrast: var(--uui-neutral-80);\n    }\n\n    .uui-color-night500 {\n        --uui-color-5: var(--night200);\n        --uui-color-10: var(--night300);\n        --uui-color-20: var(--night400);\n        --uui-color-50: var(--night500);\n        --uui-color-60: var(--night600);\n        --uui-color-70: var(--night700);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-night600,\n    .uui-color-gray {\n        --uui-color-5: var(--uui-secondary-5);\n        --uui-color-10: var(--uui-secondary-10);\n        --uui-color-20: var(--uui-secondary-20);\n        --uui-color-50: var(--uui-secondary-50);\n        --uui-color-60: var(--uui-secondary-60);\n        --uui-color-70: var(--uui-secondary-70);\n        --uui-color-contrast: var(--uui-secondary-contrast);\n    }\n\n    .uui-color-night700 {\n        --uui-color-5: var(--night400);\n        --uui-color-10: var(--night500);\n        --uui-color-20: var(--night600);\n        --uui-color-50: var(--night700);\n        --uui-color-60: var(--uui-color-night700-800);\n        --uui-color-70: var(--uui-color-night700-900);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-sun {\n        --uui-color-5: var(--uui-warning-5);\n        --uui-color-10: var(--uui-warning-10);\n        --uui-color-20: var(--uui-warning-20);\n        --uui-color-50: var(--uui-warning-50);\n        --uui-color-60: var(--uui-warning-60);\n        --uui-color-70: var(--uui-warning-70);\n        --uui-color-contrast: var(--uui-warning-contrast);\n    }\n\n    .uui-color-yellow {\n        --uui-color-5: var(--yellow-5);\n        --uui-color-10: var(--yellow-10);\n        --uui-color-20: var(--yellow-20);\n        --uui-color-50: var(--yellow-50);\n        --uui-color-60: var(--yellow-60);\n        --uui-color-70: var(--yellow-70);\n        --uui-color-contrast: var(--uui-neutral-80);\n    }\n\n    .uui-color-orange {\n        --uui-color-5: var(--orange-5);\n        --uui-color-10: var(--orange-10);\n        --uui-color-20: var(--orange-20);\n        --uui-color-50: var(--orange-50);\n        --uui-color-60: var(--orange-60);\n        --uui-color-70: var(--orange-70);\n        --uui-color-contrast: var(--uui-neutral-80);\n    }\n\n    .uui-color-fuchsia {\n        --uui-color-5: var(--fuchsia-5);\n        --uui-color-10: var(--fuchsia-10);\n        --uui-color-20: var(--fuchsia-20);\n        --uui-color-50: var(--fuchsia-50);\n        --uui-color-60: var(--fuchsia-60);\n        --uui-color-70: var(--fuchsia-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-purple {\n        --uui-color-5: var(--purple-5);\n        --uui-color-10: var(--purple-10);\n        --uui-color-20: var(--purple-20);\n        --uui-color-50: var(--purple-50);\n        --uui-color-60: var(--purple-60);\n        --uui-color-70: var(--purple-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-violet {\n        --uui-color-5: var(--violet-5);\n        --uui-color-10: var(--violet-10);\n        --uui-color-20: var(--violet-20);\n        --uui-color-50: var(--violet-50);\n        --uui-color-60: var(--violet-60);\n        --uui-color-70: var(--violet-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cobalt {\n        --uui-color-5: var(--cobalt-5);\n        --uui-color-10: var(--cobalt-10);\n        --uui-color-20: var(--cobalt-20);\n        --uui-color-50: var(--cobalt-50);\n        --uui-color-60: var(--cobalt-60);\n        --uui-color-70: var(--cobalt-70);\n        --uui-color-contrast: var(--white);\n    }\n\n    .uui-color-cyan {\n        --uui-color-5: var(--cyan-5);\n        --uui-color-10: var(--cyan-10);\n        --uui-color-20: var(--cyan-20);\n        --uui-color-50: var(--cyan-50);\n        --uui-color-60: var(--cyan-60);\n        --uui-color-70: var(--cyan-70);\n        --uui-color-contrast: var(--uui-neutral-80);\n    }\n\n    .uui-color-mint {\n        --uui-color-5: var(--mint-5);\n        --uui-color-10: var(--mint-10);\n        --uui-color-20: var(--mint-20);\n        --uui-color-50: var(--mint-50);\n        --uui-color-60: var(--mint-60);\n        --uui-color-70: var(--mint-70);\n        --uui-color-contrast: var(--uui-neutral-80);\n    }\n\n    /* Accordion */\n\n    .uui-accordion-container {\n        --uui-accordion-border-radius: 6px;\n    }\n\n    /* FileCard */\n\n    .uui-file_card {\n        --uui-file_card-border-radius: 6px;\n    }\n\n    /* Badge */\n\n    .uui-badge.uui-color-white {\n        &.uui-fill-solid {\n            --uui-badge-border-hover: var(--uui-neutral-30);\n        }\n\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-0);\n            --uui-badge-bg-hover: var(--uui-neutral-30);\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-70);\n            --uui-badge-caption-hover: var(--uui-neutral-70);\n        }\n    }\n\n    .uui-badge.uui-color-neutral,\n    .uui-badge.uui-color-night300 {\n        &.uui-fill-solid {\n            --uui-badge-bg: var(--uui-neutral-30);\n            --uui-badge-bg-hover: var(--uui-neutral-40);\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-40);\n            --uui-color-contrast: var(--uui-neutral-80);\n\n            .uui-count_indicator {\n                --uui-count_indicator-bg: var(--uui-neutral-0);\n                --uui-count_indicator-border: var(--uui-neutral-0);\n            }\n        }\n\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-20);\n            --uui-badge-bg-hover: var(--uui-neutral-30);\n            --uui-badge-border: var(--uui-neutral-40);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-night100 {\n        &.uui-fill-solid {\n            --uui-badge-bg-hover: var(--uui-neutral-20);\n            --uui-badge-border-hover: var(--uui-neutral-20);\n        }\n\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-10);\n            --uui-badge-bg-hover: var(--uui-neutral-20);\n            --uui-badge-border: var(--uui-neutral-30);\n            --uui-badge-border-hover: var(--uui-neutral-30);\n            --uui-badge-caption: var(--uui-neutral-70);\n            --uui-badge-caption-hover: var(--uui-neutral-70);\n\n            .uui-count_indicator {\n                --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);\n                --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);\n            }\n        }\n    }\n\n    .uui-badge.uui-color-night600 {\n        &.uui-fill-outline {\n            --uui-badge-bg: var(--uui-neutral-20);\n            --uui-badge-border: var(--uui-neutral-60);\n            --uui-badge-border-hover: var(--uui-neutral-60);\n            --uui-badge-caption: var(--uui-neutral-80);\n            --uui-badge-caption-hover: var(--uui-neutral-80);\n        }\n    }\n\n    .uui-badge.uui-color-yellow.uui-fill-outline {\n        --uui-badge-border: var(--yellow-20);\n    }\n\n    /* Button */\n\n    .uui-button {\n        &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n            --uui-btn-caption: var(--uui-neutral-70);\n        }\n    }\n\n    /* IconButton */\n\n    .uui-icon_button.uui-color-secondary {\n        --uui-icon_btn: var(--uui-neutral-50);\n        --uui-icon_btn-hover: var(--uui-neutral-60);\n        --uui-icon_btn-active: var(--uui-neutral-70);\n    }\n\n    .uui-icon_button.uui-color-white {\n        --uui-icon_btn-hover: var(--uui-neutral-20);\n        --uui-icon_btn-active: var(--uui-neutral-30);\n    }\n\n    /* LinkButton */\n\n    .uui-link_button.uui-color-contrast {\n        --uui-link_btn-text: var(--uui-neutral-5);\n        --uui-link_btn-text-hover: var(--uui-neutral-10);\n        --uui-link_btn-text-active: var(--uui-neutral-20);\n    }\n\n    .uui-link_button.uui-color-white {\n        --uui-link_btn-text: var(--uui-neutral-5);\n        --uui-link_btn-text-hover: var(--uui-neutral-30);\n        --uui-link_btn-text-active: var(--uui-neutral-40);\n        --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);\n    }\n\n    /* Tooltip */\n\n    .uui-tooltip-container.uui-color-white {\n        --uui-tooltip-bg: var(--uui-neutral-0);\n        --uui-tooltip-text: var(--uui-neutral-80);\n    }\n\n    .uui-tooltip-container.uui-color-red {\n        --uui-tooltip-bg: var(--uui-error-60);\n    }\n\n    .uui-tooltip-container.uui-color-gray {\n        --uui-tooltip-bg: var(--uui-neutral-80);\n        --uui-tooltip-text: var(--uui-neutral-5);\n    }\n\n    /* CountIndicator */\n\n    .uui-count_indicator.uui-color-gray,\n    .uui-count_indicator.uui-color-neutral {\n        --uui-count_indicator-bg: var(--uui-neutral-30);\n        --uui-count_indicator-border: var(--uui-neutral-30);\n    }\n\n    .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) {\n        --uui-count_indicator-caption: var(--uui-neutral-70);\n    }\n\n    /* Status Indicator */\n\n    .uui-status_indicator.uui-color-white.uui-fill-outline {\n        .uui-status_indicator-dot {\n            background-color: color-mix(in srgb, var(--white) 20%, transparent);\n            border: 1px solid var(--uui-neutral-40);\n        }\n    }\n\n    /* FlexRow */\n\n    .uui-flex-row.uui-flex-row-bg-none {\n        --uui-flex-row-bg: transparent;\n    }\n\n    .uui-flex-row.uui-flex-row-bg-white {\n        --uui-flex-row-bg: var(--white);\n    }\n\n    .uui-flex-row.uui-flex-row-bg-night50 {\n        --uui-flex-row-bg: var(--night50);\n    }\n\n    .uui-flex-row.uui-flex-row-bg-night100 {\n        --uui-flex-row-bg: var(--night100);\n    }\n\n    .uui-panel.uui-bg-white {\n        --uui-panel-bg: var(--white);\n    }\n\n    .uui-panel.uui-bg-night50 {\n        --uui-panel-bg: var(--night50);\n    }\n\n    /* Text */\n\n    .uui-text.uui-color-night50 {\n        --uui-text: var(--night50);\n    }\n\n    .uui-text.uui-color-night400 {\n        --uui-text: var(--night400);\n    }\n\n    .uui-text.uui-color-night800 {\n        --uui-text: var(--night800);\n    }\n\n    .uui-text.uui-color-night900 {\n        --uui-text: var(--night900);\n    }\n\n    .uui-text.uui-color-sky {\n        --uui-text: var(--sky-70);\n    }\n\n    .uui-text.uui-color-grass {\n        --uui-text: var(--grass-70);\n    }\n\n    .uui-text.uui-color-sun {\n        --uui-text: var(--sun-70);\n    }\n\n    .uui-text.uui-color-fire {\n        --uui-text: var(--fire-70);\n    }\n\n    /* Tag */\n\n    .uui-tag {\n        &.uui-color-white {\n            &.uui-fill-solid {\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border-hover: var(--uui-neutral-10);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-0);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-night100 {\n            &.uui-fill-solid {\n                --uui-tag-bg-hover: var(--uui-neutral-20);\n                --uui-tag-border-hover: var(--uui-neutral-20);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-5);\n                --uui-tag-bg-hover: var(--uui-neutral-10);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-30);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-neutral,\n        &.uui-color-night300 {\n            &.uui-fill-solid {\n                --uui-tag-bg: var(--uui-neutral-30);\n                --uui-tag-bg-hover: var(--uui-neutral-40);\n                --uui-tag-border: var(--uui-neutral-30);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n                --uui-tag-caption: var(--uui-neutral-70);\n                --uui-tag-fill: var(--uui-neutral-70);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-0);\n                    --uui-count_indicator-border: var(--uui-neutral-0);\n                    --uui-count_indicator-caption: var(--uui-neutral-70);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-40);\n                --uui-tag-border-hover: var(--uui-neutral-40);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: var(--uui-neutral-30);\n                    --uui-count_indicator-border: var(--uui-neutral-30);\n                }\n            }\n        }\n\n        &.uui-color-night700 {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-neutral-0);\n                --uui-tag-fill: var(--uui-neutral-0);\n                --uui-tag-bg: var(--uui-neutral-70);\n                --uui-tag-border: var(--uui-neutral-70);\n                --uui-tag-bg-hover: var(--uui-neutral-80);\n                --uui-tag-border-hover: var(--uui-neutral-80);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n                }\n            }\n\n            &.uui-fill-outline {\n                --uui-tag-bg: var(--uui-neutral-20);\n                --uui-tag-bg-hover: var(--uui-neutral-30);\n                --uui-tag-border: var(--uui-neutral-50);\n                --uui-tag-border-hover: var(--uui-neutral-50);\n\n            }\n        }\n\n        &.uui-color-warning,\n        &.uui-color-sun {\n            &.uui-fill-solid {\n                --uui-tag-caption: var(--uui-text-primary);\n                --uui-tag-fill: var(--uui-neutral-90);\n\n                .uui-count_indicator {\n                    --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n                    --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n                }\n            }\n\n            &.uui-fill-outline .uui-count_indicator {\n                --uui-count_indicator-bg: var(--uui-neutral-0);\n                --uui-count_indicator-border: var(--uui-neutral-40);\n            }\n        }\n    }\n\n    /* fonts */\n\n    .uui-font-sans {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 400;\n    }\n\n    .uui-font-sans-semibold {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 600;\n    }\n\n    .uui-font-sans-light {\n        --uui-text-font: var(--uui-font);\n        --uui-text-font-weight: 300;\n    }\n\n    /* Typography */\n\n    .uui-typography {\n        h1 {\n            font-weight: 600;\n        }\n\n        h2 {\n            font-weight: 700;\n        }\n\n        h3 {\n            font-weight: 600;\n        }\n\n        .hero-header {\n            font-size: 72px;\n            line-height: 72px;\n            font-weight: 700;\n        }\n    }\n\n    .uui-picker_input-body-search {\n        --uui-data_picker_body-search-padding: 12px;\n    }\n\n    .uui-picker_input-row {\n        margin: 0 12px;\n        border-radius: 4px;\n\n        &[aria-selected='true'], &[aria-selected='true'].uui-focus {\n            background-color: var(--uui-primary-60);\n\n            .uui-picker_input-item {\n                --uui-picker_item-title: var(--uui-neutral-0);\n                --uui-picker_item-subtitle: var(--uui-neutral-0);\n            }\n\n            .uui-picker_input-row-select_icon {\n                display: none;\n            }\n        }\n    }\n\n\n    .uui-timepicker-container > .uui-timepicker-item .uui-timepicker-input.uui-input-box {\n        width: 40px;\n    }\n\n    .uui-dt-columns-config-row {\n        .uui-drag-handle {\n            --uui-dt-columns_config_modal-row-vertical-padding: 5px;\n        }\n    }\n}\n"]}