@kit-data-manager/pid-component/dist/collection/components/pid-collapsible/collapsible.css

The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.

details summary::-webkit-details-marker{display:none}pid-collapsible.resize-both{resize:both!important;overflow:auto!important;max-width:100%!important;will-change:width,height;transition:none!important}pid-collapsible[expanded]{position:absolute;z-index:50;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){pid-collapsible details{display:flex!important;flex-direction:column!important}pid-collapsible details summary{display:block!important}pid-collapsible.resize-both{-webkit-resize:both!important;resize:both!important;overflow:auto!important;position:relative!important}pid-collapsible.resize-both:after{content:"";position:absolute;bottom:0;right:0;width:15px;height:15px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100% 100%;cursor:nwse-resize;z-index:10;pointer-events:none}}}pid-collapsible.resize-both:after{content:"";position:absolute;bottom:0;right:0;width:15px;height:15px;cursor:nwse-resize;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100% 100%;z-index:10;pointer-events:none}@supports (-webkit-appearance:none) and (not (display:-webkit-box)){pid-collapsible.resize-both{resize:both!important;overflow:auto!important;display:block!important;position:relative!important}pid-collapsible.resize-both:before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none;z-index:-1}}@supports (-webkit-appearance:none){pid-collapsible details{display:-webkit-box!important;display:-webkit-flex!important;display:flex!important;-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-webkit-flex-direction:column!important;flex-direction:column!important;min-height:100%}}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){pid-collapsible{-webkit-transform:translateZ(0);transform:translateZ(0)}pid-collapsible.resizing{pointer-events:none;contain:layout size}pid-collapsible.resize-both{-webkit-resize:both!important}pid-collapsible.resize-both:after{content:"";position:absolute;bottom:0;right:0;width:15px;height:15px;cursor:nwse-resize;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100% 100%;z-index:10;pointer-events:none}}:root{--z-back:-1;--z-resize:10;--z-content:20;--z-footer:30;--z-header:50}:host{display:block;--initial-width:500px;--initial-height:300px;--min-width:300px;--min-height:200px}@media (max-width:768px){:host{--initial-width:400px;--min-width:250px}}@media (max-width:480px){:host{--initial-width:300px;--min-width:200px}}@media (prefers-contrast:more){pid-collapsible summary{border:1px solid}pid-collapsible.resize-both:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='3' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");opacity:.9}}@media print{pid-collapsible.resize-both{resize:none!important}pid-collapsible.resize-both:after{display:none!important}}pid-collapsible summary:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}pid-collapsible .overflow-visible,pid-pagination .overflow-visible{overflow:visible!important}