@import "../src/short-sass";
@import "lama.css";

// Import normalize and resetter.
@include normalize;
@include reset;

// Lets start with font-face generator. Really simple!
@include font-faces('arial' 'assets/fonts/arial', regular bold italic);

// Forget about regular things.
body {
    // With this one:
    @include font-smoothing;

    // You don't need to write:
    speak: none;
    font-variant: normal;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// A lot of use display, width and height? Try this.
.simple-box {
    // With this one:
    @include block(100% 500px);

    // You don't need to write:
    display: block;
    width: 100%;
    height: 500px;
}

// What about positioning? Try this.
.simple-position {
    // With this one:
    @include absolute-middle-center;

    // You don't need to write
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -mz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

// More hard things? Let's try!
.complex-gradient {
    // With these simple breath, the possibility to combine values:
    @include linear-gradient((-90deg, #fff, #ff8), true);   // Append values.
    @include linear-gradient((-90deg, #dff, #3d8), true);
    @include radial-gradient((center, #ae9, #d38), true);
    @include linear-gradient((-90deg, #73d, #f83), true);
    @include radial-gradient((center, #dd9, #88d), true);
    @include radial-gradient((center, #a9f, #ff1), true);
    @include linear-gradient((-90deg, #99d, #1f0));         // Write the styles!

    // You're freem from these things :P
    background-image: -webkit-linear-gradient(-90deg, #fff, #ff8), -webkit-linear-gradient(-90deg, #dff, #3d8), -webkit-radial-gradient(center, #ae9, #d38), -webkit-linear-gradient(-90deg, #73d, #f83), -webkit-radial-gradient(center, #dd9, #88d), -webkit-radial-gradient(center, #a9f, #ff1), -webkit-linear-gradient(-90deg, #99d, #1f0);
    background-image: -moz-linear-gradient(-90deg, #fff, #ff8), -moz-linear-gradient(-90deg, #dff, #3d8), -moz-radial-gradient(center, #ae9, #d38), -moz-linear-gradient(-90deg, #73d, #f83), -moz-radial-gradient(center, #dd9, #88d), -moz-radial-gradient(center, #a9f, #ff1), -moz-linear-gradient(-90deg, #99d, #1f0);
    background-image: -ms-linear-gradient(-90deg, #fff, #ff8), -ms-linear-gradient(-90deg, #dff, #3d8), -ms-radial-gradient(center, #ae9, #d38), -ms-linear-gradient(-90deg, #73d, #f83), -ms-radial-gradient(center, #dd9, #88d), -ms-radial-gradient(center, #a9f, #ff1), -ms-linear-gradient(-90deg, #99d, #1f0);
    background-image: -o-linear-gradient(-90deg, #fff, #ff8), -o-linear-gradient(-90deg, #dff, #3d8), -o-radial-gradient(center, #ae9, #d38), -o-linear-gradient(-90deg, #73d, #f83), -o-radial-gradient(center, #dd9, #88d), -o-radial-gradient(center, #a9f, #ff1), -o-linear-gradient(-90deg, #99d, #1f0);
}

// Or want to be free at anywhere?
.simple-box {
    // It's default media
    @include inline-block(320px 240px);

    // Let's drive to mobile
    @include mobile-portrait {
        @include block(100% auto);
    }
}

.flex-test {
    @include flex(1% 1% 100%);
}

.container {
    @include container(960px 10px 10px);
}

.flex-grid {
    @include grid(960 12 10);

    .column {
        @include grid-col(3 start center);

        background-color: #ccc;
    }

    &[column="4"] {
        .column {
            @include grid-col(3 start center);
        }
    }
}

.flex-grid2 {
    @include flex-box(space-between stretch);
    @include flex-wrap;

    .column {
        @include flex-basis(25%);
        @include flex-shrink(1);

        margin-left: 10px;
        margin-bottom: 10px;
        background-color: #ccc;
    }
}

.grid-test {
    @include grid(960 12 20);

    .column {
        @include grid-col(3 start center);
    }
}

.flex-test {
    @include flex-box-row(start stretch);

    .column {
        @include flex;

        background-color: #ddd;
    }
}
$testing: appearance;
.head-typo {
    @include important {
        @include appearance(initial);
        @include block(100% none);
    }
    @include font('proximanova-regular' 14px 24px #555 600);
}

.wrapper {
    @include touch-scroll;
}
.wrapper-x {
    @include touch-scroll-x;
}
.wrapper-y {
    @include touch-scroll-y;
}

.input-text {
    @include important {
        @include appearance(initial);
    }

    @include block(100% none);

    margin: 0;
}


.simple-grid {
    @include grid-box(1080 12 30);

    li {
        @include grid-box-col(4);

        @include tablet {
            @include grid-box-col(6);
        }

        @include mobile {
            @include grid-box-col(12);
        }
    }
}

.gradient {
    @include linear-gradient((-90deg, rgba(#fff, 0.2), rgba(#000, 0.2)), true);
    @include linear-gradient((-90deg, rgba(#dff, 0.2), rgba(#9df, 0.2)), true);
    @include linear-gradient((-90deg, rgba(#566, 0.2), rgba(#88d, 0.2)));
}

.simple-boxes {
    @include important {
        @include block(100% 320px);
        @include grid-box(1080 12 30);

        li {
            @include grid-box-col(4);

            @include tablet {
                @include grid-box-col(6);
            }

            @include mobile {
                @include grid-box-col(12);
            }
        }
    }

    @include font("proximanova-regular" 16px 37px #999);
}