@sandlada/mdc/build/components/search/search-bar.style.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{css as e,unsafeCSS as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import"../../node_modules/lit/index.js";import{defineVars as n}from"../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{SearchBarDefinition as i}from"../../component-definitions/search.definition.js";const a=r(i,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-search-bar`}),o=t(n(a,!0).join(``)),s=e`
    :host { ${o}; }

    :host {
        display: contents;
        vertical-align: top;
        -webkit-tap-highlight-color: transparent;
        background: transparent;
    }

    .search {
        position: relative;
        z-index: 0;
        display: flex;
        align-items: center;
        min-width: var(--_container-width-minimum);
        max-width: var(--_container-width-maximum);
        height: var(--_container-height);
        padding-inline-start: var(--_container-inline-leading-space);
        padding-inline-end: var(--_container-inline-trailing-space);
        padding-block-start: var(--_container-block-leading-space);
        padding-block-end: var(--_container-block-trailing-space);
        border-start-start-radius: var(--_container-shape-start-start);
        border-start-end-radius: var(--_container-shape-start-end);
        border-end-start-radius: var(--_container-shape-end-start);
        border-end-end-radius: var(--_container-shape-end-end);
        background: transparent;
    }

    .background {
        position: absolute;
        border-radius: inherit;
        inset: 0;
        z-index: -1;
        background: var(--_enabled-container-color);
    }

    .icon {
        fill: currentColor;
    }
    .leading-icon,
    ::slotted([slot='leading-icon']) {
        fill: currentColor;
        color: var(--_enabled-leading-icon-color);
    }
    .trailing-icon,
    ::slotted([slot='trailing-icon']) {
        fill: currentColor;
        color: var(--_enabled-trailing-icon-color);
    }
    .search:not(.has-avatar) .avatar {
        color: var(--_enabled-trailing-icon-color);
    }

    .search.has-leading-icon .input {
        margin-inline-start: var(--_leading-icon-and-label-between-space);
    }
    .search.has-trailing-icon .input {
        margin-inline-end: var(--_trailing-icon-and-label-between-space);
    }
    .search:not(.has-leading-icon) .leading-icon {
        display: none;
    }
    .search:not(.has-trailing-icon) .trailing-icon {
        display: none;
    }
    .search.hide-avatar .avatar {
        display: none;
    }
    .search.hide-avatar slot[name='avatar']::slotted(*) {
        display: none;
    }
    .search:not(.hide-avatar) .trailing-icon {
        margin-inline-end: var(--_trailing-icon-and-label-between-space);
    }

    .trailing-icon {
        display: flex;
        gap: var(--_trailing-icons-between-space);
        align-items: center;
    }

    .input {
        all: unset;
        height: 100%;
        width: 100%;
        color: var(--_enabled-input-text-color);
        font-family: var(--_input-text-font);
        line-height: var(--_input-text-line-height);
        font-size: var(--_input-text-size);
        font-weight: var(--_input-text-weight);
        letter-spacing: var(--_input-text-tracking);
    }
    .input:placeholder-shown {
        color: var(--_enabled-supporting-text-color);
        font-family: var(--_supporting-text-font);
        line-height: var(--_supporting-text-line-height);
        font-size: var(--_supporting-text-size);
        font-weight: var(--_supporting-text-weight);
        letter-spacing: var(--_supporting-text-tracking);
    }
    .input:placeholder-shown,
    .input:-webkit-autofill,
    .input:-webkit-autofill:focus {
        background: transparent;
    }
    .input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px var(--_container-height) var(--_enabled-container-color) inset !important;
        -webkit-text-fill-color: var(--_enabled-input-text-color);
    }
    .touch-target {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .avatar {
        all: unset;
        cursor: pointer;
        position: relative;
        /* height: max(48px, var(--_avatar-size));
        width: max(48px, var(--_avatar-size)); */
        display: flex;
        align-items: center;
        justify-content: center;
        border-start-start-radius: var(--_avatar-shape-start-start);
        border-start-end-radius: var(--_avatar-shape-start-end);
        border-end-start-radius: var(--_avatar-shape-end-start);
        border-end-end-radius: var(--_avatar-shape-end-end);

        &>mdc-ripple {
            border-radius: 50%;
            inset: unset;
            height: max(40px, var(--_avatar-size));
            width: max(40px, var(--_avatar-size));
            z-index: -1;
        }
    }
    .avatar-icon {
        fill: currentColor;
        inline-size: var(--_avatar-size);
        block-size: var(--_avatar-size);
    }
`;export{s as searchBarStyle};
//# sourceMappingURL=search-bar.style.js.map