﻿.eForm .--eSection {
    padding: var(--ePageTop, 24px) var(--ePageRight, 0) var(--ePageBottom, 64px) var(--ePageLeft, 0);
}

.eForm .--ePanel {
    position: sticky;
    bottom: 0;
    background: var(--gray-50) !important; /*0.08*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

.eForm .--eForm {
    --_computedPadding: var(--eFormPadding);
    --_computedMaxW: var(--eFormMaxWidth);
    background: var(--eFormBg, var(--white));
    box-shadow: var(--eFormShadow, none);
    border-radius: var(--eFormBorderR, var(--radius-md));
    padding: var(--_computedPadding, var(--spacing-3xl));
    max-width: var(--_computedMaxW, 100%);
    width: var(--eFormW, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--eFormGap, var(--spacing-md));
    transition: box-shadow 0.2s ease;
    outline: none;
    border-style: solid;
    border-color: var(--eFormBorderColor, none);
    border-width: var(--eFormBorderW, 0);
    justify-content: var(--eFormJC, none);
    margin: var(--eFormMargin, 0);
    align-items: var(--eFormAlignItem, flex-start);
    /*--eFormH: auto;*/

    height: var(--eFormH, 100%);

    &.--eTouch {
        border: 1px solid var(--brand-100);
        cursor: pointer;
        transition: all 0.2s;
    }

        &.--eTouch:hover {
            background: var(--brand-50);
        }

    @supports (height: -webkit-fill-available) {
        & {
            height: var(--eFormHChrome, -webkit-fill-available);
        }
    }

    @supports (height: -moz-available) {
        & {
            height: var(--eFormHFireFox, -moz-available);
        }
    }

    &:focus-visible {
        box-shadow: var(--focus-ring-shadow-sm);
    }

    &.--shadow-xs {
        box-shadow: var(--shadow-xs);
    }

    &.--shadow-sm {
        box-shadow: var(--shadow-sm);
    }

    &.--shadow-md {
        box-shadow: var(--shadow-md);
    }

    &.--shadow-lg {
        box-shadow: var(--shadow-lg);
    }

    &.--shadow-xl {
        box-shadow: var(--shadow-xl);
    }

    &.--eFormScroll::-webkit-scrollbar-thumb,
    & .--eFormScroll::-webkit-scrollbar-thumb {
        border-color: var(--sb-thumb);
        border-width: 0;
    }

    &.--eFormScroll,
    & .--eFormScroll {
        overflow: auto;
    }

    &.--eFormScroll::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb,
    & .--eFormScroll::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb { /* just in case for nested */
        border-width: 4px;
    }

    &.--eFormScroll::-webkit-scrollbar,
    & .--eFormScroll::-webkit-scrollbar {
        width: 4px;
    }

    &:not(.stop__container, .--eFormScroll) {
        container: eForm / inline-size;
        position: relative;
        z-index: 1;
    }

    @container eForm (max-width: 720px) {
        & {
            --eFormGapCurrent: var(--eFormGapCqSm, var(--eformgapcqsm));
            --eFormPaddingCurrent: var(--eFormPaddingCqSm, var(--eformpaddingcqsm));
        }

        & .--eFilter {
            flex-direction: column;
            align-items: start;
            gap: var(--spacing-xl);
        }

        & .--eFilter > .--eBlock:first-child {
            --eBlockDirection: column;
            --eBlockAling: start;
        }
    }

    @container eForm (max-width: 684px) {
        & .--eTitle:has( ~ .--eFilter) {
            flex-direction: column;
        }
    }
}

.eForm .editor-fullscreen-open .--eForm {
    &:not(.stop__container, .--eFormScroll) {
        z-index: revert !important;
    }
}

