:host {
    cursor: pointer;
    margin: 5px 0;

    &:focus {
        background: rgba(255,255,255,.05);
        border-radius: 5px;
    }

    &:active {
        background: rgba(255,255,255,.1);
        border-radius: 3px;
    }

    &[disabled] {
        opacity: 0.5;
    }

    display: flex;
    flex-direction: row;
    align-items: center;

    .off {
        color: rgba(0, 0, 0, .5);
    }

    .icon {
        position: relative;
        flex: none;
        width: 14px;
        height: 14px;

        i {
            position: absolute;
            left: 0;
            top: -2px;
            transition: 0.25s opacity;
            display: block;
            font-size: 18px;
        }

        i.on, &.active i.off {
            opacity: 0;
        }

        i.off, &.active i.on {
            opacity: 1;
        }
    }

    .text {
        flex: auto;
        margin-left: 8px;
    }
}