@import './_var'

.form
    --inputsize: 42px
    --labelbefore: #666
    --labelafter: #606060
    // --borderbefore: var(--litewhite)
    --borderbefore: #666
    --borderafter: var(--gradient-a)
    --labelfontbefore: 16px
    --labelfontafter: 12px
    --font: 500
    --color: var(--black)
    --borderwidth: 1px
    --labelbackground: none
    --font: normal
    --textareaheight: 86px
    --paddingleftright: 0px
    .sbmt-grp
        margin-top: 20px
    .form-group
        position: relative
        flex: 0 1 100%
        max-width: 100%
        width: 100%
        --selectheight: var(--inputsize)
        line-height: 0
        &.has-icon
            input
                --iconsize: 18px
                background-repeat: no-repeat
                background-position: calc(100% - var(--paddingleftright, 0px)) 50%
                padding-right: calc(var(--paddingleftright,0px) + var(--iconsize,0px) + var(--paddingleftright,0px))
            &.calender-icon
                input
                    background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17.5 2H14.5V0.5C14.5 0.367392 14.4473 0.240215 14.3536 0.146447C14.2598 0.0526785 14.1326 0 14 0C13.8674 0 13.7402 0.0526785 13.6464 0.146447C13.5527 0.240215 13.5 0.367392 13.5 0.5V2H6.5V0.5C6.5 0.367392 6.44732 0.240215 6.35355 0.146447C6.25979 0.0526785 6.13261 0 6 0C5.86739 0 5.74021 0.0526785 5.64645 0.146447C5.55268 0.240215 5.5 0.367392 5.5 0.5V2H2.5C1.8372 2.00079 1.20178 2.26444 0.73311 2.73311C0.264441 3.20178 0.000793929 3.8372 0 4.5V17.5C0.000793929 18.1628 0.264441 18.7982 0.73311 19.2669C1.20178 19.7356 1.8372 19.9992 2.5 20H17.5C18.163 20 18.7989 19.7366 19.2678 19.2678C19.7366 18.7989 20 18.163 20 17.5V4.5C20 3.83696 19.7366 3.20107 19.2678 2.73223C18.7989 2.26339 18.163 2 17.5 2ZM19 17.5C19 17.8978 18.842 18.2794 18.5607 18.5607C18.2794 18.842 17.8978 19 17.5 19H2.5C2.10218 19 1.72064 18.842 1.43934 18.5607C1.15804 18.2794 1 17.8978 1 17.5V9H19V17.5ZM19 8H1V4.5C1 3.672 1.67 3 2.5 3H5.5V4.5C5.5 4.63261 5.55268 4.75979 5.64645 4.85355C5.74021 4.94732 5.86739 5 6 5C6.13261 5 6.25979 4.94732 6.35355 4.85355C6.44732 4.75979 6.5 4.63261 6.5 4.5V3H13.5V4.5C13.5 4.63261 13.5527 4.75979 13.6464 4.85355C13.7402 4.94732 13.8674 5 14 5C14.1326 5 14.2598 4.94732 14.3536 4.85355C14.4473 4.75979 14.5 4.63261 14.5 4.5V3H17.5C17.8978 3 18.2794 3.15804 18.5607 3.43934C18.842 3.72064 19 4.10218 19 4.5V8Z" fill="%23666666" fill-opacity="0.7"/%3E%3C/svg%3E')
            &.search-icon
                input
                    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.893 13.92L16.973 17M16 8.5C16 10.4891 15.2098 12.3968 13.8033 13.8033C12.3968 15.2098 10.4891 16 8.5 16C6.51088 16 4.60322 15.2098 3.1967 13.8033C1.79018 12.3968 1 10.4891 1 8.5C1 6.51088 1.79018 4.60322 3.1967 3.1967C4.60322 1.79018 6.51088 1 8.5 1C10.4891 1 12.3968 1.79018 13.8033 3.1967C15.2098 4.60322 16 6.51088 16 8.5Z' stroke='%23939393' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
        &.active
            &::after
                width: 100%
        &::before,&::after
            content: ''
            position: absolute
            bottom: 0
            left: 0
            right: 0
            height: var(--borderwidth)
            transition: .5s ease
        &::before
            background: var(--borderbefore)
        &::after
            width: 0
            background: var(--borderafter)
        label
            font-weight: var(--font)
            position: absolute
            top: calc((var(--inputsize) / 2) - (var(--labelfontbefore) / 2))
            left: var(--paddingleftright)
            color: var(--labelbefore)
            line-height: 1
            font-size: var(--labelfontbefore)
            background: var(--labelbackground)
            transition: .3s ease
            user-select: none
            pointer-events: none
        input,textarea
            height: calc(var(--inputsize) - var(--borderwidth))
            border: none
            resize: none
            border-radius: 0px !important
            width: 100%
            background: none
            color: var(--black)
            font-size: inherit
            font-family: $Poppins !important
            padding: 0 var(--paddingleftright)
            &:focus
                outline: none
            &.valid
                outline: none
                & ~ label
                    font-size: var(--labelfontafter)
                    color: #000
                    top: calc(var(--labelfontafter) / -1)
                    // background: var(--labelbackground)
            &:not(:placeholder-shown)
                & ~ label
                    font-size: var(--labelfontafter)
                    color: #000
                    top: calc(var(--labelfontafter) / -1)
                    // background: var(--labelbackground)
            &:not(.no-focus)
                &:focus
                    outline: none
                    & ~ label
                        font-size: var(--labelfontafter)
                        color: var(--black)
                        top: calc(var(--labelfontafter) / -1)
                        // background: var(--labelbackground)
            &[readonly]
                caret-color: transparent
        textarea
            height: var(--textareaheight)
            border: none
            resize: none
            border-radius: 0px !important
            width: 100%
            background: none
            color: var(--black)
            font-size: inherit
            font-family: inherit
            line-height: 1.2
            cursor: initial
            @include scrollbar(2px,none,$black,15px)
            padding: 0 var(--paddingleftright)
            padding-right: 15px
            &:focus,&.valid
                outline: none
                margin-top: 13px
                height: calc(var(--textareaheight) - 13px)
        select
            &:focus
                outline: none
            & ~ label
                position: absolute
                top: calc(var(--labelfontafter) / -2)
                left: var(--paddingleftright)
                color: var(--labelafter)
                translate: 0 0
                font-size: var(--labelfontafter)
                opacity: 0
                transition: .6s ease
                // background: var(--labelbackground)
            &.valid
                color: var(--color)
                & ~ label
                    opacity: 1
        .error
            position: absolute
            top: calc(100% + 3px)
            left: 0
            right: 0
            color: red
            line-height: normal
            font-size: 12px
        &.file-input
            input[type="file"]
                position: absolute
                top: 0
                left: 0
                right: 0
                bottom: 0
                width: 100%
                height: 100%
                opacity: 0
                z-index: 4
                cursor: pointer
            .file-name
                pointer-events: none
                height: calc(var(--inputsize) - var(--borderwidth))
                position: relative
                --filename: 'Attach Resume*'
                --filenameinitial: var(--filename)
                --color: var(--text)
                --background: none
                --image: url(../../icon/clip-gray.svg) no-repeat
                appearance: none
                line-height: calc(var(--inputsize) - var(--borderwidth))
                &::before,&::after
                    position: absolute
                    top: 0
                    bottom: 0
                    left: 0
                    right: 0
                &::before
                    // content: var(--filenameinitial)
                    z-index: 2
                    font-family: inherit
                    font-size: inherit
                    line-height: calc(var(--inputsize) - var(--borderwidth))
                    padding-left: var(--paddingleftright)
                    color: var(--color)
                    width: 80%
                    overflow: hidden
                    text-overflow: ellipsis
                    background: none
                &::after
                    content: ''
                    right: 0
                    background: var(--image)
                    background-repeat: no-repeat
                    z-index: 1
                    background-position: calc(100% - var(--paddingleftright,0)) 50%
                    background-size: auto 50%
    .submit-grp
        &:not(.text-left)
            text-align: center
            margin-top: 23px
