@use "sass:math";
@use "sass:map";
@use "sass:list";

$baseSelector:da-;

$white:#ffffff;
$black:#000000;
$boardBorderColor:#2396ef;
$transparent:transparent;

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

$percent-1:percentage(.1);
$percent-9:percentage(math.pow(0.3,2));
$containerWidth:math.pow(2,3) * math.pow(10,2) + px;

$display:block,flex,inline-block,inline,inline-flex,none;
$align:center,left,right;
$position:relative,absolute,fixed;
$vertical:middle,text-top,text-bottom;
$direction:("t":-top,"b":-bottom,"l":-left,"r":-right);
@function handleStyleByUnit($number:0,$unit:px){
    $result:0;
    @if $unit {
        $result:$number + $unit;
    }@else {
        $result:$number;
    }
    @return $result;
}

@mixin m($prop,$number:0,$unit:null) {
    $property:margin;
    @if $prop {
        $property:$property + map-get($direction, $prop);
    }
    #{$property}:handleStyleByUnit($number,$unit);
}
@mixin p($prop,$number:0,$unit:null) {
    $property:padding;
    @if $prop {
        $property:$property + map.get($direction, $prop);
    }
    #{$property}:handleStyleByUnit($number,$unit);
}
@for $i from 0 to 101 {
    .w-#{$i}-p {
        width: percentage(math.div($i,100));
    }
    .w-#{$i}-px {
        width: handleStyleByUnit($i);
    }
    .w-#{$i}-vw {
        width: handleStyleByUnit($i,vw);
    }
    .w-#{$i}-rem {
        width: handleStyleByUnit($i,rem);
    }
    .h-#{$i}-p {
        height: percentage(math.div($i,100));
    }
    .h-#{$i}-px {
        height: handleStyleByUnit($i);
    }
    .h-#{$i}-vw {
        height: handleStyleByUnit($i,vw);
    }
    .h-#{$i}-rem {
        height: handleStyleByUnit($i,rem);
    }
}
.reset {
    @include m(null);
    @include p(null);
}
.m-auto {
    margin: 0 auto;
}
.el-block {
    display: list.nth($display,1);
}
.el-flex {
    display: list.nth($display,2);
}
.el-inline-block {
    display: list.nth($display,3);
}
.el-vertical-mid {
    vertical-align: list.nth($vertical,1);
}
.el-position-r {
    position:list.nth($position,1);
}
.el-position-a {
    position:list.nth($position,2);
}
.flex-center {
    display: list.nth($display,2);
    align-items:list.nth($align,1);
    justify-content: list.nth($align,1);
}
.tool-bg {
    background: linear-gradient(90deg,#e73434,#e6ad45,#e6d543,#32bb54,#47acd4,#5b34e7,#e734c0,#e73434);
}
.base-transition {
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.common-form-style {
    $borderColor:#dfe0e2;
    border: {
        width:1px;
        style:solid;
        color:$borderColor;
        radius:math.round(14.5) + px;
    }
    cursor: pointer;
    @extend .el-inline-block;
    @include p("t",6,px);
    @include p("b",6,px);
    @include p("l",16,px);
    @include p("r",16,px);
    box-sizing: border-box;
    &:focus-visible {
        outline: list.nth($display,list.length($display));
    }
}