<style include="diagnostics-shared">
:host-context(body.jelly-enabled) #settingsLink {
font: var(--cros-body-1-font);
}
a[href] {
color: var(--cros-link-color);
text-decoration: none;
}
#settingsIcon {
--iron-icon-height: 20px;
--iron-icon-width: 20px;
fill: var(--cros-icon-color-secondary);
margin-inline-end: 6px;
}
#networkListContainer {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: inherit;
position: relative;
}
#settingsLink {
color: var(--cros-text-color-secondary);
font-family: var(--diagnostics-roboto-font-family);
font-size: 14px;
font-weight: var(--diagnostics-regular-font-weight);
line-height: 20px;
}
.settings-link-container {
align-items: center;
display: flex;
height: 40px;
padding-bottom: 40px;
}
</style>
<div id="networkListContainer" class="diagnostics-network-list-container" tabindex="0">
<div class="diagnostics-cards-container-nav">
<template is="dom-if" if="[[activeGuid]]" restamp>
<connectivity-card class="card-width" active-guid="[[activeGuid]]"
test-suite-status="{{testSuiteStatus}}"
is-active="[[isActive]]">
</connectivity-card>
</template>
<dom-repeat id="networkCardList" items="[[otherNetworkGuids]]" as="guid">
<template>
<network-card class="card-width" guid="[[guid]]">
</network-card>
</template>
</dom-repeat>
</div>
<div class="settings-link-container" hidden$="[[!isLoggedIn]]">
<iron-icon icon="diagnostics:settings" id="settingsIcon"></iron-icon>
<div id="settingsLink" inner-h-t-m-l="[[getSettingsString()]]"></div>
</div>
</div>