/* Copyright (C) 2016 NooBaa */

.fixed {
    position: fixed;
    height: auto;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fill {
    position: absolute;
    height: auto;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.row {
    display: flex;
    flex-direction: row;

    &.multiline {
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .push(@suffix, @space) {
        > .push-prev@{suffix} {
            margin-left: @space;
        }

        > .push-next@{suffix} {
            margin-right: @space;
        }

        > .push-both@{suffix} {
            margin-left: @space;
            margin-right: @space;
        }
    }

    .push(~'', @gutter);
    .push(-half, @gutter/2);
    .push(-quarter, @gutter/4);
}

.column {
    display: flex;
    flex-direction: column;

    .push(@suffix, @space) {
        > .push-prev@{suffix} {
            margin-top: @space;
        }

        > .push-next@{suffix} {
            margin-bottom: @space;
        }

        > .push-both@{suffix} {
            margin-top: @space;
            margin-bottom: @space;
        }
    }

    .push(~'', @gutter);
    .push(-half, @gutter/2);
    .push(-quarter, @gutter/4);
}

.column, .row {
    .wireframe & > * {
        outline: 1px solid red;
        outline-offset: -1px;

        &:hover {
            outline: 2px solid rgb(0, 255, 255);
            outline-offset: -2px;
        }
    }
}

.define-c(@i) when (@i > 0) {
    @val: 100% / 12 * @i;

    .row > .c@{i} {
        flex-basis: @val;
        width: @val;
    }

    .column > .c@{i} {
        flex-basis: @val;
        height: @val;
    }

    .define-c(@i - 1);
}

.define-c(12);

.greedy {
    flex-basis: 0;
    flex-grow: 999;
}

.bounded {
    width: 100%;
    max-width: @content-max-width;
    padding: 0 @gutter;
    align-self: center;
}

.align-start {
    align-self: flex-start;
}

.align-end {
    align-self: flex-end;
}

.align-middle {
    align-self: center;
}

.align-stretch {
    align-self: stretch;
}

.content-start {
    align-items: flex-start;
}

.content-middle {
    align-items: center;
}

.content-end {
    align-items: flex-end;
}

.content-stretch {
    align-items: stretch;
}
