.form-control {
    @include form-input($fs: var(--fs-14), $color: #9199A1, $py: 0.75rem, $max_width: rem(600px), $mx: auto, $border-color: #EDEAE9, $radius-size: 0.625rem);

    @include focus {
        background: white;
        box-shadow: none !important;
        border: 1px solid #4c4cf1 !important;
        border-radius: 0.625rem;
        box-sizing: border-box !important;
        line-height: unset !important;

        ~.search-icon {
            background: var(--clr-blue);
            --search-icon: var(--clr-white);
            .dashicons {
                color: #fff;
            }
        }
    }
}

.easydocs-search-form {
    position: relative;
    max-width: rem(600px);
    flex: 1;
    @include margin(mx, auto);

    input, input[type="search"] {
        color: #000;
        padding: 10px 15px 10px 40px;
        border: 1px solid #EDEAE9;
        border-radius: 0.625rem;
        box-sizing: border-box;
        line-height: unset;
        background-color: #fff;
    }

    .search-icon {
        position: absolute;
        -webkit-transition: 0.3s ease-out;
        transition: 0.3s ease-out;
        left: 15px;
        transform: translateY(50%);
    }

    input[type="search"] {
        // Hide the native clear control – we render our own.
        &::-webkit-search-cancel-button {
            display: none;
        }
    }

    .easydocs-search-clear {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #9199a1;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;

        .dashicons {
            font-size: 16px;
            width: 16px;
            height: 16px;
            line-height: 1;
        }

        &:hover,
        &:focus {
            background: #f0f0f5;
            color: #4c4cf1;
            outline: none;
        }
    }
}