@universal-material/web/text-field/text-field.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  .prefix::slotted(*),
  .prefix span,
  .suffix::slotted(*),
  .suffix span {
    transition: opacity 150ms 100ms;
  }
  .prefix span:empty,
  .suffix span:empty {
    display: none;
  }

  .prefix::slotted(*),
  .prefix span {
    color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
    margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));
  }

  .suffix::slotted(*),
  .suffix span {
    color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
    margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));
  }

  :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {
    color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-field-disabled-opacity, 38%), transparent)));
  }
  :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {
    color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-field-disabled-opacity, 38%), transparent)));
  }

  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix::slotted(*),
  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix span,
  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix::slotted(*),
  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix span {
    opacity: 0;
    transition: opacity 150ms;
  }
`;
//# sourceMappingURL=text-field.styles.js.map