/*
 * For header type 1 only
 * You may remove these if you opt header 2
 */
#header {
    .skin-switch {
        padding: 15px 0 8px;
        text-align: center;
    }

    .ss-skin {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
        margin: 2px 5px;
    }
}
/* ----------------------------- End header type 1 ------------------------------------- */


/*
 * For header type 2 only
 * You may remove these if you opt header 1
 */

#header-2 {
    .skin-switch {
        position: absolute;
        right: 58px;
        bottom: 23px;
        z-index: 1;

        .btn {
            background: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 25px;
            z-index: 2;
        }

        .dropdown-menu {
            min-width: 130px;
            height: 130px;
            border-radius: 50%;
            width: 130px;
            top: -42px;
            left: -40px;
            z-index: 1;
            @include transform-origin(center);
            @include scale-rotate(0, -360deg);
            @include transition-duration(500ms);

            .ss-skin {
                position: absolute;

                &:nth-child(1) {
                    margin-left: -8px;
                    top: 12px;
                    left: 50%;
                }
                &:nth-child(2) {
                    right: 24px;
                    top: 26px;
                }


                &:nth-child(3) {
                    top: 50%;
                    margin-top: -8px;
                    right: 12px;
                }

                &:nth-child(4) {
                    right: 24px;
                    bottom: 26px;
                }

                &:nth-child(5) {
                    margin-left: -8px;
                    bottom: 12px;
                    left: 50%;
                }

                &:nth-child(6) {
                    left: 24px;
                    bottom: 26px;
                }

                &:nth-child(7) {
                    top: 50%;
                    margin-top: -8px;
                    left: 12px;
                }

                &:nth-child(8) {
                    left: 24px;
                    top: 26px;
                }
            }
        }

        &.open {
            .dropdown-menu {
                @include scale-rotate(1, 0deg);
            }
        }
    }
}
/* ----------------------------- End header type 2 ------------------------------------- */



/*
 * Do not remove these
 * This is common for both
 */
.ss-skin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
        @include opacity(0.8);
    }
}
@mixin current-skin($color) {
    background-color: $color;

    .ss-icon { color: $color; }

    .ha-menu {
        @media (max-width: $screen-xs-max) {
            background: $color;
        }
    }
}

[data-current-skin="red"] { @include current-skin($m-red); }
[data-current-skin="lightblue"] { @include current-skin($m-lightblue); }
[data-current-skin="bluegray"] { @include current-skin($m-bluegray); }
[data-current-skin="blue"] { @include current-skin($m-blue); }
[data-current-skin="purple"] { @include current-skin($m-purple); }
[data-current-skin="orange"] { @include current-skin($m-orange); }
[data-current-skin="cyan"] { @include current-skin($m-cyan); }
[data-current-skin="green"] { @include current-skin($m-green); }
[data-current-skin="teal"] { @include current-skin($m-teal); }
[data-current-skin="pink"] { @include current-skin($m-pink); }