@import "../new-variables";

.table-container {
    display: flex;
    justify-content: center;
    overflow-y: auto;
    height: calc(100vh - 330px);

    table {
        height: fit-content;
        width: 100%;
        border-collapse: separate !important;
        border-spacing: 0 15px;

        thead {
            background-color: white;

            th {
                border-bottom: 1px dotted $another-grey-text-color;
            }
        }

        td,
        th {
            &.small {
                width: 90px;
            }
        }

        tr.head-row {
            color: #cccccc;
            font-size: 11px;
            background-color: #f8fafc;
            box-shadow: 0 0 0 1px #f8fafc;
        }

        tr.warning {
            box-shadow: 0 0 0 1px $error-color;
        }

        tr:not(.head-row) {
            position: relative;
            height: 50px;

            &:nth-child(odd) {
                background-color: #eff0ed;
            }

            &:nth-child(even) {
                background-color: #ffffff;
            }

            td {
                position: relative;
                font-size: 12px;
                color: #040059;
            }

            td.warning {
                b {
                    color: $error-color;
                }

                color: $error-color;
            }

            td.action-column {
                position: relative;

                img {
                    padding: 4px 10px;
                    cursor: pointer;
                }
            }
        }

        .actions-popup {
            display: none;
            position: absolute;
            top: 30px;
            right: calc(50% - 20px);
            background-color: #0d60c8;
            width: 238px;
            z-index: 1000;
            border-radius: 5px;
            padding: 33px 28px 0;

            & .close-popup {
                color: white;
                cursor: pointer;
                width: 40px;
                height: 40px;
                border-radius: 5px 5px 0 0;
                background-color: #0d60c8;
                position: absolute;
                padding-top: 6px;
                font-size: 14px;
                right: 0;
                top: -20px;
            }

            ul {
                padding-left: 0;
            }

            ul li {
                text-align: left;
                color: white;
                font-size: 11px;
                margin-bottom: 33px;
                padding-bottom: 4px;
                border-bottom: 1px dashed transparent;
                cursor: pointer;

                &:hover {
                    border-bottom: 1px dashed #ffffff;
                }

                a {
                    width: 100%;
                    display: block;

                    &:hover {
                        color: inherit;
                    }
                }

                button {
                    width: 100%;
                    text-align: left;
                    background: none;
                    color: inherit;
                    border: none;
                    padding: 0;
                    font: inherit;
                    cursor: pointer;
                    outline: inherit;
                }
            }
        }

        .actions-toggle.show ~ .actions-popup {
            display: initial;
        }

        /**
        for diplay red or green status binary
         */
        td.status-column {
            div {
                margin: auto;
                width: 10px;
                height: 10px;
                border-radius: 50%;

                &.active {
                    background: #2bc48a;
                }

                &.inactive {
                    background: #ee6969;
                }
            }
        }

        td.checkbox-column {
            label {
                font-size: 1.3rem;
                border: none;
                background: transparent;
            }

            input {
                background-color: transparent;
            }

            input:disabled {
                background-color: #eff0ed;
                border-color: #ccc;
            }

            &.default {
                input {
                    background-color: #c0d3ff !important;
                }
            }
        }

        td {
            img.copy-url {
                cursor: pointer;
            }
        }

        td .hoverable {
            display: none;
            left: 57%;
            top: 0px;
            position: absolute;
            background: #dfeaf7;
            padding: 28px 30px 18px;
            text-align: left;
            z-index: 10;
            width: 247px;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;

            &:before {
                content: "\a";
                border-style: solid;
                border-width: 10px 10px 10px 0;
                border-color: transparent #dfeaf7 transparent transparent;
                position: absolute;
                left: -10px;
                top: 15px;
            }

            ul li {
                margin: 7px 0;
            }
        }

        td:hover .hoverable {
            display: initial;
        }
    }

    .empty {
        height: calc(100vh - 288px);
        width: calc(100% - 400px) !important;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;

        &-img {
            max-width: 325px;
            width: 100%;
            max-height: 288px;
            height: 100%;
        }

        &-text {
            margin-top: 19px;
            font-weight: $bold;
            font-size: $text-size-normal;
            color: $another-grey-text-color;
        }
    }
}