@import '~@gravity-ui/uikit/styles/mixins';

.dl-collection-content-table {
    $class: &;

    &__table {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    &__header {
        display: table-header-group;
    }

    &__content {
        display: table-row-group;
    }

    &__header-row,
    &__content-row {
        display: table-row;
    }

    &__content-row {
        color: inherit;
        text-decoration: none;

        &:hover:not(&_disabled) {
            background-color: var(--g-color-base-simple-hover);
            cursor: pointer;
        }
    }

    &__header-cell,
    &__content-cell {
        display: table-cell;
        border-bottom: 1px solid var(--g-color-line-generic);
        box-sizing: content-box;
        line-height: 18px;
        padding: 11px 10px;
        text-align: left;
        vertical-align: middle;

        color: inherit;
        text-decoration: none;

        &:last-child {
            padding-right: 12px;
            padding-left: 0;
        }

        &:first-child {
            padding-right: 0;
            padding-left: 12px;
        }

        &_disabled {
            pointer-events: none;
        }
    }

    &__header-cell {
        &_checkbox {
            width: 27px;
        }

        &_title {
            width: 60%;
        }

        &_controls {
            width: 50px;
        }
    }

    &__content-row:last-child &__content-cell {
        border-bottom: 0;
    }

    &__header-cell {
        font-weight: 500;
    }

    &__content-cell_title {
        display: table-cell;
        vertical-align: middle;
    }

    &__content-cell_control {
        text-align: right;
    }

    &__content-cell_control#{$class}__content-cell_import {
        cursor: default;
    }

    &__title-col {
        display: flex;
        align-items: center;
        min-height: 32px;
    }

    &__title-col-text {
        margin-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &_mobile {
        #{$class}__content-cell {
            @include text-body-2;
            padding: 4px;
        }

        #{$class}__content-cell_date {
            width: 80px;
        }
    }

    &__custom-entry-icon {
        height: 32px;
        width: 32px;
        .custom-color-box {
            height: 32px;
            width: 32px;
            border-radius: 6px;
        }

        &_mobile {
            height: 28px;
            width: 28px;
            .custom-color-box {
                height: 28px;
                width: 28px;
                border-radius: 6px;
            }
        }
    }

    &_mobile {
        #{$class}__content-cell {
            @include text-body-2;
            padding: 4px;
        }

        #{$class}__content-cell_title {
            width: 100%;
        }
    }
}
