// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

// Backgrounds
$clr-table-bgcolor: $clr-white !default;
$clr-thead-bgcolor: $clr-near-white !default;

// Borders
$clr-tablerow-bordercolor: $clr-light-gray !default;
$clr-table-bordercolor: $clr-light-midtone-gray !default;
$clr-table-borderwidth: $clr-default-borderwidth !default;
$clr-table-borderstyle: $clr-table-borderwidth solid $clr-table-bordercolor !default;

// Etc.
$clr-table-fontsize: clr-getTypePropertyValueForDomElement(table_text, font-size);
$clr-table-lineheight: 0.583333rem !default;
$clr-table-cellpadding: 0.5rem !default;
$clr-table-smallpadding: 0.25rem !default;

$clr-table-lineheightPaddingShim: (1rem - $clr-table-lineheight)/2 !default;
$clr-table-topcellpadding: $clr-table-cellpadding - $clr-rem-1px !default;
$clr-table-bottomcellpadding: $clr-table-cellpadding - $clr-rem-1px !default;

$clr-table-topcellpadding-cmp: $clr-table-cellpadding/2 - $clr-rem-1px !default;
$clr-table-bottomcellpadding-cmp: $clr-table-cellpadding/2 - $clr-rem-1px !default;

// Border radius of corner cells needs to be slightly less than the table's,
// To make sure they correctly cover the whole area up to the border.
$clr-table-cornercellradius: calc(#{$clr-default-borderradius} - 1px) !default;

$clr-table--compact-rowHeight: 1rem !default;
$clr-table--compact-verticalPadding: ($clr-table--compact-rowHeight - $clr-table-lineheight)/2 !default;

// Mixin for basic table styles to be able to reuse them on non-table elements.
@mixin basic-table($table, $thead, $tbody, $tr, $th, $td) {

    #{$table} {
        border-collapse: separate;
        border: $clr-table-borderstyle;
        border-radius: $clr-global-borderradius;

        background-color: $clr-table-bgcolor;
        color: $clr-table-font-color;
        margin: 0;
        margin-top: 1rem;
        max-width: 100%;
        width: 100%;

        #{$th},
        #{$td} {
            font-size: $clr-table-fontsize;
            line-height: $clr-table-lineheight;
            border-top: $clr-table-borderwidth solid $clr-tablerow-bordercolor;
            padding: $clr-table-topcellpadding $clr-table-cellpadding $clr-table-bottomcellpadding;
            text-align: center;
            vertical-align: top;

            &.left {
                text-align: left;

                &:first-child {
                    padding-left: $clr-table-smallpadding;
                }
            }
        }

        #{$th} {
            @include clr-getTypePropertiesForDomElement(table_header, (color, font-size, font-weight, letter-spacing));

            background-color: $clr-thead-bgcolor;
            vertical-align: bottom;
            border-bottom: $clr-table-borderstyle;
            border-top: 0 none;
        }

        #{$tbody} #{$tr}:first-child #{$td} {
            border-top: 0 none;
        }

        // in the rare event we have more than one tbody element.
        #{$tbody} + #{$tbody} {
            border-top: $clr-table-borderstyle;
        }

        // Rounded corners on tables are a pain...
        #{$thead} #{$th} {
            &:first-child {
                border-radius: $clr-table-cornercellradius 0 0 0;
            }

            &:last-child {
                border-radius: 0 $clr-table-cornercellradius 0 0;
            }
        }

        #{$tbody}:last-child {
            #{$tr}:last-child {
                #{$td} {
                    &:first-child {
                        border-radius: 0 0 0 $clr-table-cornercellradius;
                    }

                    &:last-child {
                        border-radius: 0 0 $clr-table-cornercellradius 0;
                    }
                }
            }
        }
    }

    &#{$table}-compact {
        #{$th}, #{$td} {
            padding-top: calc(#{$clr-table--compact-verticalPadding} + 1px);
            padding-bottom: calc(#{$clr-table--compact-verticalPadding});
        }
    }
}

@include exports('tables.clarity') {
    @include basic-table(".table", "thead", "tbody", "tr", "th", "td");

    .table.table-vertical {
        thead th {
            border: 0 none;
            border-radius: 0;
            display: none;
        }

        th {
            border-bottom: 0;
            border-top: $clr-table-borderwidth solid $clr-table-bordercolor;
            vertical-align: top;
        }

        td, th {
            text-align: left;
            border-color: $clr-table-bordercolor;

            &:first-child {
                border-right: $clr-table-borderstyle;
                background-color: $clr-thead-bgcolor;
                font-weight: clr-getTypePropertyValueForDomElement(table_header, font-weight);
            }
        }

        tbody:first-of-type {
            tr:first-child {
                th, td {
                    border-top: 0 none;

                    &:first-child {
                        border-radius: $clr-table-cornercellradius 0 0 0;
                    }

                    &:last-child {
                        border-radius: 0 $clr-table-cornercellradius 0 0;
                    }
                }
            }
        }

        tbody:last-child {
            tr:last-child {
                th, td {
                    &:first-child {
                        border-radius: 0 0 0 $clr-table-cornercellradius;
                    }

                    &:last-child {
                        border-radius: 0 0 $clr-table-cornercellradius 0;
                    }
                }
            }
        }
    }

    .table.table-noborder {
        $clr-table-noborder-bordercolor: clr-getColor(4);

        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
        border: 0;

        th {
            background-color: transparent;
            border-bottom-color: $clr-table-noborder-bordercolor;
            border-top: 0 none;

            &:first-child {
                // need this for vertical tables...
                border-right: 0 none;
            }
        }

        td {
            border-top: 0 none;

            // there's no border so we have to adjust padding to preserve baseline.
            padding-top: calc(#{$clr-table-topcellpadding} + #{$clr-table-borderwidth});

            &:first-child {
                border-right: 0 none;
            }
        }

        thead th {
            &:first-child, &:last-child {
                border-radius: 0;
            }
        }

        th, td {
            //  Very specific use of !important to avoid specificity inflation.
            border-radius: 0 !important;

            &:first-child {
                padding-left: 0;
            }
        }
    }

    .table.table-compact {
        th, td {
            // nudge down to force row to 24px height with border
            padding-top: calc(#{$clr-table--compact-verticalPadding} + 1px);
            padding-bottom: $clr-table--compact-verticalPadding;
        }

        &.table-noborder {
            th, td {
                // nudge down to force row to 24px height with border
                padding-top: calc(#{$clr-table--compact-verticalPadding} + 2px);
                // account for now missing bottom border
                padding-bottom: calc(#{$clr-table--compact-verticalPadding} + 1px);
            }
        }
    }
}