:host {
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;

    >* {
        user-select: none;
    }
}

.mat-sidenav {
    width: 100%;
}

.mat-sidenav-container {
    height:100%;
}

.mat-sidenav-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.radio-bezel {
    box-sizing: border-box;
    max-width: 640px;
    min-height: 0;
    padding: 24px;
    width: 100%;
}

.radio-control,
.radio-display,
.radio-led {
    flex: 100%;
    max-width: 100%;
}

.radio-display,
.radio-led {
    margin-bottom: 24px;
}

@media (orientation: landscape) and (max-width: 640px) {
    .radio-bezel {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .radio-control {
        flex: calc(50% - 24px);
        max-width: calc(50% - 24px);
        margin-left: 24px;
    }

    .radio-display {
        flex: 50%;
        max-width: 50%;
    }

    .radio-display,
    .radio-led {
        margin: 0;
    }

    .radio-led {
        flex: 100%;
        max-width: 100%;
    }
}