@import "edge/base";
@import "edge/helpers";


.custom-grid {
  @include column(3);
}

.custom-gridx {
  @include between(mini, small) {
    @include column(4);
  }

  @include below(small) {
    @include column(5);
  }
}

[data-page="animate"] {
  .box1 {
    background: red;
    width: 50px;
    height: 50px;
  }
}

[data-page="visibility"] {

  .visibility-class,
  .visibility-mixin {
    p:nth-child(1) {
      color: $red-color;
    }
    p:nth-child(2) {
      color: $blue-color;
    }
    p:nth-child(3) {
      color: $green-color;
    }
    p:nth-child(4) {
      color: $yellow-color;
    }
    p:nth-child(5) {
      color: #333;
    }
    p:nth-child(6) {
      color: #bbb;
    }
  }

  .visibility-table {
    table:nth-child(1) td {
      color: $red-color;
    }
    table:nth-child(2) td {
      color: $blue-color;
    }
    table:nth-child(3) td {
      color: $green-color;
    }
    table:nth-child(4) td {
      color: $yellow-color;
    }
    table:nth-child(5) td {
      color: #333;
    }
    table:nth-child(6) td {
      color: #bbb;
    }
  }

  .visibility-td {
    table:nth-child(1) td {
      color: $red-color;
    }
    table:nth-child(2) td {
      color: $blue-color;
    }
    table:nth-child(3) td {
      color: $green-color;
    }
    table:nth-child(4) td {
      color: $yellow-color;
    }
    table:nth-child(5) td {
      color: #333;
    }
    table:nth-child(6) td {
      color: #bbb;
    }
    table td[class*="-for-"] {
      color: #222;
    }
  }

  .visibility-span {
    p:nth-child(1) span {
      color: $red-color;
    }
    p:nth-child(2) span {
      color: $blue-color;
    }
    p:nth-child(3) span {
      color: $green-color;
    }
    p:nth-child(4) span {
      color: $yellow-color;
    }
    p:nth-child(5) span {
      color: #333;
    }
    p:nth-child(6) span {
      color: #bbb;
    }
  }
}

.demo-grid {
  @include transition($g-transition);
  p {
    text-align : center;
    margin     : 0;
  }
  .column,
  .columns {
    p {
      margin-bottom  : em(15px);
      padding-top    : em(10px);
      padding-bottom : em(10px);
      background     : #eee;
      text-align     : center;
    }

    .column,
    .columns {
      p {
        background    : #ddd;
      }
      
      .column,
      .columns {
        p {
          background    : #ccc;
        }
      }
    }
  }
}

.demo-tile {
  p {
    background     : #eee;
    margin-bottom  : em(15px);
    padding-top    : em(10px);
    padding-bottom : em(10px);
    text-align     : center;
  }
}


/* Custom Grid */
.cgrid-1 {
  @include column($size:5);
}
.cgrid-2 {
  @include column($size:7);
}

.cgrid-a1 {
  @include column($size:5, $small:10);
}
.cgrid-a2 {
  @include column($size:7, $small:2);
}

.cgrid-b1 {
  @include column($size:10, $small:8, $mini:6);
}
.cgrid-b2 {
  @include column($size:2, $small:4, $mini:6);
}

.cgrid-c1 {
  @include column($size:6, $offset:4, $small:6);
}
.cgrid-c2 {
  @include column($size:2, $small:6);
}

.cgrid-d1 {
  @include column($size:3, $offset:6);

  @include below(small) {
    @include column($size:4, $offset:6);
  }
}
.cgrid-d2 {
  @include column($size:3, $small:4);
}

// .cgrid-e1 {
//   @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:6);
// }
// .cgrid-e2 {
//   @include column($size:3, $small:4, $mini:6);
// }

// .cgrid-f1 {
//   @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:5);
// }
// .cgrid-f2 {
//   @include column($size:3, $small:4, $mini:6);
// }

.cgrid-g1 {
  @include column($size:4, $push:8);
}
.cgrid-g2 {
  @include column($size:8, $pull:4);
}

.cgrid-h1 {
  @include column($size:8, $small:8);
}
  .cgrid-h1-1 {
    @include column($size:5, $small:5);
  }
  .cgrid-h1-2 {
    @include column($size:7, $small:7);
  }
.cgrid-h2 {
  @include column($size:4, $small:4);
}
  .cgrid-h2-1 {
    @include column($size:6, $small:6, $centered:true);
  }

.cgrid-i0 {
  @include row($gutter:50px);
}
.cgrid-i1 {
  @include column($size:6, $gutter:50px);
}
.cgrid-i2 {
  @include column($size:6, $gutter:50px);
}

/* Custom Tile */
.custom-tile1 {
  @include tile($size:7, $small:5, $gutter: 50px);
}

.custom-tile2 {
  @include tile($size:5, $small:3, $collapse:true);
}

.custom-tile3 {
  @include tile(5, 3, 2);
}

/* --------------------
  DESIGN CUSTOM GRID
-------------------- */

[data-page="design-grid"] {
  .dgrid-ar {
    @include row($gutter: 50px, $width: 500px);
  }

  .dgrid-a1 {
    @include column-px($size: 325px, $width: 500px, $gutter: 50px);
  }

  .dgrid-a2 {
    @include column-px($size: 125px, $width: 500px, $gutter: 50px);
  }
}

/* ----- FORM ----- */

[data-page="form"] {
  input, textarea, select {
    margin-bottom: 20px;
  }
}

[data-page="vr-comparison"] {
  .baseline-comparison {
    @include baseline();
  }

  .has-vr {
    @include vertical-rhythm();

    blockquote {
      @include trailer(1);
    }
  }
}



[data-page="triangle"] {
  .triangle1 {
    @include triangle($color:$main-color, $width:100px, $direction:right);
  }
}

[data-page="button"] {
  .button {
    margin-top: 20px;

    &.blue-button {
      @include button($blue-color);
    }

    &.red-button {
      @include button($red-color);
    }

    &.green-button {
      @include button($green-color);
    }

    &.yellow-button {
      @include button($yellow-color);
    }

    &.white-button {
      @include button(#f0f0f0);
    }

    &.grey-button {
      @include button(#bbb);
    }

    &.darkgrey-button {
      @include button(#777);
    }

    &.black-button {
      @include button(#333);
    }
  }
}