@import (reference) "../../../Default/Bootstrap/variables.less";
@import "./cms.emailmarketing.emailbuilder.common.less";

@widget-properties-header-height: @base-unit * 3.5;
@widget-properties-close-btn-padding: (@widget-properties-header-height - @icon-size-100) / 2;
@widget-properties-header-actions-height: @base-unit * 3.5;
@widget-properties-background-color: @color-white;

.widget-properties-sidebar {
    height: inherit;
    background-color: @widget-properties-background-color;

    .widget-properties-header {
        height: @widget-properties-header-height;
        padding-left: @base-unit;
        background-color: @color-gray-70;
        color: @color-white;

        h1 {
            line-height: @widget-properties-header-height;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
        }

        .widget-properties-close {
            height: 100%;
            width: @widget-properties-header-height;
            float: right;
            background-color: @color-gray-80;

            .widget-properties-close-btn {
                padding: @widget-properties-close-btn-padding;
                border: 0;
                outline: 0;
                color: @color-gray-130;
                background-color: transparent;

                i[class^="icon-"] {
                    padding: 0;
                }
            }
        }
    }

    .header-actions-container {
        height: @header-actions-height;
    }

    .editing-form-category-fields {
        margin-top: 0;
    }

    .widget-properties-form {
        padding: @base-unit;
        height: calc(~"100vh - "(@widget-properties-header-height + @header-actions-height));
        overflow: auto;
        box-sizing: border-box;

        .widget-properties-save-status {
            display: none;
        }

        .editing-form-value-cell {
            img {
                max-width: 100%;
            }
        }
    }
}