| <style include="diagnostics-shared diagnostics-fonts"> |
| ::slotted([slot=icon]) { |
| background-color: var(--google-blue-50); |
| border-radius: 50%; |
| color: var(--google-blue-600); |
| height: 26px; |
| left: 5px; |
| margin-left: 20px; |
| margin-right: 28px; |
| padding: 2px; |
| position: relative; |
| width: 20px; |
| } |
| |
| ::slotted([slot=left-panel]) { |
| flex: 1; |
| margin-bottom: 16px; |
| } |
| |
| .card-container { |
| display: flex; |
| flex-direction: column; |
| margin-top: 12px; |
| } |
| |
| .card-header { |
| display: flex; |
| justify-content: space-between; |
| min-height: 25px; |
| } |
| |
| .card-wrapper { |
| border: 1px solid var(--diagnostics-border-color); |
| border-radius: 14px; |
| margin: 10px 0; |
| } |
| |
| .data-points { |
| border-bottom: 1px solid var(--diagnostics-border-color); |
| display: grid; |
| grid-template-columns: 1fr 0fr 1fr 0fr 1fr; |
| padding-inline: var(--data-point-container-padding); |
| } |
| |
| .routine-container { |
| @apply --diagnostics-default-font; |
| } |
| |
| .spacing { |
| margin-bottom: 16px; |
| margin-top: 12px; |
| padding-inline: 20px; |
| } |
| |
| .top-section { |
| border-bottom: 1px solid var(--diagnostics-border-color); |
| display: flex; |
| margin-top: 16px; |
| } |
| </style> |
| <div class="card-container"> |
| <div id="title" class="card-header"> |
| <slot name="title"></slot> |
| <slot name="chip"></slot> |
| </div> |
| <div class="card-wrapper"> |
| <div class="top-section"> |
| <slot name="icon"></slot> |
| <slot name="left-panel"></slot> |
| </div> |
| <div id="body" class="data-points" hidden$="[[hideDataPoints]]"> |
| <slot name="body"></slot> |
| </div> |
| <div id="routines" class="routine-container spacing"> |
| <slot name="routines"></slot> |
| </div> |
| </div> |
| </div> |