//@import '_variables';
//@import "~element-ui/packages/theme-chalk/src/common/var";


// Div scrollable
.scrollable {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;

    &.only-x {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    &.only-y {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}


// Classic vertical align
.align-vertical {
    &:before {
        display: inline-block;
        height: 100%;
        content: '';
        vertical-align: middle;
    }

    .align-vertical-top,
    .align-vertical-middle,
    .align-vertical-bottom {
        display: inline-block;
    }
    .align-vertical-top {
        vertical-align: top;
    }
    .align-vertical-middle {
        vertical-align: middle;
    }
    .align-vertical-bottom {
        vertical-align: bottom;
    }
}



// Padding / Margin helpers
.no-p { padding: 0 !important; }
.no-m { margin: 0 !important; }
@for $i from 0 through 200 {

    //padding
    .padding-#{$i}, .p-#{$i} { padding: #{($i) + 'px'}; }
    .padding-top-#{$i}, .pt-#{$i} { padding-top: #{($i) + 'px'}; }
    .padding-right-#{$i}, .pr-#{$i} { padding-right: #{($i) + 'px'}; }
    .padding-bottom-#{$i}, .pb-#{$i} { padding-bottom: #{($i) + 'px'}; }
    .padding-left-#{$i}, .pl-#{$i} { padding-left: #{($i) + 'px'}; }
    .padding-horizontal-#{$i}, .ph-#{$i} {
        padding-left: #{($i) + 'px'};
        padding-right: #{($i) + 'px'};
    }
    .padding-vertical-#{$i}, .pv-#{$i} {
        padding-top: #{($i) + 'px'};
        padding-bottom: #{($i) + 'px'};
    }

    //margin
    .margin-#{$i}, .m-#{$i} { margin: #{($i) + 'px'}; }
    .margin-top-#{$i}, .mt-#{$i} { margin-top: #{($i) + 'px'}; }
    .margin-right-#{$i}, .mr-#{$i} { margin-right: #{($i) + 'px'}; }
    .margin-bottom-#{$i}, .mb-#{$i} { margin-bottom: #{($i) + 'px'}; }
    .margin-left-#{$i}, .ml-#{$i} { margin-left: #{($i) + 'px'}; }
    .margin-horizontal-#{$i}, .mh-#{$i} {
        margin-left: #{($i) + 'px'};
        margin-right: #{($i) + 'px'};
    }
    .margin-vertical-#{$i}, .mv-#{$i} {
        margin-top: #{($i) + 'px'};
        margin-bottom: #{($i) + 'px'};
    }
}


// Opacity helpers
.o-0 { opacity: 0; }
.o-005 { opacity: 0.05; }
.o-010 { opacity: 0.10; }
.o-015 { opacity: 0.15; }
.o-020 { opacity: 0.20; }
.o-025 { opacity: 0.25; }
.o-030 { opacity: 0.30; }
.o-035 { opacity: 0.35; }
.o-040 { opacity: 0.40; }
.o-045 { opacity: 0.45; }
.o-050 { opacity: 0.50; }
.o-055 { opacity: 0.55; }
.o-060 { opacity: 0.60; }
.o-065 { opacity: 0.65; }
.o-070 { opacity: 0.70; }
.o-075 { opacity: 0.75; }
.o-080 { opacity: 0.80; }
.o-085 { opacity: 0.85; }
.o-090 { opacity: 0.90; }
.o-095 { opacity: 0.95; }
.o-1 { opacity: 1; }