.custom-select
    max-width: 100%
    cursor: pointer
    display: block
    font-family: inherit
    height: var(--inputsize)
    position: relative
    transition: all .2s ease-in-out
    user-select: none
    white-space: nowrap
    padding: 0 var(--paddingleftright)
    --arrow: 15px
    --arrowspace: 8px
    --iconpath: url(../../icon/location-primary.svg)
    &.has-icon
        --iconsize: 12px
        --iconurl: var(--iconpath)
        --iconspace: 8px
        @include after
        &::after
            left: var(--paddingleftright, 0px)
            width: var(--iconsize)
            background-image: var(--iconurl)
            background-repeat: no-repeat
            background-size: 100% auto
            background-position: 0 50%
        .current
            padding-left: calc(var(--iconsize) + var(--iconspace))
            padding-right: calc(var(--arrow) + var(--iconsize) + var(--arrowspace) + var(--iconspace))
    &::before
        content: ''
        position: absolute
        top: 0
        right: var(--paddingleftright ,0)
        bottom: 0
        width: var(--arrow)
        background-image: url(../../icon/arrow.svg)
        background-position: 0 50%
        background-repeat: no-repeat
        background-size: 100% auto
        filter: brightness(0.4)
    .current
        display: block
        width: 100%
        overflow: hidden
        text-overflow: ellipsis
        line-height: var(--inputsize)
        color: var(--text)
        font-size: var(--labelfontbefore)
        font-weight: var(--font)
        padding-right: calc(var(--arrow) + var(--arrowspace))
        &.selected
            color: var(--white)
    .list
        text-align: left
        background-color: #fff
        box-shadow: rgba(0,0,0,.16) 0px 1px 4px
        overflow: hidden
        position: absolute
        top: 100%
        left: 0
        right: 0
        opacity: 0
        transform-origin: 50% 0
        z-index: 4
        max-height: 180px
        overflow-y: auto
        border-bottom-left-radius: 10px
        border-bottom-right-radius: 10px
        @include scrollbar(4px,none,$text,5px)
        pointer-events: none
        li
            display: block
            line-height: 1.2
            padding: 8px 16px
            white-space: break-spaces
            font-size: 14px
            &.selected
                background: $secondary
                color: $white
                &:hover
                    background: $secondary
                    color: $white
            &:hover
                background: #e2e2e2
    &.open
        .list
            opacity: 1
            pointer-events: auto
            transform: scale(1) translateY(0)