/*  COMPONENT: SEARCHBAR
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--searchbar {
        margin-bottom: var(--spacing-l);
    }
    @media (max-width: 480px) {
        .component--searchbar {
            padding: var(--spacing-m);
        }
    }

    .searchbar {
        margin: 0;
    }

    .searchbar .formbody {
        display: flex;
        position: relative;
    }
    .searchbar .widget-text {
        flex: 1;
    }
    .searchbar .text {
        border: var(--border);

        border-radius: var(--border-radius);
        padding: var(--spacing-s) 4rem var(--spacing-s) 1rem;
        line-height: 1.25rem;
        border-radius: 2rem;
        height: 2.625rem;
    }
    .searchbar .text:hover {
        border: var(--border-hover);
    }
    .searchbar .text:focus {
        border: var(--border-active);
    }
    .searchbar .submit {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--size-icon);
        height: var(--size-icon);
        padding: 0;
        border: none;
        border-radius: var(--border-radius);
        font-size: 0;
        background-size: 100%;
        outline: none;
    }
}