// Name:            Table
// Description:     Styles for tables
//
// Component:       `uk-table`
//
// Modifiers:       `uk-table-middle`
//                  `uk-table-striped`
//                  `uk-table-small`
//                  `uk-table-hover`
//                  `uk-table-shrink`
//                  `uk-table-expand`
//                  `uk-table-link`
//
// States:          `uk-active`
//
// ========================================================================


// Variables
// ========================================================================

@table-margin-vertical:                         @global-margin;

@table-cell-padding-vertical:                   16px;
@table-cell-padding-horizontal:                 12px;

@table-header-cell-font-size:                   @global-font-size;
@table-header-cell-font-weight:                 bold;
@table-header-cell-color:                       @global-color;

@table-footer-font-size:                        @global-small-font-size;

@table-caption-font-size:                       @global-small-font-size;
@table-caption-color:                           @global-muted-color;

@table-row-active-background:                   #ffd;

@table-striped-row-background:                  @global-muted-background;

@table-hover-row-background:                    @table-row-active-background;

@table-small-cell-padding-vertical:             10px;
@table-small-cell-padding-horizontal:           12px;

@table-expand-min-width:                        300px;


/* ========================================================================
   Component: Table
 ========================================================================== */

/*
 * 1. Remove most spacing between table cells.
 * 2. Behave like a block element
 * 3. Style
 */

.uk-table {
    /* 1 */
    border-collapse: collapse;
    border-spacing: 0;
    /* 2 */
    width: 100%;
    /* 3 */
    margin-bottom: @table-margin-vertical;
}

/* Add margin if adjacent element */
* + .uk-table { margin-top: @table-margin-vertical; }


/* Header cell
 ========================================================================== */

/*
 * 1. Style
 */

.uk-table th {
    padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
    text-align: left;
    vertical-align: bottom;
    /* 1 */
    font-size: @table-header-cell-font-size;
    font-weight: @table-header-cell-font-weight;
    color: @table-header-cell-color;
    .hook-table-header-cell;
}


/* Cell
 ========================================================================== */

.uk-table td {
    padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
    vertical-align: top;
    .hook-table-cell;
}


/* Footer
 ========================================================================== */

.uk-table tfoot {
    font-size: @table-footer-font-size;
    .hook-table-footer;
}


/* Caption
 ========================================================================== */

.uk-table caption {
    font-size: @table-caption-font-size;
    text-align: left;
    color: @table-caption-color;
    .hook-table-caption;
}


/* Row
 ========================================================================== */

.uk-table > tr.uk-active,
.uk-table tbody tr.uk-active {
    background: @table-row-active-background;
    .hook-table-row-active;
}


/* Alignment modifier
 ========================================================================== */

.uk-table-middle,
.uk-table-middle td { vertical-align: middle !important; }


/* Style modifiers
 ========================================================================== */

/*
 * Striped
 */

.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
    background: @table-striped-row-background;
    .hook-table-striped;
}

/*
 * Hover
 */

.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover {
    background: @table-hover-row-background;
    .hook-table-hover;
}


/* Size modifier
 ========================================================================== */

.uk-table-small th,
.uk-table-small td {
    padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal;
    .hook-table-small;
}


/* Cell size modifier
 ========================================================================== */

.uk-table-shrink { width: 1px; }
.uk-table-expand { min-width: @table-expand-min-width; }


/* Cell link modifier
 ========================================================================== */

.uk-table-link { padding: 0 !important; }

.uk-table-link > a {
    display: block;
    padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
}

.uk-table-small .uk-table-link > a { padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal; }


// Hooks
// ========================================================================

.hook-table-misc;

.hook-table() {}
.hook-table-header-cell() {}
.hook-table-cell() {}
.hook-table-footer() {}
.hook-table-caption() {}
.hook-table-row-active() {}
.hook-table-striped() {}
.hook-table-small() {}
.hook-table-hover() {}
.hook-table-small() {}
.hook-table-misc() {}
