.aw-search {
    background: transparent;
    border-radius: 0.625rem;

    .aw-text-field__element,
    input {
        background: transparent;
        padding-right: 3rem;
        padding-left: 1rem;
        height: 2.875rem;
        border-radius: 0.625rem;
        font-size: 0.875rem;
    }

    input {
        &::placeholder {
            color: var(--c-mono-300);
        }

        &:focus {
            color: var(--c-on-surface);
            background-color: var(--c-surface);
        }
    }

    &:focus-within {
         background: transparent;
    }

    .aw-search__icon-default,
    .aw-search__icon-close {
        color: var(--c-mono-400);
    }
}

@screen lg {
    .aw-search {
        .aw-text-field__element,
        input {
            height: 2.375rem;
        }
    }
}