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

////
/// @group button
////

// /// Padding inside buttons at various sizes.
// /// @type Map
// $button-padding: (
//   tiny: 4px 8px 4px 8px,
//   small: 5px 10px 5px 10px,
//   default: 8px 16px 8px 16px,
//   large: 10px 20px 10px 20px,
// ) !default;

// /// Font sizes of buttons at various sizes.
// /// @type Map
// $button-font-size: (
//   tiny: 10px,
//   small: 12px,
//   default: 16px,
//   large: 20px,
// ) !default;

// /// Text color of buttons.
// /// @type Color
// $button-color: $white !default;

// /// Text color of buttons with a light background.
// /// @type Color
// $button-color-alt: $medium-gray !default;

// /// Font weight of buttons.
// /// @type Weight
// $button-font-weight: bold !default;

// /// Margin around buttons.
// /// @type List
// $button-margin: 0 0 $global-margin 0 !default;

// /// Background color of buttons.
// /// @type Color
// $button-background: $primary-color !default;

// /// Border around buttons.
// /// @type Border
// $button-border: 2px solid $button-background !default;

// /// Border radius of buttons. Not supported by all email clients.
// /// @type Number
// $button-radius: $global-radius !default;

// /// Border radius of rounded buttons. Not supported by all email clients.
// /// @type Number
// $button-rounded: $global-rounded !default;

table.button {
  // width: auto;
  // margin: $button-margin;
  // Margin: $button-margin;

  table {

    td {
      // text-align: left;
      // color: $button-color;
      line-height: 1.2;
      // background: $button-background;
      // border: $button-border;

      a {
        // font-family: $body-font-family;
        // font-size: map-get($button-font-size, default);
        // font-weight: $button-font-weight;
        line-height: 1.2;
        // color: $button-color;
        // text-decoration: none;
        // text-align: left;
        // display: inline-block;
        // padding: map-get($button-padding, default);
        // border: 0 solid $button-background;
        // border-radius: $button-radius;
      }
    }
  }

  // &.radius table td {
  //   border-radius: $button-radius;
  //   border: none;
  // }

  // &.rounded table td {
  //   border-radius: $button-rounded;
  //   border: none;
  // }
}

// table.button:hover table tr td a,
// table.button:active table tr td a,
// table.button table tr td a:visited,
// table.button.tiny:hover table tr td a,
// table.button.tiny:active table tr td a,
// table.button.tiny table tr td a:visited,
// table.button.small:hover table tr td a,
// table.button.small:active table tr td a,
// table.button.small table tr td a:visited,
// table.button.large:hover table tr td a,
// table.button.large:active table tr td a,
// table.button.large table tr td a:visited {
//   color: $button-color;
// }

table.button {
  table {
    td,
    a {
      padding: map-get($button-padding, default);
      font-size: map-get($button-font-size, default);
    }
  }
}

table.button.tiny {
  table {
    td,
    a {
      padding: map-get($button-padding, tiny);
      font-size: map-get($button-font-size, tiny);
    }
  }
}

table.button.small {
  table {
    td,
    a {
      padding: map-get($button-padding, small);
      font-size: map-get($button-font-size, small);
    }
  }
}

table.button.large {
  table {
    td,
    a {
      padding: map-get($button-padding, large);
      font-size: map-get($button-font-size, large);
    }
  }
}

table.button.inverse {
  table {
    td {
      background: transparent;
      color: $white;
      border: 1px solid $white;
    }
    a {
      color: $white;
      // border: 0 solid $secondary-color;
    }
  }
}

// table.button.expand,
// table.button.expanded {
//   width: 100%;

//   table {
//     width: 100%;

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

//   center {
//     min-width: 0;
//   }
// }

table.button:hover,
table.button:visited,
table.button:active {
  table {
    td {
      background: lighten($button-background, 5%);
      color: $button-color;
    }
  }
}

table.button:hover,
table.button:visited,
table.button:active {
  table {
    a {
      border: 0 solid lighten($button-background, 5%);
    }
  }
}

// table.button.secondary {
//   table {
//     td {
//       background: $secondary-color;
//       color: $button-color;
//       border: 0px solid $secondary-color;
//     }

//     a {
//       color: $button-color;
//       border: 0 solid $secondary-color;
//     }
//   }
// }

// table.button.secondary:hover {
//   table {
//     td {
//       background: lighten($secondary-color, 10%);
//       color: $button-color;
//     }

//     a {
//       border: 0 solid lighten($secondary-color, 10%);
//     }
//   }
// }

// table.button.secondary:hover {
//   table {
//     td a {
//       color: $button-color;
//     }
//   }
// }

// table.button.secondary:active {
//   table {
//     td a {
//       color: $button-color;
//     }
//   }
// }

// table.button.secondary {
//   table {
//     td a:visited {
//       color: $button-color;
//     }
//   }
// }

// table.button.success {
//   table {
//     td {
//       background: $success-color;
//       border: 0px solid $success-color;
//     }

//     a {
//       border: 0 solid $success-color;
//     }
//   }
// }

table.button.success:hover {
  table {
    td {
      background: lighten($success-color, 5%);
    }

    a {
      border: 0 solid lighten($success-color, 5%);
    }
  }
}

// table.button.alert {
//   table {
//     td {
//       background: $alert-color;
//       border: 0px solid $alert-color;
//     }

//     a {
//       border: 0 solid $alert-color;
//     }
//   }
// }

table.button.alert:hover {
  table {
    td {
      background: lighten($alert-color, 5%);
    }

    a {
      border: 0 solid lighten($alert-color, 5%);
    }
  }
}

// table.button.warning {
//   table {
//     td {
//       background: $warning-color;
//       border: 0px solid $warning-color;
//     }

//     a {
//       border: 0px solid $warning-color;
//     }
//   }
// }

table.button.warning:hover {
  table {
    td {
      background: lighten($warning-color, 5%);
    }

    a {
      border: 0px solid lighten($warning-color, 5%);
    }
  }
}

// Fix for Outlook Expanded Button
// Reference: https://github.com/zurb/foundation-emails/issues/415
.button {
  &.expand, &.expanded {
    td:not(.expander) {
      width: 100% !important;
    }
  }
}