.input
    position: relative
    display: flex
    height: 42px
    margin-bottom: $margin
    >input[type="file"]
        display: none
    >input[type="file"] + label
        cursor: pointer

    >input[type="file"] + label
    >input
        display: block
        padding: $padding
        border-radius: $border-radius
        font-size: $font-default
        line-height: 1em
        border-width: 1px
        border-style: solid
        border-color: $gray
        text-align: $start-direction
        -webkit-appearance: none
        color: $dark
        margin: 0
        width: 100%
        &::placeholder
            color: $gray
        &:focus
            outline: 0
            border-color: $mainColor
            + .icon
                _icon-color: $mainColor

    >.icon
        position: absolute
        top: 0
        {$end-direction}: $padding
        height: 100%
        _icon-color($gray)
        >svg
            height: 100%
        >span
        >i
            line-height: 100%

    .button
        border-top-{$start-direction}-radius: 0
        border-bottom-{$start-direction}-radius: 0
        border-{$start-direction}: 0
        margin-bottom: 0

    .addon
        padding: $padding
        border: 1px solid $gray
        border-top-{$start-direction}-radius: $border-radius
        border-bottom-{$start-direction}-radius: $border-radius
        border-{$end-direction}: 0
        background-color: $gray
        _icon-color($white)


    &.is-rounded
        >input[type="file"] + label
        >input
            border-radius: 50px
            padding-{$start-direction}: multiple($padding, 2)

        >.button
            border-top-{$end-direction}-radius: 42px
            border-bottom-{$end-direction}-radius: 42px

        >.addon
            border-top-{$start-direction}-radius: 42px
            border-bottom-{$start-direction}-radius: 42px

    &.is-button
        >input[type="file"] + label
        >input
            border-top-{$end-direction}-radius: 0
            border-bottom-{$end-direction}-radius: 0

    &.is-addon
        >input[type="file"] + label
        >input
            border-top-{$start-direction}-radius: 0
            border-bottom-{$start-direction}-radius: 0
            padding: $padding