@import './theme.scss';
/* Separate CSS file, but same part as Layout */

/* The base container that is similar in structure to a card but more flexible */
.frame {
    border-radius: 3px;
    box-shadow: 0 0.2rem 1.25rem 0 rgba(27, 30, 36, 0.07);
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;

    /* For the frame header and footer, use flex display */
    .frame__header,
    .frame__footer {
        flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        padding: 1rem;
    }

    /* The frame navbar can be used with level or header classes to create a navigation menu */
    .frame__nav {
        flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
    }

    .frame__body {
        flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        overflow-y: auto; /* Show the scrollbar when needed */
        padding: 0 1rem;
    }

    .frame__title {
        color: $cirrus-fg;
        font-size: $font-size-m;
        margin: 0.75rem auto 0;
    }

    .frame__subtitle {
        color: transparentize($cirrus-fg, 0.4);
        font-size: $font-size-m;
        margin: 0 auto 0.75rem;
    }
}