$baseSelector:ma-;
$appBgColor-1:#f0a749;
$appBgColor-2:#b16604;
$color:#fff;
$fontColor:#535455;
$fontContentColor:#a7a7a7;
$headerBgColor-1:#fcc79c;
$headerBgColor-2:#e98808;

$font-family: Avenir, Helvetica, Arial, sans-serif;
$column:column;

@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;
}

@for $i from 0 through 100 {
    .h-#{$i}p {
        height:percentage($i / 100);
    }
}
@for $i from 0 through 100 {
    .w-#{$i}p {
        width:percentage($i / 100);
    }
}
@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;
}
.flex-column {
    flex-direction: $column;
}
.overflow-hidden {
    overflow: hidden;
}
.text-overflow {
    text-overflow: ellipsis;
    @extend .overflow-hidden;
    white-space: nowrap;
}
.base-cup-style {
    border:4px solid #663e02;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}
.bgColor {
    background: linear-gradient(135deg,$appBgColor-1 10%,$appBgColor-2 90%);
}
.headerBgColor {
    background: linear-gradient(135deg,$headerBgColor-1 10%,$headerBgColor-2 90%);
}
.base-transition {
    transition: all .3s linear;
}