/* Copyright (C) 2016 NooBaa */

toggle-group {
    display: inline-block;

    .toggle-options {
        background: rgb(var(--color01));
        border: 1px solid rgb(var(--color12));
        overflow: hidden;
        line-height: 1;
        font-weight: @font-regular;
    }

    .toggle-option {
        padding: 1px;

        > input {
            position: absolute;
            visibility: hidden;
            z-index: -1;

            &:checked + .toggle-btn {
                color: rgb(var(--color20));
                fill: rgb(var(--color20));
                background-color: rgba(var(--color20), .2);
            }
        }

        + .toggle-option {
            margin-left: 4px;
        }
    }

    .toggle-btn {
        .ripple(rgb(var(--color20)));

        line-height: 24px;
        min-width: 52px;
        padding: 2px @gutter/2;
        color: rgb(var(--color08));
        fill: rgb(var(--color08));
        font-size: @font-size1;
        text-align: center;
        text-transform: capitalize;
        cursor: @cursor-pointer;
        background-color: rgba(var(--color03));
        transition: all 500ms ease-in-out;

        > svg-icon {
            fill: inherit;
        }
    }

    &.toggle-light {
        .toggle-options {
            border: none;
            background: none;
            font-weight: @font-light;

            > vr {
                display: none;
            }

            .toggle-btn  {
                background: none;
                padding: 0 @gutter/4;
                min-width: 0;
            }

            .toggle-option > input:checked + .toggle-btn {
                background: none;
            }
        }
    }
}
