
//
// Variables
//

$control-button-top: 9px !default;
$control-button-size: 1em !default;
$control-button-color: white !default;
$open-button-background: #31b131 !default;
$close-button-background: #d33333 !default;


//
// Mixins
//
@mixin control() {
	display: inline-block;
	color: $control-button-color;
	border: 0.15em solid white;
	border-radius: 1em;
	box-shadow: 0 0 0.2em #444;
	box-sizing: content-box;
	text-align: center;
	text-indent: 0 !important;

	// Use Courier New because it is common and consistent
	font-family: 'Courier New', Courier, monospace;
	line-height: 1em;
}

@mixin control-open() {
	content: '+';
	background-color: $open-button-background;
}

@mixin control-close() {
	content: '-';
	background-color: $close-button-background;
}

table.dataTable {
    // Typography
    th.dt-left,
    td.dt-left {
        text-align: left;
    }

    th.dt-center,
    td.dt-center,
    td.dataTables_empty {
        text-align: center;
    }

    th.dt-right,
    td.dt-right {
        text-align: right;
    }

    th.dt-justify,
    td.dt-justify {
        text-align: justify;
    }

    th.dt-nowrap,
    td.dt-nowrap {
        white-space: nowrap;
    }

    thead,
    tfoot {
        th.dt-head-left,
        td.dt-head-left {
            text-align: left;
        }

        th.dt-head-center,
        td.dt-head-center{
            text-align: center;
        }

        th.dt-head-right,
        td.dt-head-right {
            text-align: right;
        }

        th.dt-head-justify,
        td.dt-head-justify {
            text-align: justify;
        }

        th.dt-head-nowrap,
        td.dt-head-nowrap {
            white-space: nowrap;
        }
    }

    tbody {
        th.dt-body-left,
        td.dt-body-left {
            text-align: left;
        }

        th.dt-body-center,
        td.dt-body-center {
            text-align: center;
        }

        th.dt-body-right,
        td.dt-body-right {
            text-align: right;
        }

        th.dt-body-justify,
        td.dt-body-justify {
            text-align: justify;
        }

        th.dt-body-nowrap,
        td.dt-body-nowrap {
            white-space: nowrap;
        }
    }

    // Child row controls
    td.dt-control {
        text-align: center;
        cursor: pointer;
    
        &:before {
            height: $control-button-size;
            width: $control-button-size;
            margin-top: -$control-button-top;
            @include control;
            @include control-open;
        }
    }
    
    tr.dt-hasChild {
        td.dt-control:before {
            @include control-close;
        }
    }
}