/**
* import files
*/
@import "../../../themes/core/helpers.less";
@import "../../../themes/core/vars.less";
@import "../../../themes/core/common.less";

/**
* common styles
*/
.common-mixin(){

    .jplist-hidden{
        display: none;
    }
}


/**
* jplist ios button
*/
.jplist-ios-button-mixin(){
		
	.jplist-ios-button{
		display: none;
	}
	
	@media only screen and (max-width: 600px){
		
		.jplist-ios-button{
			display: block;
			width: 100%;
			text-align: center;
			cursor: pointer;
			font-size: 15px;
			line-height: 30px;
			.jplist-control-mixin();
			.linear-gradient(#fff, #fff, @light-grey4); //bgcolor, from, to
		}
		
		.jplist-ios-button:hover{
			.linear-gradient(#f2f2f2, #fafafa, #ededed); //bgcolor, from, to
		}
		
		.jplist-ios-show{
			display: block;
		}
	}
}

/**
* jplist panel
*/
.panel-mixin(){
		
	/**
	* <= IE8 -> no css gradients
	*/
	.no-cssgradients{
		.jplist-panel{
			button:hover{
				background: @white1;
			}
		}
	}
		
	.jplist-panel{	
		color: @black1;
		
		button{
			.jplist-control-mixin();
			.linear-gradient(#fff, #fff, @light-grey4); //bgcolor, from, to			
			margin: 10px 10px 0 0;			
		}
		
		button:hover{
			color: @blue;			
			.linear-gradient(#f2f2f2, #fafafa, #ededed); //bgcolor, from, to
		}
		
		button.jplist-disabled{
			background: @light-grey2;
			color: @dark-grey1;
			cursor: default;
		}
		
		button.jplist-selected{
			color: @orange;
		}
		
		input[type="text"]{
			.jplist-control-mixin();
			width: 150px;
			text-indent: 5px;
			background: #fff;
		}
		
		input[type="checkbox"],
		input[type="radio"]{
			.jplist-inner-control-mixin();
		}
		
		label{
			float: left;
			height: 30px;
			line-height: 30px;
			padding: 0 5px;
			display: inline-block;			
			.border-box-mixin();
			color: @black1;
			cursor: pointer;
		}

        input.jplist-no-right-border{
          border-right: 0;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
    }
			
	.jplist-icon{
		.jplist-control-mixin();		
		display: inline-block;
		line-height: 30px;
		padding: 0 10px;
		border-right: 0;
	}
	
	.jplist-icon:hover{
		color: @blue;
	}
	
	.jplist-label{		
		.jplist-control-mixin();
		line-height: 30px;
		padding: 0 10px;			
		margin: 10px 10px 0 0;	
		.linear-gradient(#fff, #fff, @light-grey4); //bgcolor, from, to
	}

    .jplist-clear{
      color: #666;
      cursor: pointer;
      float: left;
      height: 30px;
      line-height: 27px;
      padding: 0 4px;
      background: #fff;

      .border-box-mixin();
      border: 1px solid @light-grey5;
      border-left: 0;
      border-radius: 0 3px 3px 0;
      text-shadow: 1px 1px 1px #fff;
    }

    .jplist-clear:hover{
      color: #444;
    }
	
	.jplist-selected{
		color: @red1;
	}
	
	.jplist-box{
		float: left;
		height: 30px;
		margin: 10px 10px 0 0;
	}

	@media only screen and (max-width: 600px){
		.jplist-panel{
			display: none;
		}		
	}
}

/**
* dropdowns
*/
.dropdowns-mixin(){

    .jplist-drop-down{
        .jplist-control-mixin();
        width: 150px;		
		.linear-gradient(#fff, #fff, @light-grey4); //bgcolor, from, to		
		margin: 10px 10px 0 0;
		position: relative;

        .jplist-dd-panel{
            float: left;
            width: 150px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
			text-indent: 10px;
			cursor: pointer;
        }
		
		.jplist-dd-panel:after{
			content: @arrow-down;
			color: #111;
			display: inline-block;
			position: absolute;
			right: 10px;
			z-index: 1000;
		}
		
        ul {
			.border-box-mixin();
			border:1px solid @light-grey5;
			border-radius:0 0 3px 3px;
			
            position:relative;
            top:0;
            z-index:1000;
			
            width: 148px;
            display: none;
            overflow: hidden;
			
			background: #fff;			
            
            list-style: none;           
            margin:0;
            padding:0;
			
			box-shadow: 0 3px 6px @grey2;

            li{
                width: 100%;
                float: left;
				height: 30px;
				line-height: 30px;
				text-indent: 10px;
				cursor: pointer;
            }

            li:hover {
                background-color:@light-grey3;
            }
        }
    }
	
	.jplist-drop-down:hover{
		.jplist-dd-panel{
			color: @blue;
		}
		
		.jplist-dd-panel:after{
			color: @blue;
		}
	}
}

/**
* select
*/
.select-mixin(){

    .jplist-select{
		.jplist-control-mixin();
		float: left;
		margin: 10px 10px 0 0;
		padding: 5px;
		text-shadow: none;
    }
}

/**
* sticky elements
*/
.sticky-mixin(){

    .jplist-sticky{
        position: fixed;
        width: 100%;

        left: 0;
        top: 0;
        z-index: 1000;

        background: @light-grey;
        padding-bottom: 5px;
    }

    .sticky-demo{

        .panel > .center{
            max-width: 100%;
        }

        .jplist-sticky > .center{
            max-width: 95%;
        }
    }
}

/**
* mixin calls
*/
.common-mixin();
.sticky-mixin();

/**
* mixin calls
*/
.panel-mixin();
.dropdowns-mixin();
.select-mixin();
.jplist-ios-button-mixin();