.dir-table {
    --col-size-size: 0.2rem;
    overflow: auto;
    width: 100%;
    border-radius: 3px;
    .dir-table-head {
        .dir-table-head-row {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            padding: 4px 0;
            background-color: var(--panel-bg-color);

            .dir-table-head-cell:not(:first-child) {
                position: relative;
                padding: 2px 4px;
                font-weight: bold;
                .dir-table-head-resize {
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 100%;
                    cursor: col-resize;
                    user-select: none;
                    -webkit-user-select: none;
                    touch-action: none;
                    width: 2px;
                    background: linear-gradient(var(--border-color), var(--border-color)) no-repeat center/2px 100%;
                }

                &:last-child {
                    .dir-table-head-resize {
                        width: 0;
                    }
                }
            }
        }
    }

    .dir-table-body {
        .dir-table-body-row {
            display: flex;
            border-radius: 3px;

            &:focus {
                background-color: var(--accent-color);
            }

            &:hover:not(:focus) {
                background-color: var(--highlight-bg-color);
            }

            .dir-table-body-cell {
                overflow: hidden;
                white-space: nowrap;
                padding: 0.25rem;
                cursor: default;

                &.col-size {
                    text-align: right;
                }
            }
        }
    }
}