// https://m3.material.io/components/search/specs

.sd-search {
    background: var(--md-sys-color-surface-container-high);
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    text-wrap: nowrap;
    max-width: 100%;

    &-leading_icon {
        margin-left: 0.5rem;
    }
    &-trailing_icon {
        margin-right: 0.5rem;
    }

    &-leading_icon,
    &-trailing_icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    &-supporting_text {
        all: unset;
        height: 100%;
        margin: 1rem 1rem;
        flex-shrink: 1;
        min-width: 0;
        color: var(--md-sys-color-on-surface);
        &::placeholder {
            color: var(--md-sys-color-on-surface-variant);
            font-size: 1rem;
        }
    }

    &[data-sd='bar'] {
        border-radius: 2rem;
    }
    &[data-sd='view'] {
        border-radius: 0;
        border-bottom: 1px solid var(--md-sys-color-outline);
    }
}