@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;
			-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 );
			-webkit-border-radius: @border_radius;
			border-radius: @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 {
		min-width: 386 * @unit_base;
		max-width: 620 * @unit_base;
        border: none;
    }
	
	.ui-listview > .ui-li {
		color: @color_ctxpopup_text;
		border-bottom-color: @color_ctxpopup_border_bottom;
		padding: 0 7 * @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;

			.ui-btn-icon-only {
				width: 128 * @unit_base;
				height: 92 * @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 20 * @unit_base;
			min-width: 128 * @unit_base;
		}


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

        table {
            border: none;
            border-spacing: 0;
        }

        td {
			* {
				display: -moz-box;
				-moz-box-pack: center;
				display: -webkit-box;
				-webkit-box-pack: center;
				display: box;
				box-pack: center;
			}

            border-left: 1px solid @color_ctxpopup_border_left;
            border-right: 1px solid @color_ctxpopup_border_right;
            border-top: 1px solid @color_ctxpopup_border_right;
            border-bottom: 1px solid @color_ctxpopup_border_left;
        }

        td:first-of-type {
            border-left: none;
        }

        td:last-of-type {
            border-right: none;
        }

        tr:first-of-type > td {
            border-top: none;
        }

        tr:last-of-type > td {
            border-bottom: none;
        }

		tr:first-of-type > td:first-of-type {
			border-top-left-radius: @border_radius;
		}

		tr:first-of-type > td:last-of-type {
			border-top-right-radius: @border_radius;
		}

		tr:last-of-type > td:first-of-type {
			border-bottom-left-radius: @border_radius;
		}

		tr:last-of-type > td:last-of-type {
			border-bottom-right-radius: @border_radius;
		}

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

        li {
			line-height: 92 * @unit_base;
			min-height: 92 * @unit_base;
			min-width: 128 * @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_bar_back_btn_press;
		}
    }

    .button {
        table .ui-btn {
            margin: 8 * @unit_base;
            padding: 0;
            height: 74 * @unit_base;
            width: 172 * @unit_base;
        }
    }

}