/* 04.20 Table CSS */

.table {
    color: $body-color;

    & thead {
        & tr {
            & th {
                font-size: 14px;
                font-weight: 700;
                line-height: 1;

                padding: 20px 10px 20px 0;

                letter-spacing: 1.38px;
                text-transform: uppercase;

                color: $heading-color;
                border-color: $border-color;
                border-top: none;

                &.product-thumbnail {
                    width: 105px;
                }
            }
        }
    }

    & tbody {
        & tr {
            & td {
                padding: 20px 10px 20px 0;

                vertical-align: middle;

                border-color: $border-color;

                &.product-remove {
                    padding-right: 0;
                }

                &.product-price,
                &.product-subtotal {
                    & .amount {
                        font-weight: 600;

                        color: $secondary-light;
                    }
                }

                &.product-quantity {
                    & .quantity {
                        position: relative;

                        width: 110px;

                        & button {
                            position: absolute;
                            right: 0;

                            width: 36px;
                            height: 50%;
                            padding: 0;

                            border: none;
                            background-color: transparent;

                            &::before {
                                position: absolute;
                                right: 14px;

                                content: "";
                                transition: $transition;

                                border-right: 5px solid transparent;
                                border-left: 5px solid transparent;
                            }

                            &.increase {
                                &::before {
                                    bottom: 4px;

                                    border-bottom: 5px solid #CCCCCC;
                                }

                                &:hover {
                                    &::before {
                                        border-bottom-color: $primary;
                                    }
                                }
                            }

                            &.decrease {
                                top: 50%;

                                &::before {
                                    top: 4px;

                                    border-top: 5px solid #CCCCCC;
                                }

                                &:hover {
                                    &::before {
                                        border-top-color: $primary;
                                    }
                                }
                            }
                        }

                        & .qty {
                            min-height: 48px;
                            padding: 2px 36px 2px 10px;

                            appearance: textfield;
                        }
                    }
                }
            }
        }
    }

    & tfoot {
        & tr {
            & td {
                padding: 10px 20px;

                border-color: $border-color;
            }
        }
    }

    &-striped {
        & tbody {
            & tr {
                &:nth-child(2n+1) {
                    td {
                        background: $white;
                    }
                }

                &:nth-child(2n) {
                    td {
                        background: rgba($black, 0.01);
                    }
                }
            }
        }
    }
}