.eForm .--eTitle {
    display: flex;
    align-items: var(--eTitleAlIt, center);
    justify-content: var(--eTitleJC, space-between);
    gap: var(--eTitleGap, var(--spacing-xl));
    margin-bottom: var(--eTitleMarginB, 4px);
    padding-bottom: var(--eTitlePaddingB, 4px);
    border-bottom: var(--eTitleBorderB, none);
    width: 100%;
    max-width: var(--eTitleW, 100%);

    & .priority__title {
        /*font-size: var(--font-size-display-xs);
        line-height: var(--line-height-display-xs);*/
        margin: 0;
        font-weight: var(--font-weight-semibold);
        color: var(--gray-900);
        font-size: var(--font-size-text-lg);
        word-break: break-word;
    }
        /*& h1.priority__title {
        font-size: 28px;
    }

    & h2.priority__title {
        font-size: 20px;
    }

    & h3.priority__title {
        font-size: 16px;
    }*/

        & .priority__title ~ p {
            /*font-size: 18px;*/
            font-weight: 400;
            color: var(--gray-600);
        }

    & > h4 {
        color: var(--gray-800);
        font-weight: var(--font-weight-semibold);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & > div:not([class]) {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & h6 {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.--eForm {

    & .--eFilter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--eFilterPaddingT, 0);
        padding-bottom: var(--eFilterPaddingB, 0);
        width: 100%;
    }

    /* footer region — pins itself to the bottom of the flex-column .--eForm card */
    & > .--eFooter {
        margin-top: var(--eFooterMarginTop, auto);
    }

    &.--eView {
        overflow: auto;
        max-height: 520px;
    }
}

.--eBlock {
    display: var(--eBlockDisplay, flex);
    align-items: var(--eBlockAling, center) !important;
    flex-direction: var(--eBlockDirection, row);
    flex-wrap: var(--eBlockWrap, revert);
    gap: var(--eBlockGap, var(--spacing-lg)) !important;
    justify-content: var(--eBlockJC, flex-start);
    margin: var(--eBlockM, 0);
    width: var(--eBlockW, auto);
    border-style: solid;
    border-color: var(--eBlockBorderColor, none);
    border-width: var(--eBlockBorderW, 0);
    border-radius: var(--eBlockBorderR, 0);
    height: var(--eBlockH, auto);
}

.--eForm .--eBlockContent {
    display: flex;
    align-items: var(--eBlockContentAling, center) !important;
    flex-direction: var(--eBlockContentDirection, row);
    gap: var(--eBlockContentGap, var(--spacing-3xl)) !important;
    justify-content: var(--eBlockContentJC, flex-start);
    margin: var(--eBlockContentM, 0);
    padding: var(--eBlockContentP, 0);
    border-style: solid;
    border-color: var(--eBlockContentBorderColor, none);
    border-width: var(--eBlockContentBorderW, 0);
    border-radius: var(--eBlockContentBorderR, 0);
}

.eForm .--eProperties {
    --_computedProperyMaxW: var(--ePropertiesW);
    display: flex;
    flex-direction: var(--ePropertiesFD, column);
    width: var(--_computedProperyMaxW, 100%);
    gap: var(--ePropertiesGap, var(--spacing-3xl)) !important;
    justify-content: var(--ePropertiesJC, flex-start);
    margin: var(--ePropertiesM, revert);

    @supports (width: -webkit-fill-available) {
        & {
            width: var(--_computedProperyMaxW, -webkit-fill-available);
        }
    }

    @supports (width: -moz-available) {
        & {
            width: var(--_computedProperyMaxW, -moz-available);
        }
    }

    & .--eAdaptiveLine, &.--eAdaptiveLine {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ePropertyGap, 4px);
        justify-content: var(--eFlexJC, flex-start);
        margin-top: var(--ePropertyMarginTop, 0px);
        margin-bottom: var(--ePropertyMarginBottom, 0px);
        align-items: center;
    }

    & .--eLink {
        text-decoration: none;
        cursor: pointer;
    }

    & .--eProperty {
        --_computedProperty: var(--eProperty);
        display: grid;
        grid-template-columns: var(--_computedProperty);
        gap: var(--ePropertyGap, 8px);
        width: 100%;
        max-width: var(--ePropertyMaxW, 100%);
        align-items: var(--ePropertyAI, revert);
        justify-items: var(--ePropertyJC, revert);
        padding: var(--ePropertyPadding, 0);
        border-style: solid;
        border-color: var(--ePropertyBorderColor, none);
        border-width: var(--ePropertyBorderW, 0);
        margin-bottom: var(--ePropertyMB, 0);

        & .--eLabel {
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-text-sm);
            line-height: var(--line-height-text-sm);
            color: var(--gray-700);
            margin-bottom: var(--eLabelMarginB, var(--spacing-sm));
        }

        & .--eSubLabel {
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-text-xs);
            line-height: var(--line-height-text-xs);
            color: var(--gray-700);
            margin-bottom: var(--eLabelMarginB, var(--spacing-xs));
        }

        & .--eHeader {
            display: flex;
            flex-direction: var(--direction, row);
        }

        & .--eContent {
            display: flex;
            flex-direction: var(--direction, row);
        }

        & .--eHeader.login {
            font-size: calc(var(--index) * 1.45);
            font-weight: 600;
        }

        & .--eContent.login {
            color: var(--gray-700);
            font-weight: 400;
        }

        @media (max-width: 576px) {
            --_computedProperty: var(--ePropertyMobile, var(--eProperty));
        }
    }

    &.colum > .--eProperty {
        grid-template-columns: 100% !important;
    }

    @media (max-width: 768px) {
        --_computedPropertiesMaxW: var(--ePropertiesWMediaTablet, var(--ePropertiesW));
    }

    @media (max-width: 576px) {
        --_computedProperyMaxW: var(--ePropertiesWMediaMobile, var(--ePropertiesWMediaTablet, var(--ePropertiesW)));
        --_computedProperty: var(--ePropertyMobile, var(--eProperty));
    }
}

