material-inspired-component-library/dist/divider.css

The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.

:root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none !important}.micl-no-transition{transition:none !important}.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-iconfield{box-sizing:border-box;display:grid;grid-template-columns:48px 1fr;row-gap:var(--md-sys-padding-xl, 24px);background-color:inherit}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--md-sys-divider-thickness: 1px;--md-sys-divider-inset-margin: 16px;--md-sys-divider-space: 4px}body{--md-sys-divider-color: var(--md-sys-color-outline-variant, gray)}.micl-divider,.micl-divider-inset,.micl-divider-inset-start,.micl-divider-inset-end{inline-size:100%;block-size:0;margin-block:calc(var(--md-sys-divider-space, 4px) - .5px) calc(var(--md-sys-divider-space, 4px) - .5px);margin-inline:0;border:none;border-block-start:var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray)}.micl-divider-inset{inline-size:calc(100% - 2*var(--md-sys-divider-inset-margin, 16px));margin-inline:var(--md-sys-divider-inset-margin)}.micl-divider-inset-start{inline-size:calc(100% - var(--md-sys-divider-inset-margin, 16px));margin-inline-start:var(--md-sys-divider-inset-margin, 16px)}.micl-divider-inset-end{inline-size:calc(100% - var(--md-sys-divider-inset-margin, 16px));margin-inline-end:var(--md-sys-divider-inset-margin, 16px)}.micl-divider-vertical{min-block-size:100%;inline-size:0;margin-block:0;margin-inline:calc(2*var(--md-sys-divider-space, 4px));border:none;border-inline-start:var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray)}li.micl-divider{list-style:none;box-shadow:0 calc(-1*var(--md-sys-divider-space, 4px)/2) 0 calc(var(--md-sys-divider-space, 4px)/2) var(--md-sys-list-item-container-color),0 calc(var(--md-sys-divider-space, 4px)/2) 0 calc(var(--md-sys-divider-space, 4px)/2) var(--md-sys-list-item-container-color)}