//
// This file will be placed in the head of the document and will not be inlined
//
@import 'scss/functions';
@import 'scss/colors';
@import 'scss/variables';
@import 'scss/utilities';
@import 'scss/selectors_for_utils';
@import 'scss/helper_groups';

// Force base font in Outlook
body, table, td {
  font-family: $font-family-base !important;
}

// Forces Outlook.com to display emails at full width
.ExternalClass {
  width: 100%;
}

// Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 150%;
}

// Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inlined
a {
  text-decoration: none;
}

// Inherit text color so color can be set on the body and inherited by children
* {
  color: inherit;
}

// Fix link colors set on automatic detection such as email addresses and phone numbers
a[x-apple-data-detectors],
u + #body a,
#MessageViewBody a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

// Use a better rendering method when resizing images in Outlook IE.
img {
  -ms-interpolation-mode: bicubic;
}

// Prevent Outlook from adding extra spacing to tables.
table:not([class^=s-]) {
  font-family: $font-family-base;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  border-spacing: 0px;
  border-collapse: collapse;
  td {
    border-spacing: 0px;
    border-collapse: collapse;
  }
}

/*! allow_purge_after */

@media screen and (max-width: 600px) {
  // Row Gap
  @each $space, $value in $spacers {
    .gap-#{$space}.row,
    .gap-x-#{$space}.row {
      margin-right: -1 * $value !important;
      & > table > tbody > tr > td {
        padding-right: $value !important;
      }
    }
    .gap-#{$space}.row,
    .gap-y-#{$space}.row {
      margin-bottom: -1 * $value !important;
      & > table > tbody > tr > td {
        padding-bottom: $value !important;
      }
    }
  }
  .row-responsive.row {
    margin-right: 0 !important;
  }

  // Stack Gap
  @each $space, $value in $spacers {
    table.gap-lg-#{$space}.stack-x > tbody > tr > td {
      padding-right: 0 !important;
    }
    table.gap-lg-#{$space}.stack-y > tbody > tr > td {
      padding-bottom: 0 !important;
    }
  }
  @each $space, $value in $spacers {
    table.gap-#{$space}.stack-x > tbody > tr > td {
      padding-right: $value !important;
    }
    table.gap-#{$space}.stack-y > tbody > tr > td {
      padding-bottom: $value !important;
    }
  }

  //  Grid
  @each $key, $value in $grid-cols {
    td.col-lg-#{$key} {
      display: block;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  td.col-lg {
    display: block;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  // Display
  @each $display in $display-type {
    .d-lg-#{$display} {
      display: unset !important;
    }
  }
  @each $display in $display-type {
    .d-#{$display} {
      display: $display !important;
    }
  }

  // Sizing Max Width / Height
  @each $name, $property in $sizing-types {
    @include sizing-util('.max-#{$name}-lg-full') {
      max-#{$property}: unset !important;
      #{$property}: auto !important;
    }
    @each $size, $value in $sizing {
      @include sizing-util('.max-#{$name}-lg-#{$size}') {
        max-#{$property}: unset !important;
        #{$property}: auto !important;
      }
    }
  }
  @each $name, $property in $sizing-types {
    @include sizing-util('.max-#{$name}-full') {
      max-#{$property}: 100% !important;
      #{$property}: 100% !important;
    }
    @each $size, $value in $sizing {
      @include sizing-util('.max-#{$name}-#{$size}') {
        max-#{$property}: $value !important;
        #{$property}: 100% !important;
      }
    }
  }

  // Sizing Width / Height
  @each $name, $property in $sizing-types {
    @include sizing-util('.#{$name}-lg-full') {
      #{$property}: auto !important;
    }
    @include sizing-util('.#{$name}-lg-auto') {
      #{$property}: auto !important;
    }
    @each $size, $value in $sizing {
      @include sizing-util('.#{$name}-lg-#{$size}') {
        #{$property}: auto !important;
      }
    }
  }
  @each $name, $property in $sizing-types {
    @include sizing-util('.#{$name}-full') {
      #{$property}: 100% !important;
    }
    @include sizing-util('.#{$name}-auto') {
      #{$property}: auto !important;
    }
    @each $size, $value in $sizing {
      @include sizing-util('.#{$name}-#{$size}') {
        #{$property}: $value !important;
      }
    }
  }

  // Spacing
  // Reset large padding to 0 on small device
  @each $size, $value in $spacers {
    @include padding-group('lg-', $size, unquote('0 !important'));
  }

  // Set proper padding on small devices
  @each $size, $value in $spacers {
    @include padding-group('', $size, unquote('#{$value} !important'));
  }

  // Spacers
  @include spacer-util('*[class*=s-lg-]') {
    font-size: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
  }
  @each $size, $value in $spacers {
    @include spacer-util('.s-#{$size}') {
      font-size: $value !important;
      line-height: $value !important;
      height: $value !important;
    }
  }
}