{"version":3,"file":"neo-main.css","mappings":"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","sources":["webpack://craft-neo/./src/assets/src/input/styles/input.scss"],"sourcesContent":["@use \"sass:math\";\n\n$preview-reduction: 80px;\n$topbar-background-color-level-odd: #ebf2fa;\n$topbar-background-color-level-even: #ebf2fa80;\n$topbar-background-color-transparent: #ebf2fa00;\n\n@mixin icon {\n    width: 30px;\n    height: 30px;\n\n    &.defaulticon {\n        background-image: url(../icons/default-new-block-icon.svg);\n    }\n}\n\n.neo-input {\n\n    &.is-static {\n\n        .ni_block .block-checkbox,\n        .ni_block .block-settings,\n        .ni_block .block-reorder,\n        .ni_buttons {\n            display: none;\n        }\n\n        .ni_block:last-child {\n            margin-bottom: 0;\n        }\n    }\n}\n\n.ni {\n\n    &_buttons {\n        position: relative;\n        height: 30px;\n\n        > .btngroup,\n        > .menubtn {\n            position: absolute;\n            top: 0;\n\n            body.ltr & { left:  0; }\n            body.rtl & { right: 0; }\n        }\n    }\n\n    &_newblockgrid {\n        width: 500px;\n        max-width: calc(100vw - 98px) !important;\n\n        ul {\n            display: flex;\n            flex-flow: wrap;\n            width: 100%;\n\n            &:not(:last-child) {\n                border-bottom: 1px solid #e3e5e8;\n            }\n\n            > li {\n                display: flex;\n                flex-direction: column;\n                padding: 10px 14px;\n                width: 118px;\n\n                > a {\n                    flex-grow: 1;\n                    padding: 10px 14px !important;\n                    text-align: center !important;\n                    white-space: normal;\n                }\n            }\n        }\n\n        &_icon {\n            @include icon;\n            margin: 0 auto 10px;\n        }\n    }\n\n    &_newblocklist {\n        h6 {\n            margin-bottom: 14px;\n        }\n\n        ul {\n            width: 100%;\n\n            &:not(:last-child) {\n                padding-bottom: 14px;\n                border-bottom: 1px solid #e3e5e8;\n            }\n\n            > li > a {\n                padding: 8px 24px !important;\n                text-align: center !important;\n                white-space: normal;\n            }\n        }\n\n        &_icon {\n            @include icon;\n        }\n    }\n\n    &_blocks {\n\n        > .ni_buttons {\n            margin-bottom: 10px;\n        }\n    }\n\n    &_spinner {\n        margin-bottom: 10px;\n        text-align: center;\n    }\n\n    &_block {\n        box-sizing: border-box;\n        width: 100%;\n        margin-bottom: 10px;\n        border-radius: 4px;\n        border: 1px solid #e3e5e8;\n        background-color: #f3f7fc;\n        padding: 0;\n\n        &:focus {\n            outline: 0;\n        }\n\n        &.has-errors {\n            border: 1px solid var(--error-color);\n        }\n\n        &_topbar {\n            position: relative;\n            height: 30px;\n            line-height: 30px;\n            background-color: $topbar-background-color-level-odd;\n            color: #8f98a3;\n            padding: 0 14px;\n            border-radius: 4px 4px 0 0;\n\n            @media screen and (prefers-reduced-motion: no-preference) {\n                transition: background-color 0.5s;\n            }\n\n            &_left,\n            &_right {\n                display: flex;\n                position: absolute;\n                top: 0; bottom: 0;\n            }\n\n            &_left {\n\n                body.ltr & {\n                    left:  14px;\n                }\n\n                body.rtl & {\n                    right: 14px;\n                }\n            }\n\n            &_right {\n                min-width: 100px;\n\n                body.ltr & {\n                    right: 14px;\n                }\n\n                body.rtl & {\n                    left:  14px;\n                }\n            }\n\n            &_item {\n                cursor: default;\n                padding: 0 8px;\n                -webkit-user-select: none;\n                -moz-user-select: none;\n                user-select: none;\n                white-space: nowrap;\n\n                body.ltr &:not(:first-child),\n                body.rtl &:not(:last-child) {\n                    padding-left: 0;\n                }\n\n                &:first-child {\n                    padding-left: 0;\n                }\n\n                &:last-child {\n                    padding-right: 0;\n                }\n\n                &.size-full {\n                    flex-grow: 1;\n                }\n\n                &.clip-text {\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                }\n\n                &.title {\n\n                    .blocktype {\n                        // Add vertical padding so there's more hit area for the checkbox\n                        padding: 8px 0;\n\n                        &.has-errors {\n                            color: var(--error-color);\n\n                            + span {\n                                margin-left: var(--xs);\n                                color: var(--error-color);\n                            }\n                        }\n                    }\n                }\n\n                &.handle {\n                    display: flex;\n                    transform: translateY(3px);\n                    line-height: 1.42;\n                }\n\n                &.preview-container {\n                    .preview {\n                        pointer-events: none; // Allow the double-click expand/collapse work it's magic\n                        position: absolute;\n                        width: calc(100% - #{$preview-reduction});\n                        height: 30px;\n                        overflow: hidden;\n                        color: #b9bfc6;\n\n                        @media screen and (prefers-reduced-motion: no-preference) {\n                            transition: opacity 0.2s;\n                        }\n\n                        body.ltr & { margin-left:  8px; }\n                        body.rtl & { margin-right: 8px; }\n\n                        &:empty {\n                            // Fixes bug where the blocktype can get clipped prematurely\n                            display: none;\n                        }\n\n                        &_section {\n                            display: inline-block;\n                            padding: 0 8px;\n                            height: 30px;\n                            line-height: 30px;\n\n                            body.ltr & { border-left:  1px solid #e3e5e8; }\n                            body.rtl & { border-right: 1px solid #e3e5e8; }\n                        }\n\n                        img,\n                        &_color {\n                            display: inline-block;\n                            vertical-align: top;\n                            margin-top: 15px;\n                            transform: translateY(-50%);\n                        }\n\n                        img {\n                            max-width: 30px;\n                            max-height: 30px;\n                        }\n\n                        &_color {\n                            width: 16px;\n                            height: 16px;\n                            border-radius: 50%;\n                        }\n\n                        .status {\n\n                            body.ltr & { margin-right: 6px; }\n                            body.rtl & { margin-left:  6px; }\n                        }\n                    }\n                }\n\n                &.tabs {\n                    position: relative;\n\n                    @media screen and (prefers-reduced-motion: no-preference) {\n                        transition: opacity 0.2s;\n                    }\n\n                    .tabs_inner {\n                        white-space: nowrap;\n\n                        body.ltr & { right: 0; direction: ltr; }\n                        body.rtl & { left:  0; direction: rtl; }\n                    }\n\n                    .tabs_btn {\n                        position: absolute;\n                        top: 0;\n                        display: inline-flex;\n                        cursor: pointer;\n                        height: 30px;\n                        padding: 0 9px;\n                        border: 1px solid #e3e5e8;\n                        border-top: 0;\n                        border-bottom-color: #fbfcfd;\n                        margin-bottom: -1px;\n                        background-color: #fbfcfd;\n                        color: #576575;\n\n                        body.ltr & { right: 8px; }\n                        body.rtl & { left:  8px;  }\n\n                        &.has-errors {\n                            color: var(--error-color);\n                        }\n                    }\n\n                    .tab {\n                        display: inline-block;\n                        height: 30px;\n                        padding: 0 10px;\n                        border-bottom-color: #fafafa;\n                        color: rgba(#29323d, 0.5);\n\n                        &:hover {\n                            color: #0d78f2;\n                        }\n\n                        &.is-selected {\n                            cursor: default;\n                            padding: 0 9px;\n                            border-left: 1px solid #e3e5e8;\n                            border-right: 1px solid #e3e5e8;\n                            border-bottom-width: 1px;\n                            border-bottom-style: solid;\n                            margin-bottom: -1px;\n                            background-color: #f3f7fc;\n                            color: #576575;\n\n                            &.is-blank {\n                                border-bottom-color: #f1f5f8;\n                                background-color: transparent;\n\n                                @media screen and (prefers-reduced-motion: no-preference) {\n                                    transition: border-bottom-color 0.5s;\n                                }\n                            }\n                        }\n\n                        &.has-errors {\n                            color: var(--error-color);\n                        }\n                    }\n                }\n\n                &.block-settings {\n                    .settings {\n                        padding: 0 8px;\n                        height: 20px;\n\n                        &:not(:hover):not(:active) {\n                            background-color: transparent;\n                        }\n\n                        &::before {\n                            margin-right: 0 !important;\n                        }\n                    }\n\n                    .menu {\n                        line-height: 20px;\n                    }\n                }\n\n                .invisible {\n                    visibility: hidden;\n                    pointer-events: none;\n                }\n\n                > .checkbox {\n                    position: relative;\n                    display: block;\n                    height: 100%;\n                    color: #29323d;\n\n                    &::before {\n                        position: absolute;\n                        top: 50%;\n                        margin-top: -8px;\n                    }\n\n                    &::after {\n                        display: none;\n                    }\n                }\n\n                > .status {\n                    margin: 10px 5px 0 0;\n                }\n\n                > a {\n                    color: rgba(#29323d, 0.25);\n\n                    &:hover {\n                        color: #0d78f2;\n                    }\n                }\n            }\n        }\n\n        &_body > * {\n            padding-left: 14px;\n            padding-right: 14px;\n\n            &:last-child {\n                padding-bottom: 14px;\n            }\n        }\n\n        &_content {\n            &:empty {\n                display: none;\n            }\n\n            &:not(.is-tab-unselected) > [data-layout-tab] {\n                padding-top: 14px;\n\n                &.is-blank {\n                    padding-top: 0;\n                    border-top: 0;\n                }\n\n                > .field {\n                    margin: 15px 0 0 0;\n                }\n\n                &.flex-fields {\n                    --row-gap: var(--m) !important;\n\n                    > .field {\n                        &::before {\n                            display: none;\n                        }\n\n                        .lp-editor & .status-badge {\n                            left: calc(var(--m) * -1);\n                        }\n                    }\n                }\n            }\n        }\n\n        &_children {\n            padding-top: 14px;\n            padding-bottom: 18px !important;\n\n            @media screen and (prefers-reduced-motion: no-preference) {\n                transition: background-color 0.5s;\n            }\n\n            .ni_block_body > &:not(:first-child) {\n                margin-top: 14px;\n                border-top: 1px solid #e3e5e8;\n            }\n        }\n\n        &_collapsed-children {\n            overflow: hidden;\n\n            &_child {\n                height: 2px;\n                border-top: 1px solid #e3e5e8;\n                background-color: #fbfcfd;\n                margin-top: -3px;\n\n                @media screen and (prefers-reduced-motion: no-preference) {\n                    transition: margin-top 0.2s; // 200ms to match jQuery transition duration\n                }\n            }\n        }\n\n        &.is-level-odd {\n            .ni_block_topbar_left::before {\n                body.ltr & {\n                    background-image: linear-gradient(-90deg, $topbar-background-color-level-odd 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n                }\n\n                body.rtl & {\n                    background-image: linear-gradient(90deg, $topbar-background-color-level-odd 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n                }\n            }\n        }\n\n        &.is-level-even {\n            background-color: #fbfcfd;\n\n            > .ni_block_topbar {\n                background-color: $topbar-background-color-level-even;\n\n                > .ni_block_topbar_left::before {\n                    body.ltr & {\n                        background-image: linear-gradient(-90deg, $topbar-background-color-level-even 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n                    }\n\n                    body.rtl & {\n                        background-image: linear-gradient(90deg, $topbar-background-color-level-even 0, $topbar-background-color-transparent 40px, $topbar-background-color-transparent 100%);\n                    }\n                }\n\n                > .ni_block_topbar_right > .ni_block_topbar_item.tabs .tab {\n                    &.is-blank {\n                        border-bottom-color: white;\n                    }\n\n                    &.is-selected {\n                        background-color: #fbfcfd;\n                    }\n                }\n            }\n        }\n\n        &.is-expanded {\n\n            > .ni_block_topbar {\n\n                .title > .preview {\n                    opacity: 0;\n                }\n            }\n        }\n\n        &.is-collapsed {\n            padding-bottom: 0;\n\n            > .ni_block_topbar {\n\n                .ni_block_topbar_left {\n\n                    overflow: hidden;\n\n                    &::before {\n                        content: '';\n                        pointer-events: none;\n                        position: absolute;\n                        top: 0;\n                        bottom: 0;\n                        left: 0;\n                        right: 0;\n                        z-index: 1;\n                    }\n\n                    body.ltr & {\n                        right: $preview-reduction;\n                    }\n\n                    body.rtl & {\n                        left: $preview-reduction;\n                    }\n                }\n\n                .ni_block_topbar_right {\n                    pointer-events: none;\n\n                    > .tabs {\n                        opacity: 0;\n                    }\n\n                    > :not(.tabs) {\n                        pointer-events: auto;\n                    }\n                }\n            }\n\n            > .ni_block_collapsed-children {\n\n                .ni_block_collapsed-children_child {\n                    margin-top: 0;\n                }\n            }\n\n            .ni_block_body {\n                pointer-events: none;\n            }\n        }\n\n        &.is-disabled-for-user {\n            pointer-events: none;\n            opacity: 0.5;\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            user-select: none;\n\n            .ni_block_topbar_item {\n\n                &.title .preview {\n                    opacity: 0;\n                }\n            }\n        }\n\n        &.is-empty {\n            padding: 6px 0; // Add some vertical size to blocks without fields or children so they stand out more\n\n            &.is-level-odd {\n                background-color: $topbar-background-color-level-odd;\n            }\n\n            &.is-level-even {\n                background-color: $topbar-background-color-level-even;\n            }\n        }\n    }\n\n    &_child-blocks-ui-element {\n        > .ni_block_children {\n            padding: 0;\n        }\n\n        + .ni_block_errors > .errors {\n            margin-top: 0;\n        }\n    }\n}\n\n.neo_block_tabs-menu {\n\n    a.is-selected {\n        cursor: default;\n        pointer-events: none;\n        opacity: 0.25;\n    }\n\n    a.has-errors {\n        color: #da5a47;\n    }\n}\n\n// Tweak the styles of nested Matrix fields so it doesn't look so confusing\n.ni_block .matrixblock,\n.neo-matrixblock {\n    border-color: #ccc;\n    background-color: white;\n    box-shadow: 0 1px 5px -1px rgba(black, 0.1);\n\n    > .titlebar {\n        border-bottom-color: #eee;\n        background-color: #fbfcfd;\n    }\n}\n"],"names":[],"sourceRoot":""}