/*
KIRBY TABLEX v0
Florian Karsten
*/



/*
ROW BLOCKS
*/

.tablex-field .tablex-ctrl,
.tablex-field .tablex-row,
.tablex-field .tablex-add-row {
	display: flex;
}



/*
CONTROLS BLOCKS
*/

.tablex-field .row-ctrl {
	position: relative;
	flex-shrink: 0;
	flex-grow: 0;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid #ddd;
	border-top-color: transparent;
	border-left-color: transparent;
}

.tablex-field .row-ctrl:first-child {
	border-left-color: #ddd;
	border-right-color: transparent;
}

.tablex-field .row-ctrl:last-child {
	border-right-style: dashed;
	border-right-color: #d7d7d7;
}

.tablex-field .tablex-ctrl .row-ctrl {
	height: 1.5rem;
}

.tablex-field .tablex-ctrl .row-ctrl:first-child {
	border-left-color: transparent;
}

.tablex-field .tablex-ctrl .row-ctrl:last-child {
	border-top-style: dashed;
	border-top-color: #d7d7d7;
}

.tablex-field .tablex-row .row-ctrl,
.tablex-field .tablex-add-row .row-ctrl {
	height: 3rem;
}

.tablex-field .tablex-row:last-child .row-ctrl:last-child {
	border-bottom-style: dashed;
	border-bottom-color: #d7d7d7;
}

.tablex-field .tablex-add-row .row-ctrl:first-child {
	border-color: transparent;
}

.tablex-field .tablex-add-row .row-ctrl:last-child {
	border-color: transparent;
}



/*
CELLS
*/

.tablex-field .row-cell {
	position: relative;
	width: 100%;
	height: 3rem;
	padding-right: 0;
	border: 1px solid #ddd;
	border-top-color: transparent;
	border-left-color: transparent;
}

.tablex-field .row-ctrl + .row-cell {
	border-left-color: #ddd;
}

.tablex-field .tablex-ctrl .row-cell {
	height: 1.5rem;
	border-top-color: #ddd;
}

.tablex-field .tablex-header .row-cell {
	font-weight: 700;
}

.tablex-field .tablex-add-row .row-cell {
	border-style: dashed;
	border-left-color: #d7d7d7;
	border-right-color: #d7d7d7;
	border-bottom-color: #d7d7d7;
}



/*
CONTROLS ICONS
*/

.tablex-field i.fa {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 10px;
	line-height: 1.5rem;
	text-align: center;
	color: #bbb;
	cursor: pointer;
}

.tablex-field i.fa.disabled {
	pointer-events: none;
	opacity: .2;
}

.tablex-field i.fa:hover {
	color: #000;
}

/* table header */
.tablex-field .tablex-header i.fa-header {
	height: 3rem;
	font-size: 12px;
	line-height: 3rem;
}

/* move down */
.tablex-field .row-ctrl i.fa-chevron-down {
	top: auto;
	bottom: 0px;
}

/* move right */
.tablex-field .row-cell i.fa-chevron-right {
	left: auto;
	right: -1px;
}

/* delete row */
.tablex-field .row-ctrl i.fa-times-circle {
	height: 3rem;
	font-size: 14px;
	line-height: 3rem;
}

/* delete column */
.tablex-field .row-cell i.fa-times-circle {
	left: 50%;
	margin-left: -0.75rem;
	font-size: 14px;
}

/* add row */
.tablex-field .tablex-add-row i.fa-plus {
	left: 0;
	width: 100%;
	height: 3rem;
	line-height: 3rem;
}



/*
CAPTION
*/

.tablex-caption {
	padding: 0 24px;
}

.tablex-caption input {
	position: relative;
	width: 100%;
	height: 3rem;
	padding-right: 0;
	border: 1px solid #ddd;
	border-bottom: none;
}

.tablex-caption input:focus {
	border-color: #ddd
}


/*
Transitions
*/

[v-cloak].tablex-field {
	display: none;
}
