{"version":3,"file":"neo-configurator.css","mappings":"AAGA,gCACI,aACA,iBAGJ,0BACI,aAKA,YACI,YACA,sCACA,iCAEA,qBACI,iDApBI,CAqBJ,oDArBI,CAwBR,qBACI,kDAzBI,CA0BJ,qDA1BI,CA6BR,kBACI,kBACA,6CACA,8EACA,+BACA,kBAGJ,iBACI,cAEA,6BACI,iBAGJ,sBACI,eACA,kBACA,gBACA,gBACA,mBACA,uCACA,iCAEA,+BACI,kBACA,mBAGJ,+BACI,kBACA,mBAGJ,0DAnBJ,sBAoBQ,+CAGJ,8BACI,WACA,cACA,kBACA,qBACA,QACA,2CACA,8CACA,iCAEA,uCACI,OAGJ,uCACI,QAGJ,0DAlBJ,8BAmBQ,4CAIR,6BACI,wBAEA,mCACI,kBACA,sBAEA,2CACI,kBAKZ,0CACI,kBAGJ,4DAEI,kBACA,WACA,kBAGJ,4BACI,cACA,qBAEA,qCACI,UAGJ,qCACI,SAIA,qDACI,8BAGJ,0DACI,oCAKJ,+CACI,yBAGJ,oDACI,oCAKZ,gCACI,oBACA,oBACA,qBAEA,yCACI,WAGJ,yCACI,UAGJ,gDACI,8BAEA,sDACI,oCAIR,0CACI,yBAEA,gDACI,oCAKZ,kCACI,UACA,iCAIA,uCACI,UAGJ,wCACI,iBAEA,gDACI,WAIR,wCACI,kBAEA,gDACI,YAKZ,iCACI,UAEA,wCACI,yBAIR,mCACI,eACA,iBACA,oBAEA,+CACI,aAGJ,0CACI,eACA,iBACA,yBACA,wBAEA,gDACI,mBACA,sBAKZ,mCACI,YAEA,4CACI,kBACA,qBACA,sBACA,UAMhB,oBACI,kBAEA,yBACI,kBACA,mBAEA,sCACI,eACA,iBACA,yBACA,wBAMhB,SACI,YACA,iBACA,sCAEA,kBACI,cACA,kDA/QI,CAgRJ,qDAhRI,CAmRR,kBACI,eACA,iDArRI,CAsRJ,oDAtRI,CAyRR,cACI,aACA,6CACA,iCACA,8EAEA,kBACI,cACA,kBACA,+BAEA,wBACI,qBACA,cAGJ,8BACI,mBACA,oBACA,2CACA,4CACA,sBACA,wBAII,iEACA,kEAMhB,iBACI,kBACA,sBA3TM,CA6TN,mDACI,aACA,oBACA,oDAEA,mEACI,OAIR,0BACI,kBACA,qBACA,sBACA,UAGJ,iCACI,+BAII,8CACI,kBACA,kBACA,kBACA,sBAGJ,kEACA,mEAQZ,qBACI,eAIA,yBACI,SAGJ,uBACI,SAIR,qBACI,YAEA,wBACI,aACA,mBACA,WAEA,2BACI,aACA,sBACA,wBACA,uBAEA,6BACI,YACA,wBACA,uBACA,6BACA,mBACA,eACA,gEACA,iEAEA,iCACI,c","sources":["webpack://craft-neo/./src/assets/src/configurator/styles/configurator.scss"],"sourcesContent":["$border-radius: var(--small-border-radius);\n$content-padding: var(--padding);\n\n.neo-configurator > .field > .input {\n    display: flex;\n    min-height: 400px;\n}\n\n[data-neo='template.fld'] {\n    display: none;\n}\n\n.nc {\n\n    &_sidebar {\n        width: 202px;\n        border: 1px solid rgba(96, 125, 159, 0.25);\n        background-color: var(--gray-050);\n\n        body.ltr & {\n            border-top-left-radius: $border-radius;\n            border-bottom-left-radius: $border-radius;\n        }\n\n        body.rtl & {\n            border-top-right-radius: $border-radius;\n            border-bottom-right-radius: $border-radius;\n        }\n\n        &_title {\n            padding: 10px 24px;\n            border-bottom: 1px solid rgba(96, 125, 159, 0.25);\n            background-image: linear-gradient(rgba(51, 64, 77, 0), rgba(51, 64, 77, 0.05));\n            color: var(--medium-text-color);\n            text-align: center;\n        }\n\n        &_list {\n            margin: 0 -1px;\n\n            &:not(:empty) {\n                padding-top: 10px;\n            }\n\n            &_item {\n                cursor: default;\n                position: relative;\n                margin-top: -1px;\n                padding-top: 6px;\n                padding-bottom: 6px;\n                border: 1px solid var(--hairline-color);\n                background-color: var(--gray-100);\n\n                body.ltr & {\n                    padding-left: 10px;\n                    padding-right: 70px;\n                }\n\n                body.rtl & {\n                    padding-left: 70px;\n                    padding-right: 10px;\n                }\n\n                @media screen and (prefers-reduced-motion: no-preference) {\n                    transition: margin-left 0.15s, margin-right 0.15s;\n                }\n\n                &::before {\n                    content: '';\n                    display: block;\n                    position: absolute;\n                    top: -1px; bottom: -1px;\n                    width: 0;\n                    border-top: 1px solid var(--hairline-color);\n                    border-bottom: 1px solid var(--hairline-color);\n                    background-color: var(--gray-050);\n\n                    body.ltr & {\n                        left: 0;\n                    }\n\n                    body.rtl & {\n                        right: 0;\n                    }\n\n                    @media screen and (prefers-reduced-motion: no-preference) {\n                        transition: left 0.15s, right 0.15s, width 0.15s;\n                    }\n                }\n\n                > .label {\n                    color: var(--text-color);\n\n                    &:empty {\n                        font-style: italic;\n                        color: var(--gray-350);\n\n                        &::before {\n                            content: \"(blank)\";\n                        }\n                    }\n                }\n\n                > .code:empty::before {\n                    content: \"(blank)\";\n                }\n\n                > .move,\n                > .settings {\n                    position: absolute;\n                    width: 25px;\n                    text-align: center;\n                }\n\n                > .move {\n                    display: block;\n                    top: calc(50% - 10px);\n\n                    body.ltr & {\n                        right: 3px;\n                    }\n\n                    body.rtl & {\n                        left: 3px;\n                    }\n\n                    &:not(.has-error) {\n                        ::before {\n                            color: var(--ui-control-color);\n                        }\n                        \n                        &:hover::before {\n                            color: var(--ui-control-hover-color);\n                        }\n                    }\n\n                    &.has-error {\n                        ::before {\n                            color: var(--error-color);\n                        }\n                        \n                        &:hover::before {\n                            color: var(--ui-control-hover-color);\n                        }\n                    }\n                }\n\n                > .settings {\n                    display: inline-flex;\n                    top: calc(50% - 7px);\n                    padding: 0 !important;\n\n                    body.ltr & {\n                        right: 32px;\n                    }\n\n                    body.rtl & {\n                        left: 32px;\n                    }\n\n                    &:not(.has-error) {\n                        color: var(--ui-control-color);\n\n                        &:hover {\n                            color: var(--ui-control-hover-color);\n                        }\n                    }\n\n                    &.has-error {\n                        color: var(--error-color);\n\n                        &:hover {\n                            color: var(--ui-control-hover-color);\n                        }\n                    }\n                }\n\n                &.is-selected {\n                    z-index: 1;\n                    background-color: var(--gray-200);\n                }\n\n                &.is-child {\n                    &::before {\n                        width: 9px;\n                    }\n\n                    body.ltr & {\n                        margin-left: 10px;\n\n                        &::before {\n                            left: -10px;\n                        }\n                    }\n\n                    body.rtl & {\n                        margin-right: 10px;\n\n                        &::before {\n                            right: -10px;\n                        }\n                    }\n                }\n\n                &.has-errors {\n                    z-index: 2;\n\n                    > .label {\n                        color: var(--error-color);\n                    }\n                }\n\n                &.type-heading {\n                    margin-top: 9px;\n                    padding-top: 10px;\n                    padding-bottom: 10px;\n\n                    &:first-child {\n                        margin-top: 0;\n                    }\n\n                    > .label {\n                        font-size: 11px;\n                        font-weight: bold;\n                        text-transform: uppercase;\n                        color: rgba(63, 77, 90, 0.8);\n\n                        &:empty {\n                            font-weight: normal;\n                            color: var(--gray-350);\n                        }\n                    }\n                }\n\n                &.type-spinner {\n                    height: 42px;\n\n                    .spinner {\n                        position: absolute;\n                        top: calc(50% - 17px);\n                        left: calc(50% - 12px);\n                        opacity: 1;\n                    }\n                }\n            }\n        }\n\n        &_buttons {\n            padding: 14px 12px;\n\n            > .btn {\n                padding-left: 12px;\n                padding-right: 12px;\n\n                &.type-heading {\n                    font-size: 11px;\n                    font-weight: bold;\n                    text-transform: uppercase;\n                    color: rgba(63, 77, 90, 0.8);\n                }\n            }\n        }\n    }\n\n    &_main {\n        flex-grow: 1;\n        flex-shrink: 9999; // Fixes weird layout bug when switching tabs\n        border: 1px solid rgba(96, 125, 159, 0.25);\n\n        body.ltr & {\n            border-left: 0;\n            border-top-right-radius: $border-radius;\n            border-bottom-right-radius: $border-radius;\n        }\n\n        body.rtl & {\n            border-right: 0;\n            border-top-left-radius: $border-radius;\n            border-bottom-left-radius: $border-radius;\n        }\n\n        &_tabs {\n            display: flex;\n            border-bottom: 1px solid rgba(96, 125, 159, 0.25);\n            background-color: var(--gray-050);\n            background-image: linear-gradient(rgba(51, 64, 77, 0), rgba(51, 64, 77, 0.05));\n\n            &_tab {\n                display: block;\n                padding: 10px 24px;\n                color: var(--medium-text-color);\n\n                &:hover {\n                    text-decoration: none;\n                    color: #0d78f2;\n                }\n\n                &.is-selected {\n                    margin-bottom: -1px;\n                    padding-bottom: 11px;\n                    border-left: 1px solid rgba(96, 125, 159, 0.25);\n                    border-right: 1px solid rgba(96, 125, 159, 0.25);\n                    background-color: #fff;\n                    color: var(--text-color);\n\n                    &:first-child {\n\n                        body.ltr & { border-left:  0; }\n                        body.rtl & { border-right: 0; }\n                    }\n                }\n            }\n        }\n\n        &_content {\n            position: relative;\n            padding: $content-padding;\n\n            &[data-neo='container.fieldLayout'] {\n                display: flex;\n                align-items: stretch;\n                height: calc(100% - #{$content-padding} -  #{$content-padding});\n\n                > .layoutdesigner {\n                    flex: 1;\n                }\n            }\n\n            > .spinner {\n                position: absolute;\n                top: calc(50% - 17px);\n                left: calc(50% - 12px);\n                opacity: 1;\n            }\n\n            .checkbox + label {\n                color: var(--medium-text-color);\n\n                &:empty {\n\n                    &::after {\n                        content: '(blank)';\n                        font-size: inherit;\n                        font-style: italic;\n                        color: var(--gray-350);\n                    }\n\n                    body.ltr & { padding-left:  20px; }\n                    body.rtl & { padding-right: 20px; }\n                }\n            }\n        }\n    }\n\n    &_icon-select {\n\n        > .btn {\n            margin-top: 8px;\n        }\n\n        &-show {\n            > img {\n                margin: 0;\n            }\n\n            > p {\n                margin: 0;\n            }\n        }\n\n        &-menu {\n            width: 388px;\n\n            > ul {\n                display: flex;\n                flex-flow: row wrap;\n                width: 100%;\n\n                > li {\n                    display: flex;\n                    flex-direction: column;\n                    padding: 10px !important;\n                    width: 120px !important;\n\n                    > a {\n                        flex-grow: 1;\n                        padding: 10px !important;\n                        width: 120px !important;\n                        text-align: center !important;\n                        white-space: normal;\n                        cursor: pointer;\n                        body.ltr & { transform: translateX(4px); }\n                        body.rtl & { transform: translateX(-4px); }\n\n                        > img {\n                            margin: 0 auto;\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n"],"names":[],"sourceRoot":""}