@synergy-design-system/components/dist/styles/index.css

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

/**
 * @synergy-design-system/components version 2.40.0
 * SICK Global UX Foundation
 * 
 * This file is created automatically in the build process!
 * All changes applied will get lost!
 * To recreate it, please use "pnpm build"!
 */
/**
 * This file prevents the flash of unstyled components
 * @see https://web.dev/custom-elements-v1/#styling-a-custom-element
 * @todo: Each component should be defined using its default dimensions.
 *
 * This file is created automatically in the build process!
 * All changes applied will get lost!
 * To recreate it, please use "pnpm build"!
 */
syn-accordion:not(:defined),
syn-breadcrumb:not(:defined),
syn-combobox:not(:defined),
syn-details:not(:defined),
syn-divider:not(:defined),
syn-file:not(:defined),
syn-header:not(:defined),
syn-menu:not(:defined),
syn-menu-item:not(:defined),
syn-menu-label:not(:defined),
syn-nav-item:not(:defined),
syn-option:not(:defined),
syn-prio-nav:not(:defined),
syn-progress-bar:not(:defined),
syn-radio-group:not(:defined),
syn-range:not(:defined),
syn-select:not(:defined),
syn-side-nav:not(:defined),
syn-tab-group:not(:defined),
syn-tab-panel:not(:defined),
syn-textarea:not(:defined),
syn-validate:not(:defined) {
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
syn-alert:not(:defined),
syn-badge:not(:defined),
syn-breadcrumb-item:not(:defined),
syn-button:not(:defined),
syn-button-group:not(:defined),
syn-card:not(:defined),
syn-checkbox:not(:defined),
syn-dialog:not(:defined),
syn-drawer:not(:defined),
syn-dropdown:not(:defined),
syn-icon:not(:defined),
syn-icon-button:not(:defined),
syn-input:not(:defined),
syn-optgroup:not(:defined),
syn-popup:not(:defined),
syn-progress-ring:not(:defined),
syn-radio:not(:defined),
syn-radio-button:not(:defined),
syn-range-tick:not(:defined),
syn-spinner:not(:defined),
syn-switch:not(:defined),
syn-tab:not(:defined),
syn-tag:not(:defined),
syn-tooltip:not(:defined) {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
/**
 * ---------------------------------------------------------------------
 * 🔒 AUTOGENERATED BY VENDORISM
 * Removing this comment will prevent it from being managed by it.
 * ---------------------------------------------------------------------
 */
/* stylelint-disable */
/*
 * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
 * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".syn-"
 * to reduce the possibility of collisions.
 */
@supports (scrollbar-gutter: stable) {
  .syn-scroll-lock {
    scrollbar-gutter: var(--syn-scroll-lock-gutter) !important;
  }

  .syn-scroll-lock body {
    overflow: hidden !important;
  }
}
/** This can go away once Safari has scrollbar-gutter support. */
@supports not (scrollbar-gutter: stable) {
  .syn-scroll-lock body {
    padding-right: var(--syn-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}
.syn-toast-stack {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--syn-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.syn-toast-stack syn-alert {
  margin: var(--syn-spacing-small);
}
.syn-toast-stack syn-alert::part(base) {
  box-shadow: var(--syn-shadow-large);
}
/* stylelint-enable */