@import '../variables.sss'
@import '../theme.sss'

%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
        &.center
            align-items: flex-start
            justify-content: flex-start
        &.wrap
            flex-wrap: wrap
    &-row
        flex-direction: row
    &-col
        flex-direction: column
    &-grow
        flex-grow: 1

.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

.bg
    &-none
        background-color: none
    &-primary
        background-color: $primary
    &-dark
        background-color: $dark
    &-light
        background-color: $light

.primary
    color: $primary
.dark
    color: $dark
.light
    color: $light