// Foundation for Emails
// get.foundation/ink/
// Licensed under MIT Open Source
@use "sass:math";

////
/// @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.first,
  .columns.first {
    padding-left: 0 !important;
  }

  .column.last,
  .columns.last {
    padding-right: 0 !important;
  }

  .column,
  .columns {
    &:not([class*=large-offset]) {
      padding-left: 0 !important;
      padding-right: 0 !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;

      &.expand,
      &.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: math.div($global-gutter, 2);
    padding-right: math.div($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},
    > th.large-#{$i} {
      &:not([class*=large-offset]) {
        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);
    }
  }

  .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;
}