// Label Element
.label
    margin-bottom: .5rem
    @include font("--small", "--gray")

// Input Field
.input
    // @include font("--medium", "dark-gray", 1.4)

    border: none
    background: transparent

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button
        -webkit-appearance: none
        margin: 0

    &[type=number]
        -moz-appearance: textfield

    &.--huge
        @include font("--huge", "--white", 1, "center")

// Textarea Field
.textarea
    resize: none
    padding: .25rem .5rem

    @include font("--medium", "--dark-gray", 1.4)

    border-radius: .25rem
    border: 2px solid transparent
    box-shadow: 0 0 0 .25rem transparent
    background-color: var(--faded-white)

    transition: all 260ms ease
    

    &:focus
        outline: none
        
        border: 2px solid var(--blue)
        box-shadow: 0 0 0 .25rem var(--blue-a20)
        background-color: var(--white)


// Select Field
.select,
.date
    padding: .5rem

    @include font("--default", "--dark-gray", 1)

    border-radius: .25rem
    background-color: var(--faded-white)

// Submit Button
.submit
    display: flex
    justify-content: center
    align-items: center

    width: calc((100% - 1rem) / 2)
    
    padding: .75rem

    @include font("--default", "--white", 1, "center")

    border-radius: .5rem
    border: 2px solid var(--blue)
    background-color: var(--blue)

    kbd
        display: inline-flex
        align-items: center

        margin-left: .5rem
        padding: .25rem

        border-radius: .25rem
        background-color: rgba(255,255,255,.2)

    &.--ghost
        color: var(--blue)
        border-color: var(--blue)
        background: transparent

.switch
    cursor: pointer

    position: relative
    display: flex
    justify-content: flex-start
    align-items: center

    width: 2.675rem
    height: 1.5rem

    padding: .125rem

    border-radius: 3rem
    background-color: var(--gray)

    transition: all 320ms ease

    &[aria-checked="true"]
        background-color: var(--blue)

        & .switch-toggle
            margin-left: 50%

    &-toggle
        display: block

        width: 1.25rem
        height: 1.25rem

        margin-left: 0%

        border-radius: 2rem
        background-color: var(--white)
        box-shadow: 0 2px 2px var(--dark-gray-a20)

        transition: all 320ms ease

    & ~ .label
        margin-bottom: 0
        margin-left: .5rem

        color: var(--light-gray)
    
    & ~ .switch-checkbox
        display: none

    
// A group of than one Input.
.inputs-group
    display: flex
    justify-content: space-between

    margin-top: 1.5rem

    @media screen and ( max-width: 560px )
        flex-direction: column
        gap: 2rem

// A group that consists of an input + a label
.input-group
    display: flex
    flex-direction: column