@import '../../less/reset';
@import '../../less/palette';
@import '../../less/mixins';

.pane {
    @header-height: 56px;
    @pane-width: 445px;
    @header-line-height: 60px;

    .standard-transition(background-color);
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    pointer-events: none;
    background-color: transparent;

    &.open {
        background-color: fadeout(white, 30%);
        pointer-events: auto;
    }

    >.wrapper {
        .standard-transition(transform);
        width: @pane-width;
        position: relative;
        z-index: 1500;
        height: 100%;
        background-color: white;

        &.left {
            border-right: 1px solid @color-separator;
            left: -@pane-width;
            float: left;
        }

        &.right {
            border-left: 1px solid @color-separator;
            right: -@pane-width;
            float: right;
        }

        >.header {
            height: @header-height;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: @header-line-height;
            border-bottom: 1px solid @color-separator;

            >.button {
                display: inline-block;
                border: none;
                position: absolute;
                font-size: 30px;
                width: 40px;
                height: 40px;
                top: 8px;
                left: 8px;
                background-color: transparent;

                background-image: url('./img/x.svg');
                background-position: center;
                background-repeat: no-repeat;

                >.content {
                    padding: 0;
                }
            }
        }

        >.content {
            /* have to escape to do % minus px */
            height: calc(~'100% - @{header-height}');
            overflow-y: scroll;
            padding: 32px;
        }
    }
}
