.component-backend-document {
    .document-header-container {
        opacity: 1;
        padding: (@document-ui-base-padding/2) @document-ui-base-padding;
        border-bottom: 1px solid @primary-border;

        .document-header {
            position: relative;

            &.has-document-icon {
                padding-left: 30px;
            }

            &.has-close-icon {
                padding-right: 30px;
            }
        }

        .close-icon {
            position: absolute;
            top: @document-ui-base-padding/2 + 1;
            right: 0;
            width: 19px;
            height: 19px;
            border-radius: 20px;

            .opacity(1);
            .backend-hide-text();

            &:after {
                display: none!important;
            }

            &:focus {
                outline: none;
                background-color: @toolbar-focus-bg;
            }

            &:before {
                display: block;
                width: 11px;
                height: 11px;
                position: absolute;
                background-position: -253px 0;
                top: 4px;
                right: 4px;
            }

            &:focus,
            &:hover {
                &:before {
                    background-position: -268px 0;
                }
            }
        }

        .document-icon {
            display: block;
            position: absolute;
            left: 0;
            top: @document-ui-base-padding/2 + 1;
            width: 18px;
            height: 18px;
            border-radius: 4px;

            i {
                display: block;
                color: white;
                position: absolute;
                left: 4px;
                top: 4px;
                font-size: 10px;
            }
        }

        input.header-title, input.header-subtitle {
            border: 1px solid @body-bg;
            color: @input-color;
            outline: none;
            background: transparent;
            border-radius: 4px;
            padding: 1px;
            -webkit-appearance: none;

            &[disabled] {
                color: @input-disabled-color;
            }
        }

        input.header-title {
            display: block;
            font-size: 24px;
            width: 100%;
            margin: 0 -2px;
        }

        .subtitle-label {
            color: @primary-color;
            margin-right: 3px;
        }
    }

    .document-header-fade-enter-active {
        transition: opacity .3s;
    }

    .document-header-fade-leave-active {
        transition: opacity .1s;
    }

    .document-header-fade-enter, .document-header-fade-leave-to {
        opacity: 0;
    }

    &.no-header-elements .document-header-container {
        padding: 0;
    }
}

html:not(.user-touch) {
    .component-backend-document {
        .document-header-container {
            input.header-title, input.header-subtitle {
                &:not([disabled]):hover {
                    border: 1px solid @input-border;
                }
            }
        }
    }
}