.wifi-icon {
    width: 1rem;
    height: 1rem;
    position: relative;
    transform: rotate(-45deg);

    &,
    > i {
        display: block;
        margin: 0;
    }

    > i {
        position:absolute;
        bottom: 0;
        left: 0;

        opacity: 0.5;

        border-color: #fff;
        border-style: solid;
        border-width: 0.14rem 0.14rem 0 0;
        border-radius: 0 100% 0 0;

        &:nth-of-type(1) {
            width: 1.1rem;
            height: 1.1rem;
        }
        &:nth-of-type(2) {
            width: 0.8rem;
            height: 0.8rem;
        }
        &:nth-of-type(3) {
            width: 0.5rem;
            height: 0.5rem;
        }
        &:nth-of-type(4) {
            width: 0.2rem;
            height: 0.2rem;
            opacity: 1;
        }
    }

    &--fair > i:nth-of-type(3),
    &--good > i:nth-of-type(3),
    &--good > i:nth-of-type(2),
    &--excellent > i:nth-of-type(3),
    &--excellent > i:nth-of-type(2),
    &--excellent > i:nth-of-type(1) {
        opacity: 1;
    }
}