@import '../../style/variables.scss';

.custom-table {
    background: $white;
    overflow-y: auto;
    scrollbar-color: $primary #e6d8c5;
    scrollbar-width: thin;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: $primary;
    }
    &::-webkit-scrollbar-track {
        background-color: #e6d8c5;
    }
    table {
        border: 0;
        border-collapse: collapse;
        width: 100%;
        thead {
            tr {
                th {
                    font-size: 14px;
                    line-height: 1.3;
                    font-weight: 400;
                    padding: 10px 14px;
                    text-align:left;
                    white-space:nowrap;
                    color: $tertiary;
                    border-bottom: 1px solid $mainBorder;
                    // text-transform: capitalize;
                    cursor: pointer;
                    user-select: none;
                    &:last-child{
                        text-align: center;
                    }
                    @media only screen and (min-width: 1441px) {
                        font-size: 18px;
                        padding: 20px 16px;
                    }
                    .sort-body{
                        margin-left: 10px;
                        vertical-align: middle;
                        i{
                            font-size: 16px;
                            color: $primary;
                            opacity: 0.5;
                            &.active{
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
        tbody {
            tr {
                &:first-child{
                    td{
                        padding-top: 10px;
                        @media only screen and (min-width: 1441px){
                            padding-top: 20px;
                        }
                    }
                }
                &:last-child{
                    td{
                        padding-bottom: 10px;
                        @media only screen and (min-width: 1441px){
                            padding-bottom: 20px;
                        }
                    }
                }
                &:nth-last-child(1),
                &:nth-last-child(2),
                &:nth-last-child(3),
                &:nth-last-child(4),
                &:nth-last-child(5),
                &:nth-last-child(6),
                &:nth-last-child(7),
                &:nth-last-child(8){
                    td {
                        .custom-table-dropdown {
                            .dropdown-body{
                                top: auto;
                                bottom: 100%;
                            }
                        }
                    }
                }
                &:nth-child(1),
                &:nth-child(2){
                    td {
                        .custom-table-dropdown {
                            .dropdown-body{
                                top: 100%;
                                bottom: auto;
                            }
                        }
                    }
                }
                td {
                    font-size: 14px;
                    line-height: 1.3;
                    padding: 8px 14px;
                    color: $btnText;
                    border: none;
                    &:last-child{
                        text-align: center;
                    }
                    @media only screen and (min-width: 1441px) {
                        font-size: 18px;
                        padding: 10px 16px;
                    }
                    img {
                        width: 36px;
                        min-width: 36px;
                        height: 36px;
                        object-fit: cover;
                        display: block;
                        border-radius:100%;
                        object-fit: cover;
                        @media only screen and (min-width: 1441px) {
                            width: 46px;
                            min-width: 46px;
                            height: 46px;
                        }
                    }
                    .dashboard-form-btn{
                        font-size: 14px;
                        line-height: 20px;
                        padding: 4px 18px;
                        position: static;
                        min-width: auto;
                        @media only screen and (min-width: 640px) {
                            padding: 4px 21px;
                        }
                        @media only screen and (min-width: 1441px) {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}