@use "variables" as *;

// .ekesto-responsive-table-container {
//     width: 100%;
//     overflow-x: auto;
//     background:
//     /* right shadow */
//     linear-gradient(to left, rgba(0,0,0,.20), rgba(0,0,0,0)) 100% 0 / 48px 100% no-repeat,
//     /* optional: left shadow */
//     linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,0)) 0 0 / 48px 100% no-repeat;

//   /* key part: makes the background behave relative to scroll container */
//   background-attachment: local;
// }

.eci-table {
    min-width: 700px;
    border: 1px solid $color-border;
    border-collapse: collapse;

    @media screen and (max-width:$breakpoint-mobile-max) {
        min-width: 0;
    }

    tr {
        &:hover {
            td {
                background-color: $color-surface-alt;
            }
            code {
                background: white;
            }
        }
        &:last-child {
            td {
                border-bottom: none;
            }
        }
    }

    th,
    td {
        padding: $spacing-sm $spacing-lg;
        text-align: left;
        &:first-child {
            padding-right: 0;
            padding-left: $spacing-md;
        }
    }

    th {
        font-weight: 600;
        border-bottom: 2px solid $color-border-strong;
        background: $color-surface-muted;
        input {
            margin: 0;
            border-radius: 2px;
        }
    }

    td {
        cursor: pointer;
        border-bottom: 1px solid $color-border;
    }

    input[type="checkbox"] {
        margin: 0;
    }

    .components-checkbox-control {
        margin-top: 0.2em;
    }

    &__empty {
        color: $color-text-secondary;
        font-style: italic;
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    Variations

    */

    &.eci-group-list-table {
        td {
            cursor: default;
        }
    }

    &.eci-page-selection-table {
        min-width: 500px;
        th {
            &:nth-child(1) { width: 20px; }
            &:nth-child(2) {
                width: 220px;
                @media screen and (min-width:$breakpoint-mobile) {
                    width: 350px;
                }
             }
            &:nth-child(3) { width: auto; }
            &:nth-child(4) { width: 100px; }

        }
        &--summary {
            th {
                &:nth-child(1) {
                    width: 220px;
                    @media screen and (min-width:$breakpoint-mobile) {
                        width: 350px;
                    }
                }
                &:nth-child(2) { width: auto; }
                &:nth-child(3) { width: 100px; }

            }
            td {
                cursor: default;
            }
        }
    }

    &.eci-access-control-table {
        min-width: 520px;

        th,
        td {
            &:nth-child(2),
            &:nth-child(3) {
                width: 90px;
                text-align: center;
            }
        }

        td {
            cursor: default;
            vertical-align: middle;
        }
    }

    &.eci-access-control-table--users {
        min-width: 620px;

        th,
        td {
            &:nth-child(2) {
                width: auto;
                text-align: left;
            }
            &:nth-child(3) {
                width: 80px;
                text-align: center;
            }
        }
    }
}

.eci-access-control-table {
    input[type="radio"] {
        margin: 0;
    }

    &__label {
        font-weight: 600;
    }

    &__role {
        color: $color-text-secondary;
    }

    &__mode-cell {
        text-align: center;
    }

    &__actions {
        text-align: center;
    }

    &__remove {
        min-width: 0;
    }
}
