.theme-panel {
	position: fixed;
	z-index: $theme-panel-zindex;
	right: rem(-200px);
	top: rem(200px);
	width: rem(200px);
	
	@include border-radius($border-radius 0 0 $border-radius);
	@include transition(right .2s linear);
	
	&.active {
		right: 0;
		
		@include box-shadow(0 0 16px rgba($black,.15));
	}
	& .theme-collapse-btn {
    position: absolute;
    left: rem(-40px);
    top: 50%;
    margin-top: rem(-20px);
    width: rem(40px);
    height: rem(40px);
    line-height: rem(40px);
    font-size: $font-size-lg;
    color: $dark;
    background: $white;
    text-align: center;
    text-decoration: none;
    
    @include box-shadow(0 0 16px rgba($black, .15));
    @include border-radius($border-radius 0 0 $border-radius);
	}
	& .theme-panel-content {
		padding: rem(10px);
		background: $white;
		position: relative;
		
		@include border-radius($border-radius 0 0 $border-radius);
	}
	& .theme-list {
		list-style-type: none;
		margin: 0 rem(-5px) rem(-5px) 0;
		padding: 0;
		
		& > li {
			float: left;
			margin-right: rem(5px);
			margin-bottom: rem(5px);
		
			& > a {
				width: rem(32px);
				height: rem(32px);
				display: block;
				text-decoration: none;
				position: relative;
				overflow: hidden;
				
				@include border-radius($border-radius);	
				@include transition(all .2s linear);
			}
			&.active {
				& > a {
					&:before {
						content: '\f00c';
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						font-size: $font-size-base;
						color: $white;
						opacity: .75;
						line-height: rem(36px);
						text-align: center;
						
						@include fontawesome();
					}
				}
			}
		}
	}
}