::deep .unread-logs-errors-link {
    vertical-align: super;
    --unread-logs-badge-color: #ffffff;
}

::deep .unread-logs-errors-link::part(control) {
    margin-left: 5px;
    padding: 0;
    flex-grow: 0;
    color: #ffffff;
}

::deep .error-counter-badge {
    padding: 1px;
}

/* Forces the grid to always take up the width of its rows,
   and the rows to always take up the width of the cells.
   This fixes a few odd rendering things, but also enables us
   to set overflow-x: clip on the grid to prevent an odd visual
   glitch with the menu when it is at the far right of the viewport
*/
::deep .fluent-data-grid,
::deep .fluent-data-grid-row {
    min-width: min-content;
}

/* Ensures that any popups (e.g. menus) don't overflow past
   the right edge of the grid causing a visual flicker of
   the horizontal scrollbar appearing and disappearing
*/
::deep .fluent-data-grid {
    overflow-x: clip;
}

::deep .resources-name-container {
    height: 24px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}

::deep tr.resource-row > :first-child {
    padding-inline-start: 0;
}

::deep .resources-summary-layout {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    width: 100%;
    grid-template-areas:
        "main"
        "foot";
}

::deep .resource-tabs {
    grid-area: main;
    display: grid;
    grid-template-areas:
        "resources-tab-header"
        "resources-tab-content";
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

::deep .resource-tabs fluent-tabs {
    margin-left: calc(var(--design-unit) * 3px);
}

::deep .resources-grid-container {
    overflow: auto;
    grid-area: resources-tab-content;
}

::deep .resource-tabs .resources-grid-container {
    margin-top: 10px;
}

::deep .resource-graph-container {
    grid-area: resources-tab-content;
    position: relative; /* So graph buttons are position inside the container */
}

::deep .resource-graph-controls {
    position: absolute;
    right: 30px;
    bottom: 30px;
    display: flex;
    column-gap: 10px;
}

::deep .resource-graph .texts {
    cursor: pointer;
}

::deep .resource-graph .nodes {
    cursor: pointer;
}

::deep .resource-name {
    fill: var(--neutral-foreground-rest);
    stroke: var(--fill-color);
    font-size: 15px;
    text-anchor: middle;
    stroke-width: 0.5em;
    paint-order: stroke;
    stroke-linejoin: round;
}

::deep .resource-node {
    stroke: var(--fill-color);
    fill: var(--fill-color);
}

::deep .resource-group-hover .resource-node {
    fill: var(--neutral-fill-hover) !important;
}

::deep .resource-group-selected .resource-scale {
    transform: scale(1.2);
}

::deep .resource-group-selected .resource-node {
    fill: var(--neutral-fill-secondary-rest) !important;
}

::deep .resource-group-selected .resource-node-border {
    stroke: var(--neutral-stroke-hover);
}

::deep .resource-group-highlight .resource-node {
    fill: url(#highlighted-pattern);
}

::deep .resource-group-highlight .resource-node-border {
    stroke: var(--neutral-stroke-hover);
}

::deep .resource-group-hover .resource-node-border {
    stroke: var(--neutral-stroke-hover);
}

::deep .resource-node-border {
    stroke: var(--neutral-stroke-rest);
    stroke-width: 1;
    fill: transparent;
}

::deep .resource-endpoint {
    fill: var(--foreground-subtext-rest);
    font-size: 11px;
    text-anchor: middle;
}

::deep .resource-status-circle {
    fill: var(--fill-color);
}

::deep .resource-link {
    stroke: var(--neutral-stroke-rest);
    stroke-width: 1;
    marker-end: url(#arrow-normal);
}

::deep .arrow-normal {
    fill: var(--neutral-stroke-rest);
}

::deep .arrow-highlight {
    fill: var(--neutral-stroke-hover);
}

::deep .arrow-highlight-expand {
    fill: var(--neutral-stroke-hover);
}

::deep .resource-link-highlight {
    stroke: var(--neutral-stroke-hover);
    stroke-dasharray: 5,5;
    stroke-width: 2;
    marker-end: url(#arrow-highlight);
}

::deep .resource-link-highlight-expand {
    stroke: var(--neutral-stroke-hover);
    stroke-dasharray: 5,5;
    stroke-width: 2;
    marker-end: url(#arrow-highlight-expand);
}

::deep .tab-label > svg {
    margin-right: calc(var(--design-unit) * 1px);
}
