@import 'variables';
@import 'functions';

@generator-width: 47rem;
@unit: get-unit(@generator-width);
@details-width: unit((floor((unit(@generator-width) / 2)) - 2 * @spacing), @unit);
@preview-width: unit(floor((unit(@generator-width) / 2)), @unit);

.generator {
    @media (min-width: @smartphone-width) {
        width: @generator-width;
        margin: 0 auto @spacing auto;
        overflow: auto;
        background-color: lighten(@gray, 5%);
        border-top: 1px solid @gray;
        border-bottom: 1px solid @gray;
    }

    .details {
        margin-bottom: @spacing;

        @media (min-width: @smartphone-width) {
            #functions > .box-sizing(border-box);
            float: left;
            width: @details-width;
            margin: @spacing;
            padding-right: @spacing;
            border-right: 1px solid @gray;
        }
    }

    .preview {
        @media (min-width: @smartphone-width) {
            float: left;
            width: @preview-width;
            margin: @spacing @spacing @spacing -1px;
        }
    }
}