// Variables
@yom-data-grid-border-color: #ccc;
@gray-dark: #555;
@primary-color: #325fdc;
@font-size-base: 14px;
@line-height-base: 20px;
@header-row-height: 40px;

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix() {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
		content: "";
		// Fixes Opera/contenteditable bug:
		// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
		line-height: 0;
	}
	&:after {
		clear: both;
	}
}

// Opacity
.opacity(@opacity) {
	opacity: @opacity / 100;
	filter: ~"alpha(opacity=@{opacity})";
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
     -moz-transition-delay: @transition-delay;
       -o-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
     -moz-transition-duration: @transition-duration;
       -o-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}

// Border Radius
.border-radius(@radius) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

// Single Corner Border Radius
.border-top-left-radius(@radius) {
	-webkit-border-top-left-radius: @radius;
	-moz-border-radius-topleft: @radius;
	border-top-left-radius: @radius;
}
.border-top-right-radius(@radius) {
	-webkit-border-top-right-radius: @radius;
	-moz-border-radius-topright: @radius;
	border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius) {
	-webkit-border-bottom-right-radius: @radius;
	-moz-border-radius-bottomright: @radius;
	border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius) {
	-webkit-border-bottom-left-radius: @radius;
	-moz-border-radius-bottomleft: @radius;
	border-bottom-left-radius: @radius;
}

//
// Data Grid
//
.yom-data-grid-container {
	height: 100%;
	position: relative;
}

.yom-data-grid {
	border: solid 1px @yom-data-grid-border-color;
	height: 100%;
	.border-radius(2px);
	.clearfix();
}

.yom-data-grid-locked table {
	table-layout: fixed;
	th, td {
		line-height: @line-height-base;
	}
	td i[class^="icon"] {
		font-size: @font-size-base * 1.25;
	}
}

.yom-data-grid .yom-data-grid-header, .yom-data-grid .yom-data-grid-body {
	overflow: hidden;
}

.yom-data-grid-table th {
	text-align: left;
	background-color: #fff;
}
.yom-data-grid-table td {
	background-color: #fff;
}

.yom-data-grid-cell-inner {
	line-height: @font-size-base * 1.1;
	font-size: @font-size-base;
	padding: 11px 9px;
}

.yom-data-grid-cell-inner-left {
	text-align: left;
}
.yom-data-grid-cell-inner-center {
	text-align: center;
}
.yom-data-grid-cell-inner-right {
	text-align: right;
}

.yom-data-grid-cell-inner-dummy {
	height: 1px;
}

th .yom-data-grid-cell-inner,
.yom-data-grid-bordered th .yom-data-grid-cell-inner,
.yom-data-grid-bordered-v th .yom-data-grid-cell-inner {
	border-bottom: solid 2px @yom-data-grid-border-color;
}
[class*="yom-data-grid-header-rows-"] th .yom-data-grid-cell-inner, .yom-data-grid-bordered-v [class*="yom-data-grid-header-rows-"] th .yom-data-grid-cell-inner {
	border-bottom: solid 1px @yom-data-grid-border-color;
}
.yom-data-grid-sequence-cell .yom-data-grid-cell-inner,
.yom-data-grid-bordered-h .yom-data-grid-sequence-cell .yom-data-grid-cell-inner {
	border-right: solid 1px @yom-data-grid-border-color;
}

// Bordered
.yom-data-grid-bordered .yom-data-grid-cell-inner {
	border-bottom: solid 1px @yom-data-grid-border-color;
	border-right: solid 1px @yom-data-grid-border-color;
}
.yom-data-grid-bordered-h .yom-data-grid-cell-inner {
	border-right: none;
}
.yom-data-grid-bordered-v .yom-data-grid-cell-inner {
	border-bottom: none;
}
.yom-data-grid-bordered .yom-data-grid-last-row .yom-data-grid-cell-inner {
	border-bottom: none;
}
.yom-data-grid-bordered .yom-data-grid-last-cell .yom-data-grid-cell-inner {
	border-right: none;
}
.yom-data-grid-bordered .yom-data-grid-header .yom-data-grid-last-row .yom-data-grid-cell-inner {
	border-bottom: solid 2px @yom-data-grid-border-color;
}

