// Form single input
//
// Display, on a single row, an input field + fixed-width icon submit button.
//
// White and editorial colors are available to style the button according to its context.
//
// .btnSkin-transparent     - transparent color button
// .btnSkin-sport           - sport color button
// .btnSkin-entertainment   - entertainment color button
// .btnSkin-economy         - economy color button
// .btnSkin-community       - community color button
// .btnSkin-weird           - weird color button
// .btnSkin-partner         - partner color button
// .btnSkin-planet          - planet color button
// .btnSkin-media           - media color button
// .btnSkin-hightech        - hightech color button
//
// Markup: formSingleInput.twig
//
// Weight: 3
//
// Styleguide: Forms.FormSingleInput
.formSingleInput
    position relative

    &-input
        height _rem(36px)
        width 100%

        // this selector need to be stronger than default input selecor
        input&
            _pl(1)
            padding-right _rem(42px)
            border-radius 20em // excessive value to keep it round

    &-btn
        position absolute
        top 0
        right 0
        bottom 0
        width _rem(42px)
        border 1px solid var(--color-bg-tertiary)
        border-radius 0 20em 20em 0 // excessive value to keep it round
        background-color var(--color-bg-tertiary)
        color var(--color-base)

        svg
            _mr(.5)
            font-size _rem(21px)
            height 1em
            width 1em

        &:disabled
            opacity .5

        &:enabled:hover
            filter brightness(90%) contrast(110%)