:host {
    display: flex;
    flex-direction: row;
    min-height: 100%;
}

.radio-body {
    min-width: 100%;
    padding: 12px;

    >div:first-child {
        padding-right: 14.5px;
    }
}

.radio-button-group {
    justify-content: flex-start;

    *:nth-last-child(2) {
        margin-left: auto;
    }
}

.radio-button-mini {
    &.all-off {
        background: rgb(100, 50, 50);
    }

    &.all-on {
        background: rgb(50, 100, 50);
    }
}

.radio-system {
    font-family: Roboto, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;

    &:not(:last-child) {
        margin-bottom: 12px;
    }

    legend {
        opacity: .8;
        padding: 0 12px;
    }
}

@media (min-width: 720px) {
    .radio-button-group {
        .radio-button,
        .radio-button-none {
            width: calc(20% - 8px);
        }

        .radio-button-mini {
            width: calc(10% - 8px);
        }
    }
}

@media (min-width: 1200px) {
    .radio-button-group {
        .radio-button,
        .radio-button-none {
            width: calc(10% - 8px);
        }

        .radio-button-mini {
            width: calc(5% - 8px);
        }
    }
}