// Locked
.yom-data-grid-locked .yom-data-grid-cell-inner {
	overflow: hidden;
	text-overflow: ellipsis;
	height: @font-size-base * 1.2 + 22;
}

.yom-data-grid-locked-columns {
	border-right: solid 2px @yom-data-grid-border-color;
}

// Striped
.yom-data-grid-striped .yom-data-grid-table .yom-data-grid-row-odd td {
	background-color: #f8f8f8;
}

// Sortable
.yom-data-grid-sortable, .yom-data-grid-sortable:hover {
	color: @gray-dark;
	text-decoration: none;
}
.yom-data-grid-sort-arrow {
	display: inline-block;
	width: 8px;
	height: 10px;
	vertical-align: baseline;
	margin-right: 3px;
	position: relative;
}
.yom-data-grid-sort-arrow:before, .yom-data-grid-sort-arrow:after {
	display: block;
	width: 0;
	height: 0;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
	position: absolute;
	left: 0;
}
.yom-data-grid-sort-arrow:before {
	bottom: 0;
	border-top: 4px solid lighten(@gray-dark, 35%);
}
.yom-data-grid-sort-arrow:after {
	top: 0;
	border-bottom: 4px solid lighten(@gray-dark, 35%);
}
.yom-data-grid-sort-arrow-down:before {
	border-top: 4px solid @primary-color;
}
.yom-data-grid-sort-arrow-up:after {
	border-bottom: 4px solid @primary-color;
}

// Filterable
.yom-data-grid-header-cell-inner {
	position: relative;
	.yom-data-grid-filter-icon {
		position: absolute;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		top: 50%;
		right: 5px;
		margin-top: -10px;
		cursor: pointer;
		color: @gray-dark;
		.border-radius(2px);
		&:hover {
			background-color: #eee;
		}
	}
	&:hover {
		.yom-data-grid-filter-remove-icon {
			.icon-remove {
				display: inline-block;
			}
			.icon-filter {
				display: none;
			}
		}
	}
	> a, > span {
		white-space: nowrap;
	}
}
.yom-data-grid-header-cell-inner-filterable {
	padding-right: 24px;
	&.yom-data-grid-header-cell-inner-align-right {
		padding-right: 9px;
		padding-left: 24px;
		.yom-data-grid-filter-icon {
			left: 5px;
			right: auto;
		}
	}
}
.yom-data-grid-filter-panel {
	position: absolute;
	border: 1px solid #ccc;
	background-color: #fff;
	width: 252px;
	padding: 10px;
	display: none;
	z-index: 999;
	.border-radius(2px);
	h3 {
		font-size: @font-size-base;
		margin: 0;
		margin-bottom: 10px;
		color: @gray-dark;
	}
	.remark {
		font-style: italic;
		color: #888;
	}
	.alert-danger {
		padding: 10px;
	}
	.set-container {
		background-color: #f8f8f8;
		padding-left: 10px;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 145px;
		margin-bottom: 10px;
		.border-radius(2px);
	}
	.btn-primary, .btn-default {
		min-width: 62px;
	}
	.btn-confirm {
		margin-right: 10px;
	}
}
.yom-data-grid-filter-remove-icon {
	color: @gray-dark;
	.icon-remove {
		display: none;
	}
	&:hover {
		color: @gray-dark;
	}
}

