@import "config.less";

@border_radius: .3em;

.ui-ctxpopup {
	display: table;
	
	.ui-ctxpopup-row .ui-triangle-top {
		top: 2px;
	}

	.ui-ctxpopup-row .ui-triangle-left {
		left: 2px;
	}

	.ui-ctxpopup-row .ui-triangle-right {
		right: 2px;
	}

	.ui-ctxpopup-row .ui-triangle-bottom {
		bottom: 2px;
	}

	.ui-ctxpopup-row {
		display: table-row;

		.ui-ctxpopup-cell {
			display: table-cell;
		}

		.ui-popupwindow-padding {
			background: @color_ctxpopup_background;
			border: none;
			-ms-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
			-o-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
			-moz-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
			-webkit-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
			box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
			.LESSborder-radius-all(@border_radius);
		}

	}

    .ui-listview li.ui-btn-up-s, .ui-listview li.ui-btn-hover-s {
        background: transparent;
    }

	.ui-listview li.ui-btn-down-s {
		background: @color_bar_back_btn_press;
	}

	.ui-listview li:last-child {
		border-bottom-left-radius: @border_radius;
		border-bottom-right-radius: @border_radius;
	}

	.ui-listview li:first-child {
		border-top-left-radius: @border_radius;
		border-top-right-radius: @border_radius;
	}
	
    .ui-listview {
		max-width: 620 * @unit_base;
        	border: none;
    }
	
	.ui-listview > .ui-li {
		color: @color_ctxpopup_text;
		border-bottom-color: @color_ctxpopup_border_bottom;
		border-top-width: 1px;
		border-top-color: @color_ctxpopup_border_top;
		margin-left: 0;
		margin-right: 0;
		&:first-child, &:last-child {
			border-top-width: 0px;
		}
		.ui-btn-inner {
			margin: 0;
			padding-left: 10 * @unit_base;
			padding-right: 10 * @unit_base;
		}
	}

	.ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
	  color: @color_ctxpopup_text;
	}

    .ui-listview > .ui-li:last-child {
        border: none;
    }

    .horizontal {
		color: @color_ctxpopup_text;
		max-width: 648 * @unit_base;
		.icon .ui-btn {
			padding: 0;
			background: transparent ! important;
			.ui-btn-icon-only {
				width: 96 * @unit_base;
				height: 64 * @unit_base;
				padding: 0;
			}

			.ui-icon {
				top: 0;
				height: inherit;
				width: inherit;
				margin: 0;
				background-position: center;
				.LESSbackground-size( 48 * @unit_base, 48 * @unit_base );
			}
		}

		.text {
			padding: 0 10 * @unit_base;
			min-width: 48 * @unit_base;
		}


        a.ui-link {
            color: @color_ctxpopup_text;
            text-decoration: none;
        }

        ul {
            padding: 0;
            display: inline-block;
            list-style: none;
            vertical-align: middle;
            margin: 0;
        }

        li {
			line-height: 64 * @unit_base;
			min-height: 64 * @unit_base;
			min-width: 96 * @unit_base;

            float: left;
            display: inline-block;
            border-left: 1px solid @color_ctxpopup_border_left;
            border-right: 1px solid @color_ctxpopup_border_right;
            text-align: center;
        }

		li:first-of-type {
			border-top-left-radius: @border_radius;
			border-bottom-left-radius: @border_radius;

            border-left: none;
        }
            
        li:last-of-type {
			border-top-right-radius: @border_radius;
			border-bottom-right-radius: @border_radius;

            border-right: none;
            margin-right: 0;
        }

		li:active, td:active {
			background: @color_ctxbutton_press;
		}
    }

    .button {
        table .ui-btn {
            margin: 0 * @unit_base;
            padding: 0;
            height: 56 * @unit_base;
            width: 132 * @unit_base;
        }
    }

}

.ui-arrow {
	border-style: solid;
	border-width: 10px;
	width: 0;
	height: 0px;
	position: absolute;
	&.top {
		border-color: transparent transparent @color_ctxpopup_background transparent;
	}
	&.left {
		border-color: transparent transparent transparent @color_ctxpopup_background;
	}
	&.right {
		border-color: transparent @color_ctxpopup_background transparent transparent;
	}
	&.bottom {
		border-color: @color_ctxpopup_background transparent transparent transparent;
	}
}

.ui-ctxpopup-container
{
	z-index: 1200;
	display: inline-bloack;
	position: absolute;
	padding: 0;
	outline: 0;
	.ui-popup
	{
		border: none;
		background: @color_ctxpopup_background;
		.LESSborder-radius-all(@border_radius);
	}
	.ui-listview li:first-child {
		border-top-left-radius: @border_radius;
		border-top-right-radius: @border_radius;
	}
}

.poptop {
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
}

.poptop.in {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
    opacity: 1;
	-webkit-animation-name: scalepopin;
	-moz-animation-name: scalepopin;
	-webkit-animation-duration: 350ms;
	-moz-animation-duration: 350ms;
}

.poptop.out {
	-webkit-animation-name: fadeout;
	-moz-animation-name: fadeout;
	opacity: 0;
	-webkit-animation-duration: 100ms;
	-moz-animation-duration: 100ms;
}

.poptop.in.reverse {
	-webkit-animation-name: fadein;
	-moz-animation-name: fadein;
}

.poptop.out.reverse {
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-webkit-animation-name: scalepopout;
	-moz-animation-name: scalepopout;
}

@-webkit-keyframes scalepopin {
    from {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

.popbottom {
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
}

.popbottom.in {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
    opacity: 1;
	-webkit-animation-name: scalepopin;
	-moz-animation-name: scalepopin;
	-webkit-animation-duration: 350ms;
	-moz-animation-duration: 350ms;
}

.popbottom.out {
	-webkit-animation-name: fadeout;
	-moz-animation-name: fadeout;
	opacity: 0;
	-webkit-animation-duration: 100ms;
	-moz-animation-duration: 100ms;
}

.popbottom.in.reverse {
	-webkit-animation-name: fadein;
	-moz-animation-name: fadein;
}

.popbottom.out.reverse {
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-webkit-animation-name: scalepopout;
	-moz-animation-name: scalepopout;
}

@-moz-keyframes scalepopin {
    from {
        -moz-transform: scale(.8);
        opacity: 0;
    }
    to {
        -moz-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scalepopout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
}

@-moz-keyframes scalepopout {
    from {
        -moz-transform: scale(1);
        opacity: 1;
    }
    to {
        -moz-transform: scale(.8);
        opacity: 0;
    }
}