// ==========================================
// == Luna Framework
// == AUTHOR: CLAUDE MYBURGH
// == URL: http://designbycode.co.za
// ==========================================


.form
    *
        line-height: (12px + $the__button__font__size)

    &__group
        position: relative
        padding-bottom: $the__global__padding
       

    &__label
        @extend .selectable__false
        display: block
        font-weight: 400px
        padding:
            top: 2px
            bottom: 2px

    &__item
        width: 100%
        max-width: 100%
        border: solid 1px $the__form__border__color
        box-shadow: none
        background: #fff
        padding: 4px 8px
        border-radius: $global-border-radius

        &.disabled,
        &[disabled]
            background: $mute-color
            border: solid 1px $mute-border-color
            color: darken($mute-border-color, 5%)
            &:hover
                background: $mute-color
                border: solid 1px $mute-border-color
                color: darken($mute-border-color, 5%)
                box-shadow: none

        &--xs
            padding: 1px 8px
            line-height: (3px + $the__button__font__size)
            font-size: 75%

        &--sm
            padding: 2px 8px
            line-height: (6px + $the__button__font__size)

        &--md
            padding: 4px 8px
            line-height: (12px + $the__button__font__size)

        &--lg
            padding: 8px 8px
            line-height: (16px + $the__button__font__size)

        &--xl
            padding: 16px 8px
            line-height: (24px + $the__button__font__size)

        &__group
            display: flex
            flex-direction: row
            overflow: hidden
            +radius($global-border-radius)

            .addon
                background: $mute-color
                border: solid 1px $the__form__border__color
                color: darken($the__form__border__color, 20%)
                padding: 4px 8px
                font-weight: 400

                > i.lunacon 
                    vertical-align: middle

            input,button,.btn
                +radius(0)

            button.btn, .btn
                min-width: 120px

    &__wrap
        position: relative
        display: flex
        align-items: center
        width: 100%
        max-width: 100%
        border: solid 1px $the__form__border__color
        box-shadow: none
        background: #fff
        padding: 4px 8px
        border-radius: $global-border-radius

        &:focus-within
            outline: none
            border: solid 1px $global-link-color
            box-shadow: rgba($global-link-color, 0.95) 0 0 6px

        & > i 
            min-width: 25px
            margin-right: 5px
            // text-align: center
            //border-right: solid 1px $the__form__border__color

        & > .form__item 
            border: none !important
            outline: none
            box-shadow: none
            text-align: left
            background: transparent
            &:focus
                outline: none !important
                border: none !important
                box-shadow: none !important



    &__helper
        font-size: 75%
        font-weight: 600
        font-style: italic
        display: inline-block
        @extend .selectable__false
        pointer-events: none

    &__horizontal
        +clearfix
        .form__group
            margin-left: -15px
            margin-right: -15px

    &__wrap + .form__select__search
        position: absolute
        left: 0
        z-index: 10
        width: 100%
        background: $mute-color
        padding: 8px
        box-shadow: rgba(#000, 0.25) 0 0 10px
        +radius



    &__select__search

        & > .form__select__list
            max-height: 300px
            overflow-y: scroll
            margin: 0
            padding: 0
            list-style: none

            & .list__item
                border-bottom: 1px solid darken($mute-color, 5%)

            &::-webkit-scrollbar
                background: darken($mute-color, 5%)
                width: 5px
                border: none



input.form__item,
select.form__item,
.form__item
    height: 38px

textarea.form__item
    height: ''
    min-width: 100%
    width: 100%

.has
    @each $key, $value in $_nofiy_colors
        &__#{$key},
        &--#{$key}
            color: $value
            .form__item
                border: solid 1px $value
                outline: none
                &:focus
                    outline: none
                    border: solid 1px $value
                    box-shadow: $value 0 0 6px
            .form__wrap
                border: solid 1px $value
                outline: none
                &:focus-within
                    outline: none   
                    border: solid 1px $value
                    box-shadow: $value 0 0 6px

input:disabled,
button:disabled
    @extend .selectable__false--cursor
    cursor: not-allowed

.form__group__checkbox  
    display: inline-block
    margin-right: $the__global__padding
    
    /* Base for label styling */
    .form__checkbox[type="checkbox"]:not(:checked),
    .form__checkbox[type="checkbox"]:checked 
        position: absolute
        left: -9999px

    .form__checkbox[type="checkbox"]:not(:checked) + label,
    .form__checkbox[type="checkbox"]:checked + label 
        position: relative
        padding-left: $base-font-size  + 5px
        cursor: pointer


    /* checkbox aspect */
    .form__checkbox[type="checkbox"]:not(:checked) + label:before,
    .form__checkbox[type="checkbox"]:checked + label:before
        content: ''
        position: absolute
        left: 0 
        top: $the__form__checkbox__icon__offset__top
        width: $base-font-size  
        height: $base-font-size 
        border: 2px solid $mute-border-color
        background: $mute-color
        border-radius: 4px

    /* checked mark aspect */
    .form__checkbox[type="checkbox"]:not(:checked) + label:after,
    .form__checkbox[type="checkbox"]:checked + label:after 
        content: $the__form__checkbox__icon 
        position: absolute
        top: $the__form__checkbox__checkmark__offset__top
        left: $the__form__checkbox__icon__offset__left
        font-size: $base-font-size - 6px 
        color: $the__form__checkbox__icon__color
        font-family: $the__form__checkbox__icon__font

    /* checked mark aspect changes */
    .form__checkbox[type="checkbox"]:not(:checked) + label.from__label__checkbox:after 
        opacity: 0
        transform: scale(0)

    .form__checkbox[type="checkbox"]:checked + label.from__label__checkbox:after 
        animation: checkin 0.5s forwards

    /* disabled checkbox */
    .form__checkbox[type="checkbox"]:disabled:not(:checked) + label.from__label__checkbox:before,
    .form__checkbox[type="checkbox"]:disabled:checked + label.from__label__checkbox:before 
        border-color: #bbb
        background-color: #ddd
        cursor: not-allowed 

    .form__checkbox[type="checkbox"]:disabled:checked + label.from__label__checkbox:after 
        color: #999

    .form__checkbox[type="checkbox"]:disabled + label.from__label__checkbox 
        color: #aaa

    /* accessibility */
    .form__checkbox[type="checkbox"]:checked:focus + label.from__label__checkbox:before,
    .form__checkbox[type="checkbox"]:not(:checked):focus + label.from__label__checkbox:before 
        border: 2px solid $the__form__checkbox__icon__border__focus__color

    /* hover style just for information */
    label.from__label__checkbox:hover:before 
        border: 2px solid $the__form__checkbox__icon__border__hover__color

    label.from__label__checkbox::selection 
        background: transparent !important

@keyframes checkin 
    0% 
        opacity: 0
        transform: scale(0) 
    50% 
        opacity: 1
        transform: scale(2) 
    100% 
        opacity: 1
        transform: scale(1)