@import "../../mixins";

$theme-color: (
        pc: (
                bg-color: linear-gradient(top, #f6f6f6 0%, #dadada 100%),
                font-color: #3c4246,
                title-color:#8b8e99
        ),
        mobile:(
                bg-color:#7266ba,
                font-color: whitesmoke,
                title-color:white
        ),
        tb: (
                bg-color:#23b7e5,
                font-color: whitesmoke,
                title-color:#fff
        ),
        common: (
                bg-color:#23b7e5,
                font-color: whitesmoke,
                title-color:#fff
        )
);

.g-sd {
    width: 200px;
    z-index: 1;
    transition: background 0.3s ease-in-out;

    @each $them-name in pc, mobile, tb, common {
        &.#{$them-name} {
            background: white;
            .title {
                font-size: 12px;
                color: #8b8e99;
                padding: 10px 15px;
            }
            .item {
                position: relative;
                display: block;
                padding: 12px 10px 12px 20px;
                font-weight: normal;
                text-transform: none;
                transition: background-color 0.2s ease-in-out 0s;
                color: #666;
                text-decoration: none;
                font-size: 13px;
                &:hover, &.active {
                    border-left: 3px solid #7266ba;
                    padding-left: 17px;
                    background: white;
                    color: #563d7c;
                }
            }
        }
    }
}

.g-hd {
    .navbar-brand {
        @each $them-name in pc, mobile, tb, common {
            &.#{$them-name} {

            }
        }
    }
}