@import "./variables", "../index.scss";

@mixin el(
        $p: null,
    //padding
        $pt: null,
    //padding-top
        $pb: null,
    //padding-bottom
        $pl: null,
    //padding-left
        $pr: null,
    //padding-right
        $m: null,
    //margin
        $mt: null,
    //margin-top
        $mb: null,
    //margin-bottom
        $ml: null,
    //margin-left
        $mr: null,
    //margin-right
        $w: null,
    //width
        $w-min: null,
    //min-width
        $w-max: null,
    //max-width
        $h: null,
    //height
        $h-min: null,
    //min-height
        $h-max: null,
    //max-height
        $square: null,
    //width && height
        $sizing: null,
    //box-sizing
        $color: null,
    //color
        $oPos: null,
    //object-position
        $bg: null,
    //background
        $bgColor: null,
    //background-color
        $bgImage: null,
    //background-image
        $bgA: null,
    //background-attachment
        $bgBM: null,
    //background-blend-mode
        $bgCl: null,
    //background-clip
        $bgO: null,
    //background-origin
        $bgP: null,
    //background-position
        $bgR: null,
    //background-repeat
        $bgS: null,
    //background-size
        $backface: null,
    //backface-visibility
        $b: null,
    //border
        $bt: null,
    //border-top
        $bb: null,
    //border-bottom
        $bl: null,
    //border-left
        $br: null,
    //border-right
        $bw: null,
    //border-width
        $btw: null,
    //border-top-width
        $bts: null,
    // border-top-style
        $btc: null,
    //border-top-color
        $bs: null,
    //border-style
        $bsp: null,
    //border-spacing
        $brw: null,
    //border-right-width
        $brs: null,
    //border-right-style
        $brc: null,
    //border-right-color
        $blw: null,
    //border-left-width
        $bls: null,
    //border-left-style
        $blc: null,
    // border-left-color
        $bImgW: null,
    //border-image-width
        $bImgSrc: null,
    //border-image-source
        $bImgSl: null,
    //border-image-slice
        $bImgR: null,
    //border-image-repeat
        $bImgO: null,
    //border-image-outset
        $bImg: null,
    //border-image
        $bc: null,
    //border-color
        $bCls: null,
    //border-collapse
        $bbw: null,
    //border-bottom-width
        $bbs: null,
    //border-bottom-style
        $bbc: null,
    //border-bottom-color
        $btlr: null,
    //border-top-left-radius
        $btrr: null,
    //border-top-right-radius
        $bblr: null,
    //border-bottom-left-radius
        $bbrr: null,
    //border-bottom-right-radius
        $top: null,
    //top
        $bottom: null,
    //bottom
        $left: null,
    //left
        $right: null,
    //right
        $shadow: null,
    //box-shadow
        $opy: null,
    //opacity
        $outlnC: null,
    //outline-color
        $outlnO: null,
    //outline-offset
        $outlnS: null,
    //outline-style
        $outlnW: null,
    //outline-width
        $outln: null,
    //outline
        $ord: null,
    //order
        $index: null,
    //z-index
        $radius: null,
    //radius
        $style: null,
    //list-style
        $style-typ: null,
    //list-style-type
        $style-img: null,
    //list-style-image
        $stylePos: null,
    //list-style-position
        $overflowX: null,
    //overflow-x
        $overflowY: null,
    //overflow-y
        $overflow: null,
    //overflow
        $float: null,
    //float
        $resize: null,
    //resize
        $crs: null,
    //cursor
        $mBM: null,
    //mix-blend-mode
        $pers: null,
    //perspective
        $persO: null,
    //perspective-origin
        $clmC: null,
    //column-count
        $clmF: null,
    //column-fill
        $clmG: null,
    //column-gap
        $clmR: null,
    //column-rule
        $clmRC: null,
    //column-rule-color
        $clmRS: null,
    //column-rule-style
        $clmRW: null,
    //column-rule-width
        $clmS: null,
    //column-span
        $clmW: null,
    //column-width
        $clm: null,
    //columns
        $cnt: null,
    //content
        $counterI: null,
    //counter-increment
        $counterR: null,
    //counter-reset
        $dr: null,
    //direction
        $empC: null,
    //empty-cells
        $hyp: null,
    //hyphens
        $scrollB: null,
    //scroll-behavior
        $tabS: null,
    //tab-size
        $tableL: null,
    //table-layout
        $pointer: null,
    //pointer
        $vsb: null,
    //visibility
        $vrAlign: null,
    //vertical-align
        $all: null,
    //all
        $animeDly: null,
    //animation-delay
        $animeDr: null,
    //animation-direction
        $animeDrt: null,
    //animation-duration
        $animeFM: null,
    //animation-fill-mode
        $animeIC: null,
    //animation-iteration-count
        $animeN: null,
    //animation-name
        $animePS: null,
    //animation-play-state
        $animeTF: null,
    //animation-timing-function
        $filter: null,
    //filter
        $animatedBB: null,
    //mixin-animation-border-bottom
        $fixed: null,
    //position:fixed
        $relative: null,
    //position:relative
        $absolute: null,
    //position:absolute
        $transform: null,
    //transform
        $transformO: null,
    //transform-origin
        $transformS: null,
    //transform-style
        $matrix: null,
    //matrix
        $translate: null,
    //transform:translate
        $translate3d: null,
    //transform:translate
        $translateX: null,
    //transform:translateX
        $translateY: null,
    //transform:translateY
        $translateZ: null,
    //transform:translateZ
        $rotate: null,
    //transform:rotate
        $rotate3d: null,
    //transform:rotate3d
        $rotateX: null,
    //transform:rotateX
        $rotateY: null,
    //transform:rotateY
        $rotateZ: null,
    //transform:rotateZ
        $scale: null,
    //transform:scale
        $scale3d: null,
    //transform:scale3d
        $scaleX: null,
    //transform:scaleX
        $scaleY: null,
    //transform:scaleY
        $scaleZ: null,
    //transform:scaleZ
        $skew: null,
    //transform:skew
        $skewX: null,
    //transform:skewX
        $skewY: null,
    //transform:skewY
        $transition: null,
    //transition
        $transitionD: null,
    //transition-delay
        $transitionDr: null,
    //transition-duration
        $transitionP: null,
    //transition-property
        $transitionTF: null,
    //transition-timing-function
        $animation: null,
    //animation
        $fadeIn: null,
    //animation:fadeIn
        $linearBg: null,
    //linear-background
        $linearPcBg: null,
    //linear-percent-background
        $oFit: null,
    //object-fit
        $dsp: null,
    //display
        $ln-h: null 
    //line-height
) {
    padding: $p;
    padding-top: $pt;
    padding-bottom: $pb;
    padding-left: $pl;
    padding-right: $pr;
    margin: $m;
    margin-top: $mt;
    margin-bottom: $mb;
    margin-left: $ml;
    margin-right: $mr;
    width: $w;
    min-width: $w-min;
    max-width: $w-max;
    height: $h;
    min-height: $h-min;
    max-height: $h-max;
    box-sizing: map-get($sizingVal, $sizing);
    color: $color;
    object-position: map-get($oPosVal, $oPos);
    background: $bg;
    background-color: $bgColor;

    @if($bgImage != null) {
        background-image: url($bgImage);
    }

    background-attachment: map-get($bgAVal, $bgA);
    background-blend-mode: map-get($bgBMVal, $bgBM);
    background-clip: map-get($bgClVal, $bgCl);
    background-origin: map-get($bgClVal, $bgO);
    background-position: $bgP;
    background-repeat: map-get($bgRVal, $bgR);
    background-size: $bgS;
    backface-visibility: map-get($backfaceVal, $backface);
    border: $b;
    border-top: $bt;
    border-bottom: $bb;
    border-left: $bl;
    border-right: $br;
    border-width: $bw;
    border-top-width: $btw;
    border-top-style: map-get($borderStyleVal, $bts);
    border-top-color: $btc;
    border-style: map-get($borderStyleVal, $bs);
    border-spacing: $bsp;
    border-right-width: $brw;
    border-right-style: map-get($borderStyleVal, $brs);
    border-right-color: $brc;
    border-left-width: $blw;
    border-left-style: map-get($borderStyleVal, $bls);
    border-left-color: $blc;
    border-image-width: $bImgW;

    @if ($bImgSrc != null) {
        border-image-source: url($bImgSrc);
    }
    
    border-image-slice: $bImgSl;
    border-image-repeat: map-get($birVal, $bImgR);
    border-image-outset: $bImgO;
    border-image: $bImg;
    border-color: $bc;
    border-collapse: map-get($bclsVal, $bCls);
    border-bottom-width: $bbw;
    border-bottom-style: map-get($borderStyleVal, $bbs);
    border-bottom-color: $bbc;
    border-top-left-radius: $btlr;
    border-top-right-radius: $btrr;
    border-bottom-left-radius: $bblr;
    border-bottom-right-radius: $bbrr;
    top: $top;
    bottom: $bottom;
    left: $left;
    right: $right;
    box-shadow: $shadow;
    opacity: $opy;
    outline-color: $outlnC;
    outline-offset: $outlnO;
    outline-style: map-get($borderStyleVal, $outlnS);
    outline-width: $outlnW;
    outline: map-get($outlnVal, $outln);
    order: $ord;
    z-index: $index;
    border-radius: $radius;
    list-style: $style;
    list-style-type: map-get($styleVal, $style-typ);

    @if ($style-img != null) {
        list-style-image: url($style-img);
    }

    list-style-position: map-get($stylePosVal, $stylePos);
    overflow-x: map-get($overfwVal, $overflowX);
    overflow-y: map-get($overfwVal, $overflowY);
    overflow: map-get($overfwVal, $overflow);
    float: map-get($floatVal, $float);
    resize: map-get($resizeVal, $resize);
    cursor: $crs;
    mix-blend-mode: $mBM;
    perspective: $pers;
    perspective-origin: $persO;
    olumn-count: $clmC;
    column-fill: map-get($clmFVal, $clmF);
    column-gap: $clmG;
    column-rule: $clmR;
    column-rule-color: $clmRC;
    column-rule-style: map-get($borderStyleVal, $clmRS);
    column-rule-width: $clmRW;
    column-span: map-get($clmSVal, $clmS);
    column-width: $clmW;
    columns: $clm;
    content: $cnt;
    counter-increment: $counterI;
    counter-reset: $counterR;
    direction: map-get($drVal, $dr);
    empty-cells: map-get($empCVal, $empC);
    hyphens: map-get($hypVal, $hyp);
    scroll-behavior: map-get($scrollBVal, $scrollB);
    tab-size: $tabS;
    table-layout: map-get($tableLVal, $tableL);
    pointer-events: map-get($pointerVal, $pointer);
    visibility: map-get($vsbVal, $vsb);
    vertical-align: map-get($vrAlignVal, $vrAlign);
    all: map-get($allVal, $all);
    animation-delay: $animeDly;
    animation-direction: map-get($animeDrVal, $animeDr);
    animation-duration: $animeDrt;
    animation-fill-mode: map-get($animeFMVal, $animeFM);
    animation-iteration-count: $animeIC;
    animation-name: $animeN;
    animation-play-state: map-get($animePSVal, $animePS);
    animation-timing-function: map-get($animeTFVal, $animeTF);

    @if ($filter != null) {
        @include filter($filter);
    }

    @if ($animatedBB) {
        @include animated-border-bottom($animatedBB);
    }

    @if ($fixed != null) {
        @include fixed($fixed...);
    }

    @if ($relative != null) {
        @include relative($relative...);
    }

    @if ($absolute != null) {
        @include absolute($absolute...);
    }

    @include transform($transform);
    transform-origin: $transformO;
    transform-style: map-get($transformSVal, transformS);

    @if ($matrix != null) {
        @include matrix($matrix...);
    }
    
    @include translate($translate...);
    @include translate3d($translate3d...);
    @include translateX($translateX);
    @include translateY($translateY);
    @include translateZ($translateZ);
    @include rotate($rotate);
    @include rotate3d($rotate3d...);
    @include rotateX($rotateX);
    @include rotateY($rotateY);
    @include rotateZ($rotateZ);
    @include scale($scale);
    @include scale3d($scale3d...);
    @include scaleX($scaleX);
    @include scaleY($scaleY);
    @include scaleZ($scaleZ);
    @include skew($skew...);
    @include skewX($skewX);
    @include skewY($skewY);
    @include transition($transition);
    transition-delay: $transitionD;
    transition-duration: $transitionDr;
    transition-property: $transitionP;
    transition-timing-function: map-get($animeTFVal, $transitionTF);
    @include animation($animation);
    @include fadeIn($fadeIn);
    @include linear-background($linearBg...);
    @include linear-percent-background($linearPcBg...);
    @include square($square);
    @include object-fit(map-get($objectFitVal, $oFit));
    @include display(map-get($dspVal, $dsp));
    @include line-and-height($ln-h);
}