@import './vars.scss';
@import './mixins.scss';

// # layout
// main layout

body {
  -webkit-font-smoothing: antialiased;
}

body,
html {
  height: 100%;
}
#root {
  height: 100%;
}

hr {
  margin: 0;

  &.devider {
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

pre {
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

* {
  box-sizing: border-box;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

a {
  color: $color-brand-main-light;
  text-decoration: none;
  transition: all 0.2s ease-in-out;

  &:hover {
    color: darken($color-brand-main-light, 10%);
  }
}

:focus {
  outline-width: 0;
}

.iconfont {
  font-size: inherit;
  -webkit-text-stroke-width: 0;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.fx-bt {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-align-center {
  display: flex;
  align-items: center;
}

.fx-align-center-ver {
  display: flex;
  align-items: center;
  flex-direction: column;
}

// 尺寸
// ## margin ##
// m-
@for $i from 1 through 24 {
  .m-#{$i * 5} {
    margin: 5px * $i;
  }
}
// mt-
@for $i from 1 through 24 {
  .mt-#{$i * 5} {
    margin-top: 5px * $i;
  }
}
// mr-
@for $i from 1 through 24 {
  .mr-#{$i * 5} {
    margin-right: 5px * $i;
  }
}
// mb-
@for $i from 1 through 24 {
  .mb-#{$i * 5} {
    margin-bottom: 5px * $i;
  }
}
// ml-
@for $i from 1 through 24 {
  .ml-#{$i * 5} {
    margin-left: 5px * $i;
  }
}

// ## padding ##
// p-
@for $i from 1 through 24 {
  .p-#{$i * 5} {
    padding: 5px * $i;
  }
}
// pt-
@for $i from 1 through 24 {
  .pt-#{$i * 5} {
    padding-top: 5px * $i;
  }
}
// pr-
@for $i from 1 through 24 {
  .pr-#{$i * 5} {
    padding-right: 5px * $i;
  }
}
// pb-
@for $i from 1 through 24 {
  .pb-#{$i * 5} {
    padding-bottom: 5px * $i;
  }
}
// pl-
@for $i from 1 through 24 {
  .pl-#{$i * 5} {
    padding-left: 5px * $i;
  }
}