space($num = 1) {
  $base.space * $num;
}

font($size = 'base') {
  $map = {
    xs: 0.75rem,
    sm: 0.875rem,
    base: 1rem,
    lg: 1.125rem,
    xl: 1.25rem,
    xxl: 1.5rem,
    xxxl: 2rem
  };
  $val = $map[$size];
  font-size: $val;
  line-height: $val + 0.5rem;
}

rounded($num = 1) {
  border-radius: $base.radius * $num;
}

duration($num = 1) {
  $base.duration * $num;
}

flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

square($size) {
  width: $size;
  height: $size;
}

text-elip($row) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: $row;
  -webkit-box-orient: vertical;
}

circle($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
}

between($a = 0px, $b = 9999px) {
  @media (min-width: $a) and (max-width: $b) {
    {block};
  }
}

mobile() {
  +between(0px, $appWidth) {
    {block};
  }
}

scroll-bar($size = 6px) {
  &::-webkit-scrollbar {
    display: block;
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.5);
  }
}