@cellEditorHeight: 30px;
@cellEditorExpandedHeight: 70px;
@contentBackColor: #fff;
@gray-light: #f1f1f1;

#idx-celleditor {
    display: flex;

    height: @cellEditorHeight;
    min-height: @cellEditorHeight;
    background-color: @contentBackColor;

    &.expanded {
        min-height: @cellEditorExpandedHeight;
        //height: @cellEditorExpandedHeight;
        transition: min-height .1s;
    }

    &:after {
        content: '';
        position: absolute;
        background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
        display: block;
        z-index: 15;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        transform-origin: 50% 100%;
        transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
    }

    #box-cell-name {
        background-color: var(--f7-navbar-bg-color);
    }

    #ce-cell-content {
        padding: 3px 3px;
        line-height: 1.428571429;
        color: #000;
        vertical-align: middle;
        background-color: @contentBackColor;
        min-height: @cellEditorHeight;
        height: 100%;
        width: 100%;
    }

    .caret {
        &::after {
            content: '';
            position: absolute;
            top: 8px;
            left: 6px;
            width: 8px;
            height: 8px;
            background-color: transparent;
            border: solid 1px black;
            border-bottom: none;
            border-right: none;

            transition: transform 0.2s ease;
            transform: rotate(-135deg);
        }

        width: 30px;
        height: 16px;
    }

    &.expanded {
        .caret {
            &::after {
                transform: rotate(45deg) translate(3px, 3px);
            }
        }
    }
}