@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> LAYOUT -> TABLE
    ========================================================================  */

// Check if the elements with table should be imported
@if $import-elements and $import-element-table {
    table {
        font-size: $table-font-size;
        margin: 0;
        margin-bottom: $table-element-spacing;
        max-width: 100%;
        width: 100%;

        // Check if the table size modifiers should be declared
        @if $table-size-modifiers {
            // Cycle through all of the sizes
            @each $size in $sizes {
                // Modifiers: Sizes
                &.is-#{$size} {
                    font-size: map-get($table-font-size-sizes, $size);

                    // Nested selectors
                    thead,
                    tbody {
                        // Nested selectors
                        tr {
                            // Nested selectors
                            th,
                            td {
                                padding: map-get($table-content-spacing-sizes, $size);
                            }
                        }
                    }
                }

                // Check if the table size modifiers with breakpoints should be declared
                @if $table-size-modifiers-with-breakpoints {
                    // Cycle through all of the breakpoints
                    @each $breakpoint-name, $breakpoint-value in $breakpoints {
                        // Breakpoint
                        @include breakpoint($breakpoint-name) {
                            // Modifiers: Size
                            &.is-#{$size}\@#{$breakpoint-name} {
                                // Variables
                                --content-spacing: var(--default-content-spacing-#{$size});
                                --font-size: var(--default-font-size-#{$size});
                            }
                        }
                    }
                }
            }
        }

        // Check if the table border modifiers should be declared
        @if $table-border-modifiers {
            // Modifiers
            &.table--border {
                // Nested selectors
                tbody {
                    // Nested selectors
                    tr {
                        // Styles
                        border-bottom: $table-body-border-width-divider $table-border-style $table-body-border-color;

                        // Nested selectors
                        td {
                            // Styles
                            border-left: $table-body-border-width-left $table-border-style $table-body-border-color;
                            border-right: $table-body-border-width-right $table-border-style $table-body-border-color;

                            // Pseudo classes
                            &:first-child {
                                // Styles
                                border-left: 0;
                            }

                            &:last-child {
                                // Styles
                                border-right: 0;
                            }
                        }
                    }
                }
            }

            &.table--border-horizontal {
                // Nested selectors
                tbody {
                    // Nested selectors
                    tr {
                        // Styles
                        border-bottom: var(--border-width-divider) var(--border-style) var(--border-color);
                    }
                }
            }

            &.table--border-vertical {
                // Nested selectors
                tbody {
                    // Nested selectors
                    tr {
                        // Nested selectors
                        td {
                            // Styles
                            border-left: var(--border-width-left) var(--border-style) var(--border-color);
                            border-right: var(--border-width-right) var(--border-style) var(--border-color);

                            // Pseudo classes
                            &:first-child {
                                // Styles
                                border-left: 0;
                            }

                            &:last-child {
                                // Styles
                                border-right: 0;
                            }
                        }
                    }
                }
            }
        }

        // Check if the table stripe modifier should be declared
        @if $table-stripe-modifier {
            // Modifiers
            &.table--stripe {
                // Nested selectors
                tbody {
                    // Nested selectors
                    tr {
                        // Pseudo classes
                        &:nth-child(odd) {
                            background-color: $table-body-background-color;
                            color: $table-body-font-color;
                        }

                        &:nth-child(even) {
                            background-color: $table-body-background-color-stripe;
                            color: $table-body-font-color-stripe;
                        }
                    }
                }
            }
        }

        // Nested selectors
        caption {
            // Styles
            padding: $table-content-spacing;
            text-align: inherit;
        }

        thead,
        tbody {
            // Nested selectors
            tr {
                // Nested selectors
                th,
                td {
                    // Styles
                    padding: $table-content-spacing;
                    vertical-align: middle;
                }
            }
        }

        thead {
            background-color: $table-head-background-color;
            border: 0 $table-border-style $table-head-border-color;
            border-bottom-width: $table-head-border-width-bottom;
            border-left-width: $table-head-border-width-left;
            border-right-width: $table-head-border-width-right;
            border-top-width: $table-head-border-width-top;
            color: $table-head-font-color;
        }

        tbody {
            background-color: $table-body-background-color;
            border: 0 $table-border-style $table-body-border-color;
            border-bottom-width: $table-body-border-width-bottom;
            border-left-width: $table-body-border-width-left;
            border-right-width: $table-body-border-width-right;
            border-top-width: $table-body-border-width-top;
            color: $table-body-font-color;
        }
    }
}