﻿.mp-summary-panel {
    background-color: var(--mud-palette-drawer-background);
    grid-area: summarypanel;
    display: grid;
    grid-template-columns: calc(var(--sg-unit) * 9) max-content minmax(calc(var(--sg-unit) * 10), max-content) calc(var(--sg-unit) * 6) calc(var(--sg-unit) * 6) calc(var(--sg-unit) * 6) auto;
    -webkit-align-items: inherit;
    align-items: center;
}

    .mp-summary-panel img {
        height: calc(var(--sg-unit) * 9);
        mix-blend-mode: multiply;
    }

.mp-device-navigation-button {
    display: flex;
    justify-content: center;
}

    .mp-device-navigation-button button {
        border: none;
    }

        .mp-device-navigation-button button:focus {
            outline: none;
        }

.mp-device-navigation-description {
    padding: 0 var(--sg_lg);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

    .mp-device-navigation-description .instrument {
        font-weight: bold;
    }

.mp-smsa-state-indicator-container {
    display: grid;
    align-content: center;
    justify-items: center;
    border-radius: 50%;
    background-color: var(--mud-palette-warning);
    width: calc(var(--sg-unit) * 5);
    height: calc(var(--sg-unit) * 5);
}

    .mp-smsa-state-indicator-container svg {
        fill: var(--mud-palette-white);
    }

.mp-state-indicator-container {
    display: grid;
    align-content: center;
    justify-items: center;
    border-radius: 50%;
    background-color: var(--mud-palette-gray-dark);
    width: calc(var(--sg-unit) * 5);
    height: calc(var(--sg-unit) * 5);
}

    .mp-state-indicator-container svg {
        fill: var(--mud-palette-white);
    }

.mp-health-indicator-container {
    display: grid;
    align-content: center;
    justify-items: center;
    border-radius: 50%;
    background-color: var(--mud-palette-error);
    width: calc(var(--sg-unit) * 5);
    height: calc(var(--sg-unit) * 5);
}

    .mp-health-indicator-container svg {
        fill: var(--mud-palette-white);
    }

@media (max-width: 740px) {
    .mp-device-navigation-description .instrument {
        display: none;
    }

    .mp-device-navigation-description .separator {
        display: none;
    }
}
