// grid screen array (type,size) list
$grid-type-list: ("xs", $screen-xs),("sm", $screen-sm),("md", $screen-md),("lg", $screen-lg),("xl", $screen-xl);

 
 // aspect ratio array list
$aspect-ratio-list: (
    pt-1-1: ('100%'), 
    pt-1-2: ('200%'),
    pt-1-3: ('300%'),
    pt-16-9: ('56%')
);

// border-radius array list
$border-radius-type-list: (
    br-100: ('100%'), 
    br-20: ('20px'),
    br-10: ('10px'),
    br-5: ('5px')
);

// text-align array list
$text-align-type-list: (
    ta-c: ('center'),
    ta-l: ('left'),
    ta-r: ('right')
);

// width array list
$width-type-list: (
    w-100: ('100%'),
    w-75: ('75%'),
    w-50: ('50%'),
    w-25: ('25%'),
    w-auto: ('auto')
);

// height array list
$height-type-list: (
    h-100: ('100%'),
    h-75: ('75%'),
    h-50: ('50%'),
    h-25: ('25%'),
    h-auto: ('auto')
);

// padding array list
$padding-type-list: (
    p: ('null'), 
    pt: ('top'), 
    pr: ('right'),
    pb: ('bottom'),
    pl: ('left')
);


// margin array list
$margin-type-list: (
    m: ('null'),
    mt: ('top'),
    mr: ('right'),
    mb: ('bottom'),
    ml: ('left')
);

// position array list
$position-type-list: (
    absolute: ('absolute'), 
    relative: ('relative'), 
);


// top,riht,bottom,left array list
$top-right-bottom-left-type-list: (
    top: ('0'),
    right: ('0'),
    bottom: ('0'),
    left: ('0'),
);


// opacity array list
$opacity-type-list: (
    opacity-0: ('0'),
    opacity-25: ('.25'),
    opacity-50: ('.50'),
    opacity-75: ('.75'),
    opacity-100: ('1')
);

$flex-attribute-list: (

    // flex-direction
    d-flex:                   (display: "flex"),
    d-inline-flex:            (display: "inline-flex"),

 
    // flex-direction
    flex-d-row:                       (flex-direction: "row"),
    flex-d-row-reverse:               (flex-direction: "row-reverse"),
    flex-d-column:                    (flex-direction: "column"),
    flex-d-column-reverse:            (flex-direction: "column-reverse"),


    // flex-wrap
    flex-wrap:                      (flex-wrap: "wrap"),
    flex-wrap-reverse:              (flex-wrap: "wrap-reverse"),
    flex-nowrap:                    (flex-wrap: "nowrap"),


    // flex-flow (direction,wrap)
    //row
    flex-flow-rw:                   (flex-flow: "row wrap"),
    flex-flow-rrw:                  (flex-flow: "row-reverse wrap"),
    flex-flow-rnw:                  (flex-flow: "row nowrap"),
    flex-flow-rrnw:                 (flex-flow: "row-reverse nowrap"),
    //column
    flex-flow-cw:                   (flex-flow: "column wrap"),
    flex-flow-crw:                  (flex-flow: "column-reverse wrap"),
    flex-flow-cnw:                  (flex-flow: "column nowrap"),
    flex-flow-crnw:                 (flex-flow: "column-reverse nowrap"),


    // justfy-content
    justify-content-start:          (justify-content: "flex-start"),
    justify-content-end:            (justify-content: "flex-end"),
    justify-content-center:         (justify-content: "center"),
    justify-content-baseline:       (justify-content: "baseline"),
    justify-content-around:         (justify-content: "space-around"),
    justify-content-between:        (justify-content: "space-between"),
    

    // align-items
    align-items-start:              (align-items: "flex-start"),
    align-items-end:                (align-items: "flex-end"),
    align-items-center:             (align-items: "center"),
    align-items-baseline:           (align-items: "baseline"),
    align-items-stretch:            (align-items: "stretch"),


    // align-self
    align-self-start:               (align-self: "flex-start"),
    align-self-end:                 (align-self: "flex-end"),
    align-self-center:              (align-self: "center"),
    align-self-baseline:            (align-self: "baseline"),
    align-self-stretch:             (align-self: "stretch"),


    // align-content
    align-content-start:            (align-content: "flex-start"),
    align-content-end:              (align-content: "flex-end"),
    align-content-center:           (align-content: "center"),
    align-content-between:          (align-content: "space-between"),
    align-content-around:           (align-content: "space-around"),


    // flex order
    flex-order-first:               (order: "-1"),
    flex-order-last:                (order: "1"),
    flex-order-unordered:           (order: "0"),


    // flex margin (left,right) justfy-content
    flex-ml-auto:                   (margin-left: "auto"),
    flex-mr-auto:                   (margin-right: "auto"),

    // flex margin (top,bottom) align-items
    flex-mt-auto:                   (margin-top: "auto"),
    flex-mb-auto:                   (margin-bottom: "auto")
);