@import '../_variables.sss'
@import '../theme.sss'

.w
    &-full
        width: 100%
    &-half
        width: 50%
    
/* Flex box  */
%flexy
    display: flex
    justify-content: center
    align-items: center

.f
    &-row, &-col
        @extend %flexy
        &.start
            align-items: flex-start
            justify-content: flex-start
        &.end 
            align-items: flex-end
            justify-content: flex-end
        &.between
            justify-content: space-between
        &.around
            justify-content: space-around
        &.even
            justify-content: space-evenly
        &.stretch
            align-content: stretch
        &.baseline
            align-items: baseline
        &.stretch
            justify-content: space-stretch
        &.center
            justify-content: center
            align-items: center

        &.wrap
            flex-wrap: wrap
    &-row
        flex-direction: row
    &-col
        flex-direction: column
    &-grow
        flex-grow: 1

/* Borders */
.b
    &-none
        border: none
    &-solid
        border: 1px solid $dark
    &-dot
        border: 1px dotted $dark
    &-solid, &-dot
        &.rounded
            border-radius: $ms-0
        &.invert
            border-color: $light

button
    &:hover
        cursor: pointer
        transition: $transition
    &.b
        &-pill
            padding: $ms-1 $ms-0
            line-height: $ms-1
            text-transform: uppercase

/* Backgrounds */
.bg
    &-none
        background-color: none
    &-primary
        background-color: $primary
    &-dark
        background-color: $dark
    &-light
        background-color: $light
    &-cover
        background-size: cover
    &-contain
        background-size: contain
    &-repeat
        background-repeat: repeat

/* Colors */
.primary
    color: $primary
.dark
    color: $dark
.light
    color: $light

/* Padding */
.p
    &-none
        padding: none
    &-0
        padding: $ms-0
    &-1
        padding: $ms-1
    &-2
        padding: $ms-2
    &h
        &-0
            padding: 0 $ms-0
        &-1
            padding: 0 $ms-1
        &-2
            padding: 0 $ms-2
    &v
        &-0
            padding: $ms-0 0
        &-1
            padding: $ms-1 0
        &-2
            padding: $ms-2 0
    &t
        &-0
            padding-top: $ms-0
        &-1
            padding-top: $ms-1
        &-2
            padding-top: $ms-2
    &b
        &-0
            padding-bottom: $ms-0
        &-1
            padding-bottom: $ms-1
        &-2
            padding-bottom: $ms-2
    &l
        &-0
            padding-left: $ms-0
        &-1
            padding-left: $ms-1
        &-2
            padding-left: $ms-2
    &r
        &-0
            padding-right: $ms-0
        &-1
            padding-right: $ms-1
        &-2
            padding-right: $ms-2

/* Margin */
.m
    &-none
        margin: none
    &-0
        margin: $ms-0
    &-1
        margin: $ms-1
    &-2
        margin: $ms-2
    &h
        &-0
            margin: 0 $ms-0
        &-1
            margin: 0 $ms-1
        &-2
            margin: 0 $ms-2
    &v
        &-0
            margin: $ms-0 0
        &-1
            margin: $ms-1 0
        &-2
            margin: $ms-2 0
    &t
        &-0
            margin-top: $ms-0
        &-1
            margin-top: $ms-1
        &-2
            margin-top: $ms-2
    &b
        &-0
            margin-bottom: $ms-0
        &-1
            margin-bottom: $ms-1
        &-2
            margin-bottom: $ms-2
    &l
        &-0
            margin-left: $ms-0
        &-1
            margin-left: $ms-1
        &-2
            margin-left: $ms-2
    &r
        &-0
            margin-right: $ms-0
        &-1
            margin-right: $ms-1
        &-2
            margin-right: $ms-2

.z
    &-bottom
        position: relative
        z-index: -1
    &-10
        position: relative
        z-index: 10
    &-20
        position: relative
        z-index: 20
    &-30
        position: relative
        z-index: 30
    &-40
        position: relative
        z-index: 40
    &-50
        position: relative
        z-index: 50
    &-top
        position: relative
        z-index: 10001