@universal-material/web/tab-bar/tab.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --u-focus-ring-outline-offset: -4px;
    --_tab-height: var(--u-tab-height, 48px);
    display: block;
    flex: 0.5;
    padding-inline: var(--u-tab-padding, 16px);
  }

  .tab-content {
    display: flex;
    flex-direction: var(--_tab-content-direction, column);
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: var(--_tab-height);
    gap: var(--_tab-content-gap, 0);
  }

  .has-icon {
    --_tab-height: var(--u-tab-with-icon-height, 64px);
  }

  :host(.force-focus-ring) .button,
  .button:focus-visible {
    border-radius: var(--u-spacing-small, 8px);
  }

  .label {
    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-tab-label-line-height, var(--u-title-s-line-height, 1.25rem));
    font-size: var(--u-tab-label-font-size, var(--u-title-s-font-size, 0.875rem));
    letter-spacing: var(--u-tab-label-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));
    font-weight: var(--u-tab-label-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));
    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
  }

  .active .icon,
  .active .label {
    color: var(--_active-label-color);
  }
`;
//# sourceMappingURL=tab.styles.js.map