.o-table {
    $border-color = $color--gray-2;

    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    
    thead, tbody, tfoot, & > tr {
        &:first-child {
            tr:first-child {
                th, td {
                    border-top: solid 1px $border-color;
                    &:first-child {
                        border-radius: 4px 0 0 0;
                    }
                    &:last-child {
                        border-radius: 0 4px 0 0; 
                    }
                }
            }
        }
        &:last-child {
            tr:last-child {
                th, td {
                    &:first-child {
                        border-radius: 0 0 0 4px;
                    }
                    &:last-child {
                        border-radius: 0 0 4px 0;
                    }
                }
            }
        }
    }

    th {
        font-weight: $font--regular;
        color: #7f7f7f;
        &:not(.o-table__cell--num) {
            text-align: left;
        }
    }

    th, td {
        padding: 1rem $gutter--xs;
        border-bottom: solid 1px $border-color;
        &:first-child {
            border-left: @border-bottom;
        }
        &:last-child {
            border-right: @border-bottom;
        }

        gutter-responsive(padding-left);

        &:last-child {
            gutter-responsive(padding-right);
        }
    }

    

    &--fixed {
        table-layout: fixed;
    }



    &__title {
        padding-top: 20px;
        padding-bottom: @padding-top;
        border: solid 1px $border-color;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        font-size: 1.5em;
        font-weight: $font--bold;
        text-align: left;

        gutter-responsive(padding-left, padding-right);
    }

    &__cell {
        &--num {
            text-align: right;
        }
    }


    // Modo para celular

    @media (max-width: $screen--md - 1) {
        border-bottom: solid 1px $border-color;
        border-radius: 4px;

        thead {
            display: none;
        }

        tr {
            display: block;
            border: solid 1px $border-color;
            border-bottom: none;
        }

        th, td {
            display: block;
            position: relative;
            padding-left: 120px;
            border: none;

            &:first-child,
            &:last-child {
                border: none;
            }

            &:before {
                content: attr(data-table-heading);
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100%;
                padding: 1rem 10px;
                margin-right: 10px;
                background-color: $color--gray-3;
                font-size: 12px;
                color: $color--gray-1;
                text-align: right;
            }
        }

        &__title {
            padding: 20px;
        }

        &__cell--num {
            text-align: left;
        }
    }
}