@import "../variables";
@import "../mixins/input-height";
@import "../mixins/transform-scale";

.sg-input-group {
    border: 1px solid $sgInputBorder;
    border-radius: $sg-border-radius-input;
    transition: background-color $animation-default $animation-default-bezier-curve, color $animation-default $animation-default-bezier-curve, border $animation-default $animation-default-bezier-curve;

    &__input-molecule {
        color: $sgInputColor;
        @include sgInputHeight();
        box-shadow: none;
        border: none;
        padding: $sg-padding-input;

        &:focus {
            background-color: $sgTertiaryHover;
        }
    }

    &__prepend {
        &__icon {
            background-color: $white;
            color: $sgInputPlaceholder;
            width: 44px;
        }

        &__divider {
            background-color: $white;

            &__line {
                height: 24px;
                width: 2px;
                background-color: $sgInputBorder;

            }
        }
    }

    &__focus {
        border-color: $sgPrimary;

        .sg-input-group__prepend {
            &__icon {
                background-color: $sgTertiaryHover;
            }

            &__divider {
                background-color: $sgTertiaryHover;

                &__line {
                    background-color: $sgPrimary;

                }
            }
        }

        .sg-input-group-append-button-icon {
            background-color: $sgTertiaryHover;

            &:hover {
                background-color: $sgTertiaryHover !important;
            }
        }
    }

    &__icon {
        .sg-input-group__input-molecule {
            border-left: 0;
        }
    }

    &__error {
        border-color: $sgDanger;
    }

    &__secondary {
        box-shadow: $box-shadow-button;

        .sg-input-group__input-molecule {
            background-clip: unset;
            -webkit-appearance: none;

            &:focus {
                background-color: $white;
            }
        }

        &.sg-input-group__focus {
            .sg-input-group__prepend {
                &__icon {
                    background-color: $white;
                }

                &__divider {
                    background-color: $white;
                }
            }
        }
    }

    &-append-button-icon {
        transition: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding-left: $size-8px;
        padding-right: $size-8px;

        background-color: $white;
        color: $sgInputPlaceholder !important;

        &:hover {
            color: $sgBodyText !important;
            background-color: $white !important;
        }

        &__loading {
            padding-left: $size-3px;
            padding-right: $size-3px;
        }
    }
}