$baseSelector:tc-;
$black:#000000;
$white:#ffffff;
$lightColor:#f2f3f4;
$darkColor:#232425;
$font-family: Avenir, Helvetica, Arial, sans-serif;
$column:column;
$display:("block":block,"flex":flex,"none":none,"inline-block":inline-block);
$position:("r":relative,"a":absolute,"f":fixed);

@function setMargin($i,$j,$unit){
    $result:0;
    @for $_ from $i through $j {
      @if $unit {
        $result:$_ + $unit;
      } @else {
        $result:$_;
      }
    }
    @return $result;
}
@function setPadding($i,$j,$unit){
    $result:0;
    @for $_ from $i through $j {
      @if $unit {
        $result:$_ + $unit;
      } @else {
        $result:$_;
      }
    }
    @return $result;
}
@mixin m($dir,$number,$unit) {
    $prop:margin;
    @if($dir){
        $prop:$prop + $dir;
    }
    @if $unit {
        #{$prop}:setMargin(0,$number,$unit);
    }@else {
        #{$prop}:setMargin(0,$number,null);
    }
}
@mixin p($dir,$number,$unit) {
    $prop:padding;
    @if($dir){
        $prop:$prop + $dir;
    }
    @if $unit {
        #{$prop}:setPadding(0,$number,$unit);
    }@else {
        #{$prop}:setPadding(0,$number,null);
    }
}
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin flex-space {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@mixin flex-100p {
    width: percentage(1);
    display: flex;
}
@mixin reset {
    @include p(null,0,null);
    @include m(null,0,null);
}
.flex-column {
    flex-direction: $column;
}
.overflow-hidden {
    overflow: hidden;
}
.base-transition {
    transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.light-style {
    background-color: $lightColor;
    color:$darkColor;
}
.dark-style {
    background-color: $darkColor;
    color:$lightColor;
}