@universal-material/web/navigation/drawer-item.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    display: block;
    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.5rem);
    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);
  }

  .container {
    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
    line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));
    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));
    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
    height: var(--u-drawer-item-height, 56px);
    padding-inline: var(--_drawer-item-padding);
    margin-inline: calc(var(--_drawer-item-padding) * -1);
    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));
    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
  }
  .container:not(.has-icon) .icon, .container:not(.has-badge) .badge {
    display: none;
  }

  :host(.active) .container,
  :host([active]) .container {
    background-color: var(--u-drawer-item-label-active-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
    color: var(--u-drawer-item-label-active-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
  }

  .icon {
    display: flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    font-size: var(--_drawer-item-icon-size);
    line-height: 1em;
    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);
  }

  .badge {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline-start: auto;
    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);
  }

  .content {
    justify-content: flex-start;
  }
`;
//# sourceMappingURL=drawer-item.styles.js.map