*,
*:before,
*:after {
  box-sizing: border-box;
}

// 1. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom.
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%; // 1
}

body {
  @include font-size ($font-size-base-enum);
  font-family: $tui-font-type, #{$font-fallback};
  line-height: $line-height-base;
  color: $color-blue-500;
  background-color: $color-beige-100;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

// Correct `block` display not defined for `details` or `summary` in IE 10/11
// and Firefox.
// Correct `block` display not defined for `main` in IE 11.
details,
main,
header,
summary {
  display: block;
}

a {
  color: $link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: underline;
  }

  &:active,
  &:hover {
    outline: 0;
  }
}

// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
abbr[title] {
  border-bottom: 1px dotted;
}

// Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

.clearfix {
  @include clearfix;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

/* stylelint-disable declaration-no-important */
.hide,
.hidden {
  display: none !important;
}
/* stylelint-enable */

.flex-container,
.flexbox-row {
  @extend %flexbox-row;
}

header {
  &.flex-container {
    align-items: baseline;
  }
}

.flexbox-column {
  @extend %flexbox-column;
}

.flex-column-row {
  @extend %flexbox-column;

  @include breakpoint(sm) {
    flex-direction: row;
  }
}