@import "~scss/variables";

.sw-simple-search-field {
    position: relative;
    outline: none;

    .sw-field.sw-simple-search-field__input {
        margin-bottom: 0;
    }

    .sw-simple-search-field__input.sw-simple-search-field--default {
        .sw-block-field__block {
            border: none;
            box-shadow: none;
        }

        input {
            border-radius: 24px;
            background-color: $color-gray-100;
        }

        &.sw-field--default {
            input {
                padding: 13px 17px;
            }
        }

        &.sw-field--medium {
            input {
                padding: 9px 17px;
            }
        }

        &.sw-field--small {
            input {
                padding: 5px 17px;
            }
        }
    }

    .sw-simple-search-field__input.sw-simple-search-field--inverted {
        .sw-block-field__block {
            border: 1px solid $color-gray-300;
            box-shadow: 0 0 4px $color-gray-50;
        }

        &.has--error {
            border: 1px solid $color-gray-300;
            box-shadow: 0 0 4px $color-gray-50;
        }

        &.has-focus {
            border: 1px solid $color-gray-300;
            box-shadow: 0 0 4px $color-gray-50;
        }

        input {
            background-color: $color-gray-100;
        }
    }

    .sw-simple-search-field__search-icon,
    .sw-icon {
        color: $color-gray-700;
        transform: translate(0, -50%);
        position: absolute;
        right: 18px;
        top: 50%;
    }
}
