@charset "UTF-8";
@import (reference) 'size';

.margin-(@a,...){
    text-shadow: @arguments;
}
.btn-default{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 6px 4px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.scroll(@name,@width){
    overflow-@{name}:scroll;
    overflow-y: hidden;
    max-width: @width;
    .scroll-bar-hide;
}
.x-scroll(@scroll-name,@scroll-width){
    .scroll(@scroll-name,@scroll-width);
}
.margin(@name,@em){
    @{name}:@em;
    @media (max-width: 850px) {
        @{name}:@em - 2em;
    }
}
.tag(@name,@bgcolor,@fontcolor){
    @{name}:@name;
    color: @fontcolor;
    background: @bgcolor;
    border-color: @bgcolor;
}
.px2rem(@px) {
    font-size: @px / @baseFontSize * 1rem;
    @media @max850 {
        font-size: (@px / @baseFontSize * 1rem) / 1.5;
    }
}
.px2remName(@name,@px){
    @{name}: @px / @baseFontSize * 1rem;
    @media @max850 {
        @{name}: (@px / @baseFontSize * 1rem) / 1.5;
    }
}

.generate-fs(100);
.generate-fs(@n, @i: 12, @base: 1px) when (@i =< @n) {
    .fs-@{i} {
        font-size: (@i / @base);
    }
    .generate-fs(@n,(@i + 1));
}

@r:r;
@t:t;
@b:b;
@l:l;

.generate-mt(100);
.generate-mt(@n, @i:1) when (@i <= @n) {
    .mt-@{i}{
        margin-top: (@i / @n * 100%);
    }
    .generate-mt(@n,(@i + 1));
}
.generate-mr(100);
.generate-mr(@n, @i:1) when (@i <= @n) {
    .mr-@{i}{
        margin-right: (@i / @n * 100%);
    }
    .generate-mr(@n,(@i + 1));
}
.generate-mb(100);
.generate-mb(@n, @i:1) when (@i <= @n) {
    .mb-@{i}{
        margin-bottom: (@i / @n * 100%);
    }
    .generate-mb(@n,(@i + 1));
}
.generate-ml(100);
.generate-ml(@n, @i:1) when (@i <= @n) {
    .ml-@{i}{
        margin-left: (@i / @n * 100%);
    }
    .generate-ml(@n,(@i + 1));
}
.generate-pl(100);
.generate-pl(@n, @i:1) when (@i <= @n) {
    .pl-@{i}{
        padding-left: (@i / @n * 100%);
    }
    .generate-pl(@n,(@i + 1));
}
.generate-pr(100);
.generate-pr(@n, @i:1) when (@i <= @n) {
    .pr-@{i}{
        padding-right: (@i / @n * 100%);
    }
    .generate-pr(@n,(@i + 1));
}
.generate-pt(100);
.generate-pt(@n, @i:1) when (@i <= @n) {
    .pt-@{i}{
        padding-top: (@i / @n * 100%);
    }
    .generate-pt(@n,(@i + 1));
}
.generate-pb(100);
.generate-pb(@n, @i:1) when (@i <= @n) {
    .pb-@{i}{
        padding-bottom: (@i / @n * 100%);
    }
    .generate-pb(@n,(@i + 1));
}

.generate-fw(7);
.generate-fw(@fw, @i:1) when (@i <= @fw) {
    .fw-@{i} {
        font-weight: (@i * 100);
    }
    .generate-fw(@fw,(@i + 1));
}
.generate-zindex(100);
.generate-zindex(@fw, @i:1) when (@i <= @fw) {
    .z-@{i} {
        z-index: (@i * 100);
    }
    .generate-zindex(@fw,(@i + 1));
}
.generate-max-w(4);
.generate-max-w(@fw, @i:1) when (@i <= @fw) {
    .max-w@{i} {
        max-width: (@i * 25%);
    }
    .generate-max-w(@fw,(@i + 1));
}

.generate-opacity(10);
.generate-opacity(@fw, @i:1) when (@i <= @fw) {
    .opacity-@{i} {
        .opacity(@i / 10);
    }
    .generate-opacity(@fw,(@i + 1));
}
.opacity(@opacity) {
    opacity: @opacity;
    // IE8 filter
    @opacity-ie: (@opacity * 100);
    filter: ~"alpha(opacity=@{opacity-ie})";
}

.anviz-btn-size{
    @border-s:1px;

    font-weight: @fw-600;
    padding: @fs-12 @fs-12+8;
    font-size: @fs-16;
    border-radius: @border-s+39;
    border: @border-s solid;
}
.anviz-btn-text-size{
    font-weight: @fw-600;
    padding: @fs-12 @fs-12+8;
    font-size: @fs-16;
    text-decoration: underline !important;
}
.anviz-btn-variant(@color; @background; @border;){
    color: @color;
    background-color: @background;
    border-color: @border;

    &:extend(.btn-default);
    &:extend(.anviz-btn-size);
    
    &:focus,
    &.focus {
        color: @color;
        text-decoration: none;
        background-color: darken(@background, 10%);
            border-color: darken(@border, 25%);
    }
    &:hover {
        color: @color;
        text-decoration: none;
        background-color: darken(@background, 10%);
            border-color: darken(@border, 12%);
    }

    &.disabled,
    &[disabled]{
        &:hover,
        &:focus,
        &.focus {
            text-decoration: none;
            background-color: @background;
            border-color: @border;
        }
    }
}


.btn-variant(@color, @background, @border, @hover-background, @hover-border, @hover-text) {
    &:extend(.btn-default);
    &:extend(.anviz-btn-size);

    color: @color;
    background-color: @background;
    border-color: @border;
  
    &:hover {
        text-decoration: none;
        color: @hover-text;
        background-color: @hover-background;
        border-color: @hover-border;
    }

    &.disabled,
    &[disabled]{
        opacity: .5;
        &:hover,
        &:focus,
        &.focus {
            cursor: not-allowed;
            background-image: none;
            text-decoration: none;
            background-color: @background;
            border-color: @border;
        }
    }
  }

    .text-btn-variant(@color,@hover-color){
        &:extend(.btn-default);
        &:extend(.anviz-btn-text-size);

        color: @color;

        &:hover{
            color: @hover-color;
        }

        &.disabled,
        &[disabled]{
            opacity: .5;
            &:hover,
            &:focus,
            &.focus {
                cursor: not-allowed;
                background-image: none;
            }
        }
    }
    @path: to right;
    .gradient-bg(@path,@color1,@color2) {
        background: linear-gradient(@path,@color1,@color2) !important;
        background: -webkit-linear-gradient(@path,@color1,@color2) !important;
        background: -moz-linear-gradient(@path,@color1,@color2) !important;
        background: -o-linear-gradient(@path,@color1,@color2) !important;
        background: linear-gradient(@path,@color1,@color2) !important;
        background: rgba(29, 32, 138, 1);
        transition: all 0.3s ease-in;
    }
    .btn-bg(@bg-color){
        background-color: @bg-color;
    }