@import './default';
@import './reset';

html {
  // PX does't parse by 'postcss-pxtorem'. But the browser is not case sensitive, so it works fine.
  // Set `50` As the basis for rem initially. So it can work properly in the 1x screen of Android device.
  font-size: 50PX;
}

.ui-onepx-border(@borderColor: #ddd) {
  position: relative;
     &::after {
      position: absolute;
      left: 0;
      bottom: -2px;
      display: block;
      content: " ";
      width: 100%;
      transform-origin: 0 0;
      transform: scaleY(0.5);
      border-style: solid;
      border-color: @borderColor;
    }
}

.ui-onepx-border-top {
  .ui-onepx-border();
  &::after {
    border-top-width: 1px;
  }
}

.ui-onepx-border-bottom {
  .ui-onepx-border();
  &::after {
    border-bottom-width: 1px;
  }
}

.ui-onepx-border-left {
  .ui-onepx-border();
  &::after {
    border-left-width: 1px;
  }
}

.ui-onepx-border-right {
  .ui-onepx-border();
  &::after {
    border-right-width: 1px;
  }
}