//
// 常用类
// ============================================================


// display
// ------------------------------------------------------------
@each $styleVal in (none, block, flex)
    @if $styleVal != "none"
        .display-#{$styleVal}
            display: $styleVal

        .display-inline-#{$styleVal}
            display: inline-#{$styleVal}
    @else
        .display-#{$styleVal}
            display: $styleVal


// position
// ------------------------------------------------------------
@each $val in (relative, absolute, fixed)
    .position-#{$val}
        position: $val


// top、right、bottom、left、float
// ------------------------------------------------------------
@each $val in (top, right, bottom, left)
    .#{$val}-50
        #{$val}: 50%

    .#{$val}
        #{$val}: 0

    @if $val == "right"
        .float-#{$val}
            float: #{$val}


    @if $val == "left"
        .float-#{$val}
            float: #{$val}


// float
// ------------------------------------------------------------
.line-height-1
    line-height: 1


// float
// ------------------------------------------------------------
.clear-both
    zoom: 1
    &:after
        content: ''
        display: block
        clear: both


// overflow
// ------------------------------------------------------------
.overflow-x-hidden
    overflow-x: hidden

.overflow-y-auto
    overflow-y: auto

.overflow-hidden
    overflow: hidden

.overflow-auto
    overflow: auto


// margin、padding
// ------------------------------------------------------------
+margin-padding(margin)
+margin-padding(padding)

.code
    @extend .display-inline-block
    @extend .margin-right-sm
    @extend .margin-left-sm
    @extend .padding-right-sm
    @extend .padding-left-sm
    @extend .font-size
    @extend .color-gray
    +px(line-height, 18px)
    background: #ebebeb


// opacity
// ------------------------------------------------------------
.opacity-0
    opacity: 0

.opacity-1
    opacity: 1

// cursor
// ------------------------------------------------------------
.cursor-pointer
    cursor: pointer

    
// transition
// ------------------------------------------------------------
.transition-1s
    transition: $timing-function 1s


// animation
// ------------------------------------------------------------
.animation-fill-mode-forwards
    animation-fill-mode: forwards !important

.animation-timing-function-fill-mode
    @extend .animation-fill-mode-forwards
    animation-timing-function: $timing-function !important


// alert
// ------------------------------------------------------------
.alert-content-z-index
    z-index: $alert-content-z-index

.modal-shade
    @extend .position-fixed
    @extend .top
    @extend .left
    @extend .col-12
    @extend .transition-1s
    z-index: $modal-shade-z-index
    height: 100%
    background: rgba(0, 0, 0, 0)
    &.active
        background: rgba(0, 0, 0, .5)


// from
// ------------------------------------------------------------
.input-height
    +px(height, 36px)
    +px(line-height, 36px)

.disabled
    color: $color-gray-light !important
    border-color: #ebebeb !important
    background: #ebebeb !important
    cursor: no-drop !important
    &:hover, &:active, &.active
        @extend .disabled

    .iconfont
        color: $color-gray-light !important
        cursor: no-drop !important

[disabled], [readonly]
    @extend .disabled


// 滚动条
// ------------------------------------------------------------
.webkit-scrollbar
    @extend .overflow-auto
    &::-webkit-scrollbar
        +px(width, $scroll-width)

    &::-webkit-scrollbar-track
        background: $scrollbar-track-color

    &::-webkit-scrollbar-thumb
        background: $scrollbar-thumb-color