.eForm .--eProperty {

}

.eForm .--eAdaptiveLine {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eAdaptiveLineGap, 4px);
    justify-content: var(--eFlexJC, flex-start);
    margin-top: var(--eAdaptiveLineMarginTop, 0px);
    margin-bottom: var(--eAdaptiveLineMarginBottom, 0px);
}

.eForm .--eUniformDistribution {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--eUniformDistributionGap, 4px);
    margin-top: var(--eUniformDistributionMarginTop, 0px);
    margin-bottom: var(--eUniformDistributionMarginBottom, 0px);
}

.eForm .--eCollapse {
    --_eCollapseDuration: var(--eCollapseDuration, .18s);
    --_eCollapseIconSize: var(--eCollapseIconSize, 18px);
    --_eCollapseIconColor: var(--eCollapseIconColor, var(--gray-700));
    position: relative;

    & .--eCollapseState {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        opacity: 0;
        pointer-events: none;
    }

    & .--eCollapseTitle {
        cursor: pointer;
        user-select: none;

        & h4 label {
            cursor: pointer;
        }

        & .--eCollapseIcon {
            inline-size: var(--_eCollapseIconSize);
            block-size: var(--_eCollapseIconSize);
            display: grid;
            place-items: center;
            cursor: pointer;
            flex: 0 0 auto;
            margin-left: 8px;

            &::before {
                content: "";
                inline-size: 8px;
                block-size: 8px;
                border-right: 2px solid var(--_eCollapseIconColor);
                border-bottom: 2px solid var(--_eCollapseIconColor);
                transform: rotate(45deg);
                transition: transform var(--_eCollapseDuration) ease;
            }
        }
    }

    & .--eCollapseBody {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        overflow: hidden;
        transition: grid-template-rows var(--_eCollapseDuration) ease, opacity var(--_eCollapseDuration) ease;

        & .--eProperties {
            min-block-size: 0;
            overflow: hidden;
        }
    }

    & .--eCollapseState:not(:checked) {
        & ~ .--eCollapseTitle {
            & .--eCollapseIcon::before {
                transform: rotate(-45deg);
            }
        }

        & ~ .--eCollapseBody {
            grid-template-rows: 0fr;
            opacity: 0;
        }
    }
}