.dataview {
    font-size: 11px; // must be const value
    &.inner {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        .empty-text {
            text-align: center;
            height: 100%;
            width: 100%;
            color: @text-tertiary-ie;
            color: @text-tertiary;
            td {
                padding: 5px;
            }
        }
    }

    &.no-borders-item {
        > .item,
        .grouped-data .group-items-container .item {
            .box-shadow(none);
        }
    }

    > .item {
        display: inline-block;
        .float-left();
        margin: 4px;

        &:not(.disabled) {
            cursor: pointer;
        }

        .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
        .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);

        &:hover:not(.disabled) {
            .box-shadow(0 0 0 2px @border-preview-hover-ie);
            .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover);
        }

        &.selected:not(.disabled) {
            .box-shadow(0 0 0 2px @border-preview-select-ie);
            .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select);
        }

        .options__icon {
            opacity: @component-normal-icon-opacity;
        }

        &,
        canvas,
        img {
            border-radius: @border-radius-dataview-item-ie;
            border-radius: @border-radius-dataview-item;
        }
    }

    &:not(.disabled) > .item {
        &.disabled {
            opacity: @component-disabled-opacity-ie;
            opacity: @component-disabled-opacity;
        }
    }

    .grouped-data {
        clear: left;
        overflow: hidden;

        .rtl & {
            clear: right;
        }

        &.inline {
            display: inline-block;

            .rtl & {
                float: right;
                clear: none;
            }

            &.margin .group-items-container {
                .margin-right-20();
            }
        }

        .group-description {
            .font-size-normal();
            color: @text-normal-ie;
            color: @text-normal;
            .text-align-left();
        }

        .group-items-container {
            overflow: hidden;
            margin-bottom: 5px;

            & > div {
                display: inline-block;
                .float-left();
                margin: 2px 4px 4px;

                &:not(.disabled) {
                    cursor: pointer;
                }

                &.disabled {
                    opacity: @component-disabled-opacity-ie;
                    opacity: @component-disabled-opacity;
                }

                .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
                .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
                border-radius: @border-radius-dataview-item-ie;
                border-radius: @border-radius-dataview-item;

                &:hover:not(.disabled) {
                    .box-shadow(0 0 0 2px @border-preview-hover-ie);
                    .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover);
                }

                &.selected:not(.disabled) {
                    .box-shadow(0 0 0 2px @border-preview-select-ie);
                    .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select);
                }

                &,
                canvas,
                img {
                    border-radius: @border-radius-dataview-item-ie;
                    border-radius: @border-radius-dataview-item;
                }
            }
        }
    }

    .header-name {
        padding: 10px 2px 12px 4px;
        .font-weight-bold();
        cursor: default;
        .rtl & {
            padding: 10px 4px 12px 2px;
        }
    }

    &.bordered {
        border: @scaled-one-px-value-ie solid @input-border;
        border: @scaled-one-px-value solid @input-border;
        .border-radius(@border-radius-small);
    }

    &:not(.no-focus):focus:not(.disabled),
    &:not(.no-focus).focused:not(.disabled){
        border-color: @border-control-focus-ie;
        border-color: @border-control-focus;
        &.bordered {
            .box-shadow(@shadow-fill-input-ie);
            .box-shadow(@shadow-fill-input);
        }
    }
}

.menu-insert-shape, .menu-change-shape {
    width: 362px;
    padding: 10px 5px 10px 10px !important;

    .rtl & {
        padding: 10px 10px 10px 5px !important;
    }

    .group-description {
        padding: 3px 0 3px 4px;

        .rtl & {
            padding: 3px 4px 3px 0;
        }
    }

    .dataview .grouped-data .group-items-container .item {
        box-shadow: none;
        margin: 2px 2px 2px;
    }
}