// Foundation for Emails by ZURB // zurb.com/ink/ // Licensed under MIT Open Source

//// /// @group grid ////

/// Default number of columns for an email. /// @type Number $grid-column-count: 12 !default;

/// Default padding for the bottom of a column. /// @type Number $column-padding-bottom: $global-padding !default;

/// Default border radius for the container. Use a px value /// @type Number $container-radius: 0 !default;

//For viewing email in browser @media only screen {

html {
  min-height: 100%;
  background: $body-background;
}

}

table {

&.body {
  background: $body-background;
  height: 100%;
  width: 100%;
}

&.container {
  background: $container-background;
  width: $global-width;
  margin: 0 auto;
  Margin: 0 auto;
  text-align: inherit;
}

&.row {
  padding: 0;
  width: 100%;
  position: relative;
}

&.spacer {
  width: 100%;
  td {
    mso-line-height-rule: exactly;
  }
}

}

table.container table.row {

display: table;

}

td.columns, td.column, th.columns, th.column {

margin: 0 auto;
Margin: 0 auto;
padding-left: $global-gutter;
padding-bottom: $column-padding-bottom;

// Prevents Nested columns from double the padding
.column,
.columns {
  padding-left: 0 !important;
  padding-right: 0 !important;

  center {
    min-width: none !important;
  }
}

}

td.columns.last, td.column.last, th.columns.last, th.column.last {

padding-right: $global-gutter;

}

//makes sure nested tables are 100% width td.columns, td.column, th.columns, th.column {

table {
  width: 100%;

  &.button {
    width:auto;

    &.expanded{
      width: 100%;
    }
  }
}

}

@for $i from 1 through $grid-column-count {

td.large-#{$i},
th.large-#{$i} {
  width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
  padding-left: $global-gutter / 2;
  padding-right: $global-gutter / 2;
}

td.large-#{$i}.first,
th.large-#{$i}.first {
  padding-left: $global-gutter;
}

td.large-#{$i}.last,
th.large-#{$i}.last {
  padding-right: $global-gutter;
}

//Collapsed logic
.collapse {
  > tbody > tr > td.large-#{$i},
  > tbody > tr > th.large-#{$i} {
    padding-right: 0;
    padding-left: 0;
    width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
  }

  //Gotta give it that extra love for the first and last columns.
  td.large-#{$i}.first,
  th.large-#{$i}.first,
  td.large-#{$i}.last,
  th.large-#{$i}.last {
    width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
  }
}

td.large-#{$i} center,
th.large-#{$i} center {
  min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
}

.body .columns td.large-#{$i},
.body .column td.large-#{$i},
.body .columns th.large-#{$i},
.body .column th.large-#{$i} {
  width: -zf-grid-calc-pct($i, $grid-column-count);
}

}

@for $i from 1 through ($grid-column-count - 1) {

td.large-offset-#{$i},
td.large-offset-#{$i}.first,
td.large-offset-#{$i}.last,
th.large-offset-#{$i},
th.large-offset-#{$i}.first,
th.large-offset-#{$i}.last {
  //1.5 takes in effect a whole empty cell.
  padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
}

}

td.expander, th.expander {

visibility: hidden;
width: 0;
padding: 0 !important;

}

// adds radius to container table.container.radius {

border-radius: $container-radius;
border-collapse: separate;

}