.switchcontrol
{
    flex-direction: row;
    width: 100px;
    min-height: 24px;
    align-items: center;
    cursor: pointer;

    .switch-frame
    {
        flex-grow: 0;
        flex-shrink: 1;
        width: 48px;
        height: 16px;
        background-color: #fff1;
        margin: 0px 5px;
        align-items: center;
        border-radius: 100px;
        transition: all 0.4s linear;

        .switch-inner
        {
            position: relative;
            flex-grow: 0;
            flex-shrink: 1;
            background-color: #999;
            width: 25px;
            height: 25px;
            border-radius: 100px;
            left: 20%;
            transform: translateX( -50% );
            transition: all 0.3s ease-out;
        }
    }

    &.active
    {
        .switch-frame
        {
            background-color: #fffa;
        }

        .switch-inner
        {
            left: 80%;
            background-color: #fff;
        }
    }
}