.Pen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
    background: white;

    &.is-resizing {
        cursor: grabbing;

        .Pen-handle {
            cursor: grabbing;
        }
    }
}

.Pen-header {
    display: flex;
    flex: 0 0 auto;
    height: 5rem;
    padding: .75rem;
    align-items: center;

    .Status {
        @include margin-inline(start, auto);
        @include padding-inline(start, 0.5rem);
    }

    @include mq($until: navCollapse) {
        margin: 0;
        border-bottom: 1px solid $color-frame-border;
        padding: 0.75rem;

        .Status .Status-label {
            position: relative;
            height: 0;
            width: 0;
            overflow: hidden;
            background-color: #fff !important;
            border-radius: 100%;
            border-style: solid;
            border-width: 0.125rem;
            padding: 0.25rem;
            color: transparent !important;
        }
    }
}

.Frame.is-closed {
    .Pen-header {
        padding-left: 4.5rem;    
    }    
}

.Pen-title {
    @include font(subHeading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Pen-previewLink {
    @include link-default($color-heading, none);

    svg {
        fill: $color-link;
        opacity: 0.75;
    }

    &:hover svg {
        opacity: 1;
    }
}

.Pen-preview {
    flex: 0 0 auto;
    height: 50%;
    max-height: calc(100% - 3.75rem);
    margin: 0 $handle-size;

    @include mq($until: navCollapse) {
        flex: 1 1 auto;
        height: auto !important;
        max-height: 100%;
        margin: 0;
    }
}

.Pen-handle {
    @include dragHandle;
    flex: 0 0 auto;
    height: $handle-size;
    margin: 0 $handle-size;
    background: transparent url("../img/icon-drag--horizontal.svg") no-repeat 50% 50%;
    background-size: 16px 3px;
    cursor: ns-resize;

    @include mq($until: navCollapse) {
        display: none;
    }
}

.Pen-handle--browser {
    display: block;
    pointer-events: all;
    visibility: visible;
}

.Pen-info {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    margin: $handle-size;
    margin-top: 0;
    border: 1px solid $color-frame-border;

    @include mq($until: navCollapse) {
        display: none;
    }
}