// Setting
.yom-data-grid-setting-icon {
	position: absolute;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	top: -20px;
	left: 0;
	background-color: #eee;
	cursor: pointer;
	color: @gray-dark;
	z-index: 1;
	display: none;
	.border-radius(2px);
}
.yom-data-grid-container-sequence .yom-data-grid-setting-icon {
	top: 9px;
	left: 9px;
}
.yom-data-grid-container:hover .yom-data-grid-setting-icon {
	display: block;
}
.yom-data-grid-setting-panel {
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #ccc;
	background-color: #fff;
	width: 300px;
	padding: 10px;
	display: none;
	z-index: 2;
	.border-radius(2px);
	h3, h4 {
		font-size: @font-size-base;
		margin: 0;
		margin-bottom: 10px;
		color: @gray-dark;
	}
	h4 {
		margin-top: 10px;
	}
	.alert-danger {
		padding: 10px;
	}
	.columns-container {
		position: relative;
		padding-right: 40px;
	}
	.yom-data-grid-setting-columns-container-inner {
		background-color: #f8f8f8;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 255px;
		padding: 5px 0;
		.border-radius(2px);
	}
	.lock-options {
		margin-bottom: 10px;
		.radio-inline {
			margin-left: 0;
			margin-right: 10px;
		}
	}
	.btn-primary, .btn-default {
		min-width: 62px;
	}
}
.yom-data-grid-setting-column-all {
	padding-left: 10px;
}
.yom-data-grid-setting-column-item {
	padding: 3px 10px;
	position: relative;
	cursor: pointer;
	&.selected {
		background-color: #ddd;
	}
}
.yom-data-grid-setting-btn-move-up, .yom-data-grid-setting-btn-move-down {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -40px;
	min-width: 0 !important;
}
.yom-data-grid-setting-btn-move-down {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: 10px;
}
.yom-data-grid-btn-confirm-setting {
	margin-right: 10px;
}

// Hightlight
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-checked td {
	background-color: #ebf5ff;
}
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-error td {
	background-color: #f2dede;
}
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-hl td {
	background-color: #ffffee;
}
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-checked.yom-data-grid-row-hl td {
	background-color: #d4e9ff;
}
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-error.yom-data-grid-row-hl td {
	background-color: #ebcccc;
}
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-click-hl td {
	background-color: #ffffcc;
}
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-checked.yom-data-grid-row-click-hl td {
	background-color: #c5e0fd;
}
.yom-data-grid .yom-data-grid-table .yom-data-grid-row-error.yom-data-grid-row-click-hl td {
	background-color: #f3c4c4;
}

// Sequence
.yom-data-grid .yom-data-grid-table .yom-data-grid-sequence-cell {
	background-color: #fff !important;
	border-bottom: none;
	font-weight: bold;
	color: #888;
}
.yom-data-grid-sequence-cell .yom-data-grid-cell-inner {
	border-bottom: none;
	text-overflow: clip;
	padding-left: 0;
	padding-right: 0;
}

// Checkbox
.yom-data-grid-checkbox-cell .yom-data-grid-cell-inner {
	text-overflow: clip;
}
.yom-data-grid-checkbox-cell input[type="checkbox"] {
	margin: 0;
}

// Form Cell
.yom-data-grid-form-cell .yom-data-grid-cell-inner {
	padding: 2px;
	> .btn-icon {
		min-width: 36px;
		margin-right: 2px;
		padding-left: 0;
		padding-right: 0;
		&.btn-sm {
			min-width: 32px;
			margin-right: 4px;
			margin-top: 2px;
		}
		&:last-child {
			margin-right: 0;
		}
	}
}
.yom-data-grid-bordered .yom-data-grid-form-cell .yom-data-grid-cell-inner {
	padding-left: 2px;
	padding-right: 2px;
}
.yom-data-grid-form-cell .yom-data-grid-cell-inner-left {
	.btn-icon.btn-sm {
		&:first-child {
			margin-left: 2px;
		}
	}
}

// Clickable
.yom-data-grid-row-clickable .yom-data-grid-content-cell {
	cursor: pointer;
}

// 100% height
.yom-data-grid-container-height {
	.yom-data-grid-locked-columns, .yom-data-grid-columns {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.yom-data-grid-body {
		position: absolute;
		top: @header-row-height;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.yom-data-grid-columns .yom-data-grid-header, .yom-data-grid-columns .yom-data-grid-body {
		overflow-y: scroll;
	}
	.yom-data-grid-header-rows-1 .yom-data-grid-body {
		top: @header-row-height * 2;
	}
	.yom-data-grid-header-rows-2 .yom-data-grid-body {
		top: @header-row-height * 3;
	}
	.yom-data-grid-header-rows-3 .yom-data-grid-body {
		top: @header-row-height * 4;
	}
	.yom-data-grid-header-rows-4 .yom-data-grid-body {
		top: @header-row-height * 5;
	}
}