$columns: 12;
$atom: (100% / $columns);

$break_extraLarge: 1534px;
$break_notebook: 1439px;
$break_large: 1279px;
$break_medium: 1023px;
$break_vuetifyBreakpoint: 960px;
$break_small: 767px;
$break_verySmall: 600px;
$break_extraSmall: 450px;

$offset: 16px;
$offset_extraLarge: $offset;
$offset_notebook: $offset;
$offset_large: $offset;
$offset_medium: $offset;
$offset_vuetifyBreakpoint: $offset;
$offset_small: $offset;
$offset_verySmall: $offset;
$offset_extraSmall: $offset;

$offset_one_side: ($offset / 2);
$offset_extraLarge_one_side: ($offset_extraLarge / 2);
$offset_notebook_one_side: ($offset_notebook / 2);
$offset_large_one_side: ($offset_large / 2);
$offset_medium_one_side: ($offset_medium / 2);
$offset_vuetifyBreakpoint_one_side: ($offset_vuetifyBreakpoint / 2);
$offset_small_one_side: ($offset_small / 2);
$offset_verySmall_one_side: ($offset_verySmall / 2);
$offset_extraSmall_one_side: ($offset_extraSmall / 2);

$fields: 24px;

@mixin wrapper-full(){
    padding-left: $fields;
    padding-right: $fields;
}

@mixin row-offsets(){
    margin-left: ($offset_one_side * -1);
    margin-right: ($offset_one_side * -1);
}

@mixin col-offsets($type){
    #{$type}-left: $offset_one_side;
    #{$type}-right: $offset_one_side;
}

@mixin wrapper(){
    max-width: 100%;
    margin: 0 auto;
    @include wrapper-full();
}

@mixin row-flex(){
    display: flex;
    flex-wrap: wrap;
    @include row-offsets();
}

@mixin row-float(){
    @include row-offsets();
    @include clearfix();
}

@mixin row-ib(){
    @include row-offsets();
}

@mixin col(){
    box-sizing: border-box;
    word-wrap: break-word;
    @include col-offsets(margin);
}

@mixin col-float(){
    float: left;
}

@mixin col-ib(){
    display: inline-block;
    vertical-align: top;
}

@mixin col-padding(){
    word-wrap: break-word;
    @include col-offsets(padding);
}

@mixin size($n){
    $val: 100% / $columns * $n;
    width: #{calc(#{$val} - #{$offset})};
}

