// Foundation for Emails
// get.foundation/ink/
// Licensed under MIT Open Source

////
/// @group media-query
////

@media only screen and (max-width: #{$global-breakpoint}) {
  table.body img {
    width: auto;
    height: auto;
  }

  table.body center {
    min-width: 0 !important;
  }

  table.body .container {
    width: $global-width-small !important;
  }

  //If it supports border-box, why not? Am I right?
  //Also, by default pad that to the global-gutter variable
  table.body .columns,
  table.body .column {
    height: auto !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: $global-gutter-small !important;
    padding-right: $global-gutter-small !important;
  }

  // Collpased columns have no gutter.
  .collapse {
    table.body & > tbody > tr > .columns,
    table.body & > tbody > tr > .column {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  // Basic grid rules
  @for $i from 1 through $grid-column-count {
    td.small-#{$i},
    th.small-#{$i} {
      display: inline-block !important;
      width: -zf-grid-calc-pct($i, $grid-column-count) !important;
    }
  }

  //If it's the last column in column count (12 by default),
  //give it block and 100% width to knock down the wimpy columns to their own row.
  .columns td.small-#{$grid-column-count},
  .column td.small-#{$grid-column-count},
  .columns th.small-#{$grid-column-count},
  .column th.small-#{$grid-column-count} {
    display: block !important;
    width: 100% !important;
  }

  @for $i from 1 through ($grid-column-count - 1) {
    table.body td.small-offset-#{$i},
    table.body th.small-offset-#{$i} {
      //1.5 takes in effect a whole empty cell.
      margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
      Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
    }
  }

  table.body table.columns td.expander,
  table.body table.columns th.expander {
    display: none !important;
  }

  table.body .right-text-pad,
  table.body .text-pad-right {
    padding-left: $text-padding !important;
  }

  table.body .left-text-pad,
  table.body .text-pad-left {
    padding-right: $text-padding !important;
  }

  //menu
  table.menu {
    width: 100% !important;

    td,
    th {
      width: auto !important;
      display: inline-block !important;
    }

    &.vertical,
    &.small-vertical {
      td,
      th {
        display: block !important;
      }
    }
  }

  // Centers the menus!
  table.menu[align="center"] {
    width: auto !important;
  }

  // expands buttons for small only
  table.button.small-expand,
  table.button.small-expanded {
    width: 100% !important;

    table {
      width: 100%;

      a {
        text-align: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

    center {
      min-width: 0;
    }
  }

  // Small padding inside callouts
  th.callout-inner {
    padding: $callout-padding-small !important;
  }
}