.wynd-shop-kit .wynd-search {
    align-items: center;
    display: flex;
    justify-content: var(--wynd-search-align, flex-start);
}

.wynd-shop-kit .wynd-search__box {
    max-width: 100%;
    position: relative;
    width: var(--wynd-search-width, 260px);
}

.wynd-shop-kit .wynd-search .wynd-search__input {
    cursor: text;
    padding-block: var(--wynd-search-pt, var(--padding-input-y)) var(--wynd-search-pb, var(--padding-input-y));
    padding-inline: calc(
            var(--wynd-search-pl, var(--padding-input-x)) + var(--wynd-search-icon-size, 16px) + var(--spacing-xs)
        )
        var(--wynd-search-pr, var(--padding-input-x));
    width: 100%;
}

.wynd-shop-kit .wynd-search__input::-webkit-search-cancel-button,
.wynd-shop-kit .wynd-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.wynd-shop-kit .wynd-search__input::-ms-clear {
    display: none;
}

.wynd-shop-kit .wynd-search__icon {
    align-items: center;
    color: var(--wynd-search-icon-color, inherit);
    display: inline-flex;
    font-size: var(--wynd-search-icon-size, 16px);
    inset-inline-start: var(--wynd-search-pl, var(--padding-input-x));
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.wynd-shop-kit .wynd-search__icon i {
    font-size: inherit;
}

.wynd-shop-kit .wynd-search__icon svg {
    fill: currentColor;
    height: 16px;
    width: 16px;
}

.wynd-shop-kit .wynd-search__toggle,
.wynd-shop-kit .wynd-search__submit {
    align-items: center;
    border: 0;
    cursor: pointer;
    display: none;
    justify-content: center;
}

.wynd-shop-kit .wynd-search__toggle {
    font-size: var(--wynd-search-icon-size, 16px);
    padding: var(--padding-input-y);
}

.wynd-shop-kit .wynd-search__submit {
    font-size: var(--wynd-search-submit-size, 16px);
    inset-inline-end: var(--wynd-search-pr, var(--padding-input-x));
    padding: var(--spacing-xs);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition:
        background-color var(--transition-default),
        border-color var(--transition-default),
        color var(--transition-default);
    right: var(--spacing-xs);
}

.wynd-shop-kit .wynd-search .wynd-search__toggle {
    background: none;
    color: var(--wynd-search-icon-color, inherit);
}

.wynd-shop-kit .wynd-search .wynd-search__submit {
    background-color: var(--wynd-search-submit-bg, transparent);
    color: var(--wynd-search-submit-color, inherit);
}

.wynd-shop-kit .wynd-search .wynd-search__submit:hover {
    background-color: var(--wynd-search-submit-bg-hover, var(--wynd-search-submit-bg, transparent));
    color: var(--wynd-search-submit-color-hover, var(--wynd-search-submit-color, inherit));
}

.wynd-shop-kit .wynd-search__toggle i,
.wynd-shop-kit .wynd-search__submit i {
    font-size: inherit;
}

.wynd-shop-kit .wynd-search__toggle svg,
.wynd-shop-kit .wynd-search__submit svg {
    fill: currentColor;
    height: 16px;
    width: 16px;
}

.wynd-shop-kit .wynd-search__sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (min-width: 1025px) {
    .wynd-shop-kit .wynd-search.has-value .wynd-search__submit {
        display: inline-flex;
    }

    .wynd-shop-kit .wynd-search.has-value .wynd-search__input {
        padding-inline-end: calc(
            var(--wynd-search-pr, var(--padding-input-x)) + var(--wynd-search-submit-size, 16px) + var(--spacing-xs)
        );
    }
}

@media (max-width: 1024px) {
    .wynd-shop-kit .wynd-search__toggle {
        display: inline-flex;
    }

    .wynd-shop-kit .wynd-search__box {
        inset-block-start: var(--wynd-search-overlay-top, 0);
        inset-inline-end: var(--wynd-search-overlay-right, 0);
        inset-inline-start: var(--wynd-search-overlay-left, 0);
        opacity: 0;
        position: fixed;
        transition:
            opacity var(--transition-default),
            visibility var(--transition-default);
        visibility: hidden;
        width: auto;
        z-index: 1001;
    }

    .wynd-shop-kit .wynd-search.is-open .wynd-search__box {
        opacity: 1;
        visibility: visible;
    }

    .wynd-shop-kit .wynd-search.is-open .wynd-search__toggle {
        display: none;
    }

    .wynd-shop-kit .wynd-search.is-open.has-value .wynd-search__submit {
        display: inline-flex;
    }

    .wynd-shop-kit .wynd-search.is-open .wynd-search__input {
        padding-inline-end: calc(
            var(--wynd-search-pr, var(--padding-input-x)) + var(--wynd-search-submit-size, 16px) + var(--spacing-lg)
        );
    }

    .wynd-shop-kit .wynd-search::before {
        background-color: var(--wynd-search-backdrop, rgba(0, 0, 0, 0.4));
        content: '';
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity var(--transition-default);
        z-index: 1000;
    }

    .wynd-shop-kit .wynd-search.is-open::before {
        opacity: 1;
        pointer-events: auto;
    }
}