@mixin size-extraLarge($n){
    $val: 100% / $columns * $n;
    @include extraLarge(width, #{calc(#{$val} - #{$offset_extraLarge})});
}

@mixin size-notebook($n){
    $val: 100% / $columns * $n;
    @include notebook(width, #{calc(#{$val} - #{$offset_notebook})});
}

@mixin size-large($n){
    $val: 100% / $columns * $n;
    @include large(width, #{calc(#{$val} - #{$offset_large})});
}

@mixin size-medium($n){
    $val: 100% / $columns * $n;
    @include medium(width, #{calc(#{$val} - #{$offset_medium})});
}

@mixin size-vuetifyBreakpoint($n){
    $val: 100% / $columns * $n;
    @include vuetifyBreakpoint(width, #{calc(#{$val} - #{$offset_vuetifyBreakpoint})});
}

@mixin size-small($n){
    $val: 100% / $columns * $n;
    @include small(width, #{calc(#{$val} - #{$offset_small})});
}

@mixin size-verySmall($n){
    $val: 100% / $columns * $n;
    @include verySmall(width, #{calc(#{$val} - #{$offset_verySmall})});
}

@mixin size-extraSmall($n){
    $val: 100% / $columns * $n;
    @include extraSmall(width, #{calc(#{$val} - #{$offset_extraSmall})});
}

@mixin shift($n){
    $val: 100% / $columns * $n;
    margin-left: #{calc(#{$val} + #{$offset_one_side})};
    margin-right: #{calc(#{$val} + #{$offset_one_side})};
}

@mixin shift-left($n){
    $val: 100% / $columns * $n;
    margin-left: #{calc(#{$val} + #{$offset_one_side})};
}

@mixin shift-right($n){
    $val: 100% / $columns * $n;
    margin-right: #{calc(#{$val} + #{$offset_one_side})};
}

@mixin shift-padding($n){
    $val: 100% / $columns * $n;
    padding-left: #{calc(#{$val} + #{$offset_one_side})};
    padding-right: #{calc(#{$val} + #{$offset_one_side})};
}

@mixin shift-padding-left($n){
    $val: 100% / $columns * $n;
    padding-left: #{calc(#{$val} + #{$offset_one_side})};
}

@mixin shift-padding-right($n){
    $val: 100% / $columns * $n;
    padding-right: #{calc(#{$val} + #{$offset_one_side})};
}

@mixin shift-extraLarge($n){
    $val: 100% / $columns * $n;
    @include extraLarge(margin-left, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
    @include extraLarge(margin-right, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
}

@mixin shift-extraLarge-left($n){
    $val: 100% / $columns * $n;
    @include extraLarge(margin-left, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
}

@mixin shift-extraLarge-right($n){
    $val: 100% / $columns * $n;
    @include extraLarge(margin-right, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
}

@mixin shift-extraLarge-padding($n){
    $val: 100% / $columns * $n;
    @include extraLarge(padding-left, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
    @include extraLarge(padding-right, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
}

@mixin shift-extraLarge-padding-left($n){
    $val: 100% / $columns * $n;
    @include extraLarge(padding-left, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
}

@mixin shift-extraLarge-padding-right($n){
    $val: 100% / $columns * $n;
    @include extraLarge(padding-right, #{calc(#{$val} + #{$offset_extraLarge_one_side})});
}

@mixin shift-notebook($n){
    $val: 100% / $columns * $n;
    @include notebook(margin-left, #{calc(#{$val} + #{$offset_notebook_one_side})});
    @include notebook(margin-right, #{calc(#{$val} + #{$offset_notebook_one_side})});
}

@mixin shift-notebook-left($n){
    $val: 100% / $columns * $n;
    @include notebook(margin-left, #{calc(#{$val} + #{$offset_notebook_one_side})});
}

@mixin shift-notebook-right($n){
    $val: 100% / $columns * $n;
    @include notebook(margin-right, #{calc(#{$val} + #{$offset_notebook_one_side})});
}

@mixin shift-notebook-padding($n){
    $val: 100% / $columns * $n;
    @include notebook(padding-left, #{calc(#{$val} + #{$offset_notebook_one_side})});
    @include notebook(padding-right, #{calc(#{$val} + #{$offset_notebook_one_side})});
}

@mixin shift-notebook-padding-left($n){
    $val: 100% / $columns * $n;
    @include notebook(padding-left, #{calc(#{$val} + #{$offset_notebook_one_side})});
}

@mixin shift-notebook-padding-right($n){
    $val: 100% / $columns * $n;
    @include notebook(padding-right, #{calc(#{$val} + #{$offset_notebook_one_side})});
}

@mixin shift-large($n){
    $val: 100% / $columns * $n;
    @include large(margin-left, #{calc(#{$val} + #{$offset_large_one_side})});
    @include large(margin-right, #{calc(#{$val} + #{$offset_large_one_side})});
}

@mixin shift-large-left($n){
    $val: 100% / $columns * $n;
    @include large(margin-left, #{calc(#{$val} + #{$offset_large_one_side})});
}

@mixin shift-large-right($n){
    $val: 100% / $columns * $n;
    @include large(margin-right, #{calc(#{$val} + #{$offset_large_one_side})});
}

@mixin shift-large-padding($n){
    $val: 100% / $columns * $n;
    @include large(padding-left, #{calc(#{$val} + #{$offset_large_one_side})});
    @include large(padding-right, #{calc(#{$val} + #{$offset_large_one_side})});
}

@mixin shift-large-padding-left($n){
    $val: 100% / $columns * $n;
    @include large(padding-left, #{calc(#{$val} + #{$offset_large_one_side})});
}

@mixin shift-large-padding-right($n){
    $val: 100% / $columns * $n;
    @include large(padding-right, #{calc(#{$val} + #{$offset_large_one_side})});
}

@mixin shift-medium($n){
    $val: 100% / $columns * $n;
    @include medium(margin-left, #{calc(#{$val} + #{$offset_medium_one_side})});
    @include medium(margin-right, #{calc(#{$val} + #{$offset_medium_one_side})});
}

@mixin shift-medium-left($n){
    $val: 100% / $columns * $n;
    @include medium(margin-left, #{calc(#{$val} + #{$offset_medium_one_side})});
}

@mixin shift-medium-right($n){
    $val: 100% / $columns * $n;
    @include medium(margin-right, #{calc(#{$val} + #{$offset_medium_one_side})});
}

@mixin shift-medium-padding($n){
    $val: 100% / $columns * $n;
    @include medium(padding-left, #{calc(#{$val} + #{$offset_medium_one_side})});
    @include medium(padding-right, #{calc(#{$val} + #{$offset_medium_one_side})});
}

@mixin shift-medium-padding-left($n){
    $val: 100% / $columns * $n;
    @include medium(padding-left, #{calc(#{$val} + #{$offset_medium_one_side})});
}

@mixin shift-medium-padding-right($n){
    $val: 100% / $columns * $n;
    @include medium(padding-right, #{calc(#{$val} + #{$offset_medium_one_side})});
}

@mixin shift-vuetifyBreakpoint($n){
    $val: 100% / $columns * $n;
    @include vuetifyBreakpoint(margin-left, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
    @include vuetifyBreakpoint(margin-right, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
}

@mixin shift-vuetifyBreakpoint-left($n){
    $val: 100% / $columns * $n;
    @include vuetifyBreakpoint(margin-left, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
}

@mixin shift-vuetifyBreakpoint-right($n){
    $val: 100% / $columns * $n;
    @include vuetifyBreakpoint(margin-right, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
}

@mixin shift-vuetifyBreakpoint-padding($n){
    $val: 100% / $columns * $n;
    @include vuetifyBreakpoint(padding-left, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
    @include vuetifyBreakpoint(padding-right, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
}

@mixin shift-vuetifyBreakpoint-padding-left($n){
    $val: 100% / $columns * $n;
    @include vuetifyBreakpoint(padding-left, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
}

@mixin shift-vuetifyBreakpoint-padding-right($n){
    $val: 100% / $columns * $n;
    @include vuetifyBreakpoint(padding-right, #{calc(#{$val} + #{$offset_vuetifyBreakpoint_one_side})});
}

@mixin shift-small($n){
    $val: 100% / $columns * $n;
    @include small(margin-left, #{calc(#{$val} + #{$offset_small_one_side})});
    @include small(margin-right, #{calc(#{$val} + #{$offset_small_one_side})});
}

@mixin shift-small-left($n){
    $val: 100% / $columns * $n;
    @include small(margin-left, #{calc(#{$val} + #{$offset_small_one_side})});
}

@mixin shift-small-right($n){
    $val: 100% / $columns * $n;
    @include small(margin-right, #{calc(#{$val} + #{$offset_small_one_side})});
}

@mixin shift-small-padding($n){
    $val: 100% / $columns * $n;
    @include small(padding-left, #{calc(#{$val} + #{$offset_small_one_side})});
    @include small(padding-right, #{calc(#{$val} + #{$offset_small_one_side})});
}

@mixin shift-small-padding-left($n){
    $val: 100% / $columns * $n;
    @include small(padding-left, #{calc(#{$val} + #{$offset_small_one_side})});
}

@mixin shift-small-padding-right($n){
    $val: 100% / $columns * $n;
    @include small(padding-right, #{calc(#{$val} + #{$offset_small_one_side})});
}

@mixin shift-verySmall($n){
    $val: 100% / $columns * $n;
    @include verySmall(margin-left, #{calc(#{$val} + #{$offset_verySmall_one_side})});
    @include verySmall(margin-right, #{calc(#{$val} + #{$offset_verySmall_one_side})});
}

@mixin shift-verySmall-left($n){
    $val: 100% / $columns * $n;
    @include verySmall(margin-left, #{calc(#{$val} + #{$offset_verySmall_one_side})});
}

@mixin shift-verySmall-right($n){
    $val: 100% / $columns * $n;
    @include verySmall(margin-right, #{calc(#{$val} + #{$offset_verySmall_one_side})});
}

@mixin shift-verySmall-padding($n){
    $val: 100% / $columns * $n;
    @include verySmall(padding-left, #{calc(#{$val} + #{$offset_verySmall_one_side})});
    @include verySmall(padding-right, #{calc(#{$val} + #{$offset_verySmall_one_side})});
}

@mixin shift-verySmall-padding-left($n){
    $val: 100% / $columns * $n;
    @include verySmall(padding-left, #{calc(#{$val} + #{$offset_verySmall_one_side})});
}

@mixin shift-verySmall-padding-right($n){
    $val: 100% / $columns * $n;
    @include verySmall(padding-right, #{calc(#{$val} + #{$offset_verySmall_one_side})});
}

@mixin shift-extraSmall($n){
    $val: 100% / $columns * $n;
    @include extraSmall(margin-left, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
    @include extraSmall(margin-right, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
}

@mixin shift-extraSmall-left($n){
    $val: 100% / $columns * $n;
    @include extraSmall(margin-left, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
}

@mixin shift-extraSmall-right($n){
    $val: 100% / $columns * $n;
    @include extraSmall(margin-right, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
}

@mixin shift-extraSmall-padding($n){
    $val: 100% / $columns * $n;
    @include extraSmall(padding-left, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
    @include extraSmall(padding-right, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
}

@mixin shift-extraSmall-padding-left($n){
    $val: 100% / $columns * $n;
    @include extraSmall(padding-left, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
}

@mixin shift-extraSmall-padding-right($n){
    $val: 100% / $columns * $n;
    @include extraSmall(padding-right, #{calc(#{$val} + #{$offset_extraSmall_one_side})});
}

@mixin extraLarge($name, $value){
    @media screen and (max-width: $break_extraLarge){
        #{$name}: $value;
    }
}

@mixin extraLarge-block(){
    @media screen and (max-width: $break_extraLarge){
        @content;
    }
}

@mixin notebook($name, $value){
    @media screen and (max-width: $break_notebook){
        #{$name}: $value;
    }
}

@mixin notebook-block(){
    @media screen and (max-width: $break_notebook){
        @content;
    }
}

@mixin large($name, $value){
    @media screen and (max-width: $break_large){
        #{$name}: $value;
    }
}

@mixin large-block(){
    @media screen and (max-width: $break_large){
        @content;
    }
}

@mixin medium($name, $value){
    @media screen and (max-width: $break_medium){
        #{$name}: $value;
    }
}

@mixin medium-block(){
    @media screen and (max-width: $break_medium){
        @content;
    }
}

@mixin vuetifyBreakpoint($name, $value){
    @media screen and (max-width: $break_vuetifyBreakpoint){
        #{$name}: $value;
    }
}

@mixin vuetifyBreakpoint-block(){
    @media screen and (max-width: $break_vuetifyBreakpoint){
        @content;
    }
}

@mixin small($name, $value){
    @media screen and (max-width: $break_small){
        #{$name}: $value;
    }
}

@mixin small-block(){
    @media screen and (max-width: $break_small){
        @content;
    }
}

@mixin verySmall($name, $value){
    @media screen and (max-width: $break_verySmall){
        #{$name}: $value;
    }
}

@mixin verySmall-block(){
    @media screen and (max-width: $break_verySmall){
        @content;
    }
}

@mixin extraSmall($name, $value){
    @media screen and (max-width: $break_extraSmall){
        #{$name}: $value;
    }
}

@mixin extraSmall-block(){
    @media screen and (max-width: $break_extraSmall){
        @content;
    }
}

@mixin from($min_width){
    @media screen and (min-width: $min_width){
        @content;
    }
}

@mixin to($max_width){
    @media screen and (max-width: $max_width){
        @content;
    }
}

@mixin from-to($min_width, $max_width){
    @media screen and (min-width: $min_width) and (max-width: $max_width){
        @content;
    }
}

@mixin u-row-flex($offset){
    display: flex;
    flex-wrap: wrap;
    margin-left: ($offset / -2);
    margin-right: ($offset / -2);
}

@mixin u-col($offset){
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: ($offset / 2);
    margin-right: ($offset / 2);
}

@mixin u-size($n, $columns, $offset){
    width: #{calc(100% / #{$columns} * #{$n} - #{$offset})};
}

@mixin reset(){
    body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    table{
        border-collapse: collapse;
        border-spacing: 0;
    }
    fieldset,img,abbr{
        border: 0;
    }
    address,caption,cite,code,dfn,em,strong,th,var{
        font-style: normal;
        font-weight: normal;
    }
    ul li{
        list-style: none;
    }
    caption,th{
        text-align: left;
    }
    h1,h2,h3,h4,h5,h6{
        font-size: 100%;
        font-weight: normal;
    }
    sup{
        vertical-align: text-top;
    }
    sub{
        vertical-align: text-bottom;
    }
    input,textarea,select{
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
    }
    legend{
        color: #000;
    }
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{
        display: block;
    }
    img{
        max-width: 100%;
        height: auto;
    }
}

@mixin debug($background, $outline){
    height: 100vh;
    position: fixed;
    width: 100%;
    
    > div{
        height: inherit;
        @include wrapper();
        
        > div{
            height: inherit;
            @include row-flex();
            
            > div{
                @include col();
                @include size(1);
                height: inherit;
                outline: $outline;
                background: $background;
            }
        }
    }
}

@mixin clearfix(){
    &::after{
        display: block;
        content: "";
        clear: both;
    }
}