/*
 * Citizen - SRF Datatables
 * https://starcitizen.tools
*/

@import '../../../../resources/variables.less';

.skin-citizen-dark {
	.srf-datatables .bordered-table {
		border: 1px solid @dark-bg-20;
	}

	.srf-datatables .bordered-table th + th,
	.srf-datatables .bordered-table td + td,
	.srf-datatables .bordered-table th + td {
		border-left: 1px solid @dark-bg-20;
	}

	.srf-datatables table td {
		border-top: 1px solid @dark-bg-20;
	}

	.srf-datatables table tbody th {
		border-top: 1px solid @dark-bg-20;
	}

	.bordered-table th + th,
	.bordered-table td + td,
	.bordered-table th + td {
		border-left: 1px solid @dark-bg-20;
	}

	.srf-datatables .zebra-striped tbody tr:nth-child( odd ) td,
	.srf-datatables .zebra-striped tbody tr:nth-child( odd ) th {
		background-color: @dark-bg-10;
	}

	.srf-datatables .zebra-striped tbody tr:hover td,
	.srf-datatables .zebra-striped tbody tr:hover th {
		background-color: @dark-bg-20;
	}

	table .header::after {
		border-color: var( --color-surface-0 ) transparent;
	}

	.srf-datatables table .headerSortUp,
	.srf-datatables table .headerSortDown {
		text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.75 );
		background-color: rgba( 141, 192, 219, 0.25 );
	}

	.srf-datatables table .headerSortUp::after {
		border-top: 4px solid var( --color-surface-0 );
	}

	.srf-datatables table .blue {
		color: var( --color-primary );
		border-bottom-color: var( --color-primary );
	}

	.srf-datatables table .headerSortUp.blue,
	.srf-datatables table .headerSortDown.blue {
		background-color: var( --background-color-primary--hover );
	}

	.srf-datatables table .green {
		color: var( --color-success );
		border-bottom-color: var( --color-success );
	}

	.srf-datatables table .headerSortUp.green,
	.srf-datatables table .headerSortDown.green {
		background-color: var( --background-color-success );
	}

	.srf-datatables table .red {
		color: var( --background-color-destructive );
		border-bottom-color: var( --background-color-destructive );
	}

	.srf-datatables table .headerSortUp.red,
	.srf-datatables table .headerSortDown.red {
		background-color: var( --background-color-destructive );
	}

	.srf-datatables table .yellow {
		color: var( --color-warning );
		border-bottom-color: var( --color-warning );
	}

	.srf-datatables table .headerSortUp.yellow,
	.srf-datatables table .headerSortDown.yellow {
		background-color: var( --background-color-warning );
	}

	.srf-datatables table .orange {
		color: var( --background-color-warning );
		border-bottom-color: var( --background-color-warning );
	}

	.srf-datatables table .headerSortUp.orange,
	.srf-datatables table .headerSortDown.orange {
		background-color: var( --background-color-warning );
	}

	.srf-datatables input,
	.srf-datatables textarea,
	.srf-datatables select,
	.srf-datatables .uneditable-input {
		color: var( --color-base--subtle );
		background-color: @dark-bg-20;
		border: 1px solid @dark-bg-30;
	}

	.srf-datatables input[ type='file' ] {
		background-color: var( --color-surface-0 );
	}

	.srf-datatables select[ multiple ] {
		height: inherit;
		background-color: var( --color-surface-0 );
	}

	.srf-datatables .uneditable-input {
		background-color: var( --color-surface-0 );
		border-color: @dark-bg-20;
		-webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.025 );
		-moz-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.025 );
		box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.025 );
	}

	.srf-datatables ::placeholder {
		color: var( --color-base--subtle );
	}

	.srf-datatables input,
	textarea {
		-webkit-box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.1 );
		-moz-box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.1 );
		box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.1 );
	}

	.srf-datatables input:focus,
	textarea:focus {
		border-color: var( --color-primary );
		box-shadow: none;
	}

	.srf-datatables input[ type='file' ]:focus,
	input[ type='checkbox' ]:focus,
	select:focus {
		outline: 1px dotted @dark-bg-60;
	}

	.srf-datatables input[ disabled ],
	select[ disabled ],
	textarea[ disabled ],
	input[ readonly ],
	select[ readonly ],
	textarea[ readonly ] {
		background-color: @dark-bg-10;
		border-color: @dark-bg-20;
	}

	.srf-datatables .inline-inputs {
		color: var( --color-base--subtle );
	}

	.srf-datatables .input-prepend .add-on,
	.srf-datatables .input-append .add-on {
		color: var( --color-base--subtle );
		text-shadow: 0 1px 0 var( --color-surface-0 );
		background: @dark-bg-10;
		border: 1px solid @dark-bg-20;
	}

	.srf-datatables .input-prepend .active,
	.srf-datatables .input-append .active {
		background: var( --background-color-success );
		border-color: var( --color-success );
	}

	.srf-datatables .inputs-list label strong {
		color: var( --color-base--subtle );
	}

	.srf-datatables .pagination ul {
		border: 1px solid @dark-bg-20;
		-webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
		-moz-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
		box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
	}

	.srf-datatables .pagination a {
		border-right-color: @dark-bg-20;
	}

	.srf-datatables .pagination a:hover,
	.srf-datatables .pagination .active a {
		background-color: var( --background-color-primary--active );
	}

	.srf-datatables .pagination .disabled a,
	.srf-datatables .pagination .disabled a:hover {
		color: var( --color-base--subtle );
	}

	.srf-datatables .ui-button-primary {
		color: var( --color-base--emphasized );
		text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.25 );
		background-color: var( --color-primary );
		background-image: none;
		border-color: rgba( 0, 0, 0, 0.1 ) rgba( 0, 0, 0, 0.1 ) rgba( 0, 0, 0, 0.25 );
	}

	.srf-datatables .ui-button {
		color: var( --color-base );
		text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.75 );
		background-color: @dark-bg-10;
		background-image: none !important;
		border: 1px solid @dark-bg-30 !important;
		border-bottom-color: @dark-bg-50;
		box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.2 ), 0 1px 2px rgba( 0, 0, 0, 0.05 );// linear-gradient( @dark-bg-20, @dark-bg-20 25%, var( --color-surface-0 ) ) !important;
	}
}