*, *:before, *:after { box-sizing: inherit; }

:root {  
    --primary-color:                #{$primary-color};
    --secondary-color:              #{$secondary-color};
    --info-color:                   #{$info-color};
    --success-color:                #{$success-color};
    --warning-color:                #{$warning-color};
    --danger-color:                 #{$danger-color};
    
    --gray-50-color:                #{$gray-50-color};
    --gray-100-color:               #{$gray-100-color};
    --gray-200-color:               #{$gray-200-color};
    --gray-300-color:               #{$gray-300-color};
    --gray-400-color:               #{$gray-400-color};
    --gray-500-color:               #{$gray-500-color};
    --gray-600-color:               #{$gray-600-color};
    --gray-700-color:               #{$gray-700-color};
    --gray-800-color:               #{$gray-800-color};
    --gray-900-color:               #{$gray-900-color};
    
    --white-color:                  #{$white-color};
    --black-color:                  #{$black-color};
    --overlay-color:                #{$overlay-color};
    --transparent-color:            #{$transparent-color};

    --zindex-dropdown:              #{$z-index-dropdown};
    --zindex-sticky:                #{$z-index-sticky};
    --zindex-fixed:                 #{$z-index-fixed};
    --zindex-modal-backdrop:        #{$z-index-modal-backdrop};
    --zindex-modal:                 #{$z-index-modal};
    --zindex-popover:               #{$z-index-popover};
    --zindex-tooltip:               #{$z-index-tooltip};
    --zindex-sidebar:               #{$z-index-sidebar};
    
    --min-width:                    #{$min-width - 20px};
    --font-family-normal:           #{$base-font-family};
    --font-size-normal:             #{$base-font-size};

    @each $key, $val in $tab-font-weight {
        --font-weight-#{$key}:      #{$val};
    }
    
    --gap:                          #{$gutter};
    --responsive-factor:            #{$responsive-factor};
    --line-height:                  #{$line-height-normal};
    --line-height-title:            #{$line-height-title};
    --var-base-border-raduis:       #{$base-border-radius};
    --font-weight-normal:           #{$base-font-weight};
    --font-weight-title:            #{$font-weight-title};
    --font-color-normal:            var(--min-contentgray-700-color);
    --var-bg-color:                 var(--gray-500-color);
    --var-text-color:               var(--white-color);
}


html, body { margin: 0; padding: 0; }


html {
    box-sizing: border-box;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    font-size: var(--font-size-normal);
}


body {
    font-family: var(--font-family-normal);
    font-weight: var(--font-weight-normal);
    color: var(--font-color-normal);
    line-height: var(--line-height);
    min-width: var(--min-width);
}


.container {

    @each $screen in map-keys($tab-screen-container) {

        @if $screen == "sm" {
            --container-max-width: #{$maxwidth-container};
            --container-width: 90%;

            margin: 0 auto !important;
            max-width: var(--container-max-width) !important;
            width: var(--container-width) !important;
        } @else {
            @include media-screen($screen) {
                --container-width: #{map-get($tab-container-size, $screen)};
            }
        }
       
    }

}


.no-style,
.no-style-all a {
    text-decoration: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
}


.no-border {
    border: none !important;
    box-shadow: none !important;
}


.slim { border-radius: 0 !important; }


.round {
    border-radius: $base-border-radius-round !important;
    padding-left: em(26); padding-right: em(26);
}

.circle {
    border-radius: 100% !important;
}


.scia { display: none; }

.sci, .scia {
    font-size: 1.5rem;
    font-style: normal;
}


.active {
    > .sci { display: none; }
    > .scia { display: inline-block; }
}


.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    * {
        line-height: 1.5 !important;
    }
}


.burger {
    &:before, &:after {
        content: "";
    }

    &, &:before, &:after {
        display: inline-flex;
        vertical-align: top;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        height: rem(30);
        width: rem(24);
        background-image: linear-gradient(var(--var-text-color), var(--var-text-color));
        background-position: 50%;
        background-repeat: no-repeat;
        background-origin: content-box;
        background-size: 100% 2px;
    }
}


@each $shadow-num, $shadow-val in $tab-shadow {
    .shadow-#{$shadow-num} {
        box-shadow: $shadow-val !important;
    }
}