/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
/// @type Boolean
$body-antialiased: true !default;
// "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
$body-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB',
  '微软雅黑', Arial, sans-serif !default;
$global-weight-normal: 400 !default;
$global-line-height: 18px !default;
$global-font-color: #333 !default;
$global-font-size: 14px !default;
$global-width: 1180px !default;
$global-radius: 4px !default;
$global-text-direction: ltr !default;
$body-background: #fff !default;
$body-font-color: $global-font-color !default;
$shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

/// Global value used for margin on components.
/// @type Number
$global-margin: 1rem !default;
/// Global font weight used for bold type.
/// @type Keyword | Number
$global-weight-bold: bold !default;
$global-left: if($global-text-direction == rtl, right, left);
@mixin global-styles {
  @include -ne-normalize;

  html {
    box-sizing: border-box;
    font-size: $global-font-size;
  }

  // Set box-sizing globally to handle padding and border widths
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  // Default body styles
  body {
    margin: 0;
    padding: 0;
    background: $body-background;
    color: $body-font-color;
    font-family: $body-font-family;
    font-weight: $global-weight-normal;
    line-height: 1.3;

    @if ($body-antialiased) {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  img {
    // Get rid of gap under images by making them display: inline-block; by default
    display: inline-block;
    // Grid defaults to get images and embeds to work properly
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
  }

  // Make sure textarea takes on height automatically
  textarea {
    height: auto;
    min-height: 50px;
    border-radius: $global-radius;
  }

  // Make select elements are 100% width by default
  select {
    width: 100%;
    border-radius: $global-radius;
  }

  // Reset <button> styles created by most browsers
  button {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0;
    border: 0;
    border-radius: $global-radius;
    background: transparent;
  }

  ul {
    list-style: none;
  }

  // Internal classes to show/hide elements in JavaScript
  .is-visible {
    display: block !important;
  }

  .is-hidden {
    display: none !important;
  }

  .box-trigger {
    cursor: pointer;
  }

  .inline-block {
    display: inline-block;
  }
}