.tablets-statistic {
    display: flex;
    align-items: center;
    gap: 2px;

    &__tablet {
        display: inline-block;

        height: 20px;
        padding: 0 4px;

        font-size: 11px;
        line-height: 20px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;

        color: var(--g-color-text-secondary);
        border: 1px solid;
        border-radius: 2px;

        &_state_green {
            color: var(--g-color-text-positive);
            background-color: var(--g-color-base-positive-light);
        }
        &_state_yellow {
            color: var(--g-color-text-warning);
            background-color: var(--g-color-base-warning-light);
        }
        &_state_blue {
            color: var(--g-color-text-info);
            background-color: var(--g-color-base-info-light);
        }
        &_state_orange {
            color: var(--g-color-text-warning-heavy);
            background-color: var(--g-color-base-warning-light);
        }
        &_state_red {
            color: var(--g-color-text-danger);
            background: var(--g-color-base-danger-light);
        }
        &_state_grey {
            color: var(--g-color-text-secondary);
            border: 1px solid var(--g-color-line-generic-hover);
        }
    }
}