@main-width: @page-width - @page-margin-inside - @page-margin-outside;
@main-height: @page-height - @page-margin-top - @page-margin-bottom;

@col-width: (@main-width - ((@col-number - 1) * @col-gutter)) / @col-number;
@row-height: (@main-height - ((@row-number - 1) * @row-gutter)) / @row-number;

@col-gutter-width: @col-width + @col-gutter;
@row-gutter-height: @row-height + @row-gutter;


/* x classes */
.create-x-classes(@i:0) when(@i < @col-number) {
    .x@{i}{
       left: (@i * @col-width) + (@i * @col-gutter);
    }
    .create-x-classes(@i + 1);
}
.create-x-classes();

/* y classes */
.create-y-classes(@i:0) when(@i < @row-number) {
    .y@{i}{
       top: (@i * @row-height) + (@i * @row-gutter);
    }
    .create-y-classes(@i + 1);
}
.create-y-classes();

/* width classes */
.create-w-classes(@i:1) when(@i <= @col-number) {
    .w@{i}{
       width: (@col-width * @i) + (@col-gutter * (@i - 1));
    }
    .create-w-classes(@i + 1);
}
.create-w-classes();

/* height classes */
.create-h-classes(@i:1) when(@i <= @row-number) {
    .h@{i}{
       height: (@row-height * @i) + (@row-gutter * (@i - 1));
    }
    .create-h-classes(@i + 1);
}
.create-h-classes();


.create-grid-classes(@prop: left, @class-name: x, @max-size: 100, @i: 0, @offset: 0, @odd: true) when (@offset <= @max-size) {
    .@{class-name}@{i} {
       @{prop}: @offset;
    };

    & when (@odd) {
        .create-grid-classes(@prop, @class-name, @max-size, @i + 1, @offset + @col-width, false) 
    };

    & when not (@odd) {
        .create-grid-classes(@prop, @class-name, @max-size, @i + 1, @offset + @col-gutter, true)
    };
}

html:not(.facing) .sheet:nth-child(odd) .l-1,
html.facing .sheet:nth-child(even) .l-1 { left: -( @page-margin-inside + 14pt); }

html:not(.facing) .sheet:nth-child(even) .l-1,
html.facing .sheet:nth-child(odd) .l-1 { left: -( @page-margin-outside + 14pt); }

.create-grid-classes(left, l, @main-width);

html:not(.facing) .sheet:nth-child(odd) .r-1,
html.facing .sheet:nth-child(even) .r-1 { right: -( @page-margin-outside + 14pt); }

html:not(.facing) .sheet:nth-child(even) .r-1,
html.facing .sheet:nth-child(odd) .r-1 { right: -( @page-margin-inside + 14pt); }

.create-grid-classes(right, r, @main-width);

.t-1 { top: -( @page-margin-top + 14pt); }
.create-grid-classes(top, t, @main-height);
.b-1 { bottom: -( @page-margin-bottom + 14pt); }
.create-grid-classes(bottom, b, @main-height);


.grid .main {
    outline: 1px solid @grid-color;
    background-attachment: local;
    background-size: 100% @row-gutter-height, 
                     @col-gutter-width 100%, 
                     100% @row-gutter-height, 
                     @col-gutter-width 100%,
                     100% 12pt;
    background-position: -1px -1px, 
                         -1px -1px, 
                         -(@col-gutter + 0) -(@row-gutter + 0), 
                         -(@col-gutter + 0) -(@row-gutter + 0),
                         0 -1px;
    background-image: -webkit-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -webkit-linear-gradient(left, @grid-color 1px, transparent 1px),
                      -webkit-linear-gradient(top, @grid-color 1px, transparent 1px),
                      -webkit-linear-gradient(left, @grid-color 1px, transparent 1px),
                      -webkit-linear-gradient(top, @baseline-grid-color 1px, transparent 1px);
    background-image:    -moz-linear-gradient(top, @grid-color 1px, transparent 1px),
                         -moz-linear-gradient(left, @grid-color 1px, transparent 1px),
                         -moz-linear-gradient(top, @grid-color 1px, transparent 1px),
                         -moz-linear-gradient(left, @grid-color 1px, transparent 1px),
                         -moz-linear-gradient(top, @baseline-grid-color 1px, transparent 1px);
    background-image:     -ms-linear-gradient(top, @grid-color 1px, transparent 1px),
                          -ms-linear-gradient(left, @grid-color 1px, transparent 1px),
                          -ms-linear-gradient(top, @grid-color 1px, transparent 1px),
                          -ms-linear-gradient(left, @grid-color 1px, transparent 1px),
                          -ms-linear-gradient(top, @baseline-grid-color 1px, transparent 1px);
    background-image:      -o-linear-gradient(top, @grid-color 1px, transparent 1px),
                           -o-linear-gradient(left, @grid-color 1px, transparent 1px),
                           -o-linear-gradient(top, @grid-color 1px, transparent 1px),
                           -o-linear-gradient(left, @grid-color 1px, transparent 1px),
                           -o-linear-gradient(top, @baseline-grid-color 1px, transparent 1px);
    background-image: linear-gradient(to bottom, @grid-color 1px, transparent 1px),
                      linear-gradient(to right, @grid-color 1px, transparent 1px),
                      linear-gradient(to bottom, @grid-color 1px, transparent 1px),
                      linear-gradient(to right, @grid-color 1px, transparent 1px),
                      linear-gradient(to bottom, @baseline-grid-color 1px, transparent 